From 29b4f5998277bcb2a81a431504d0f756ddfb07d6 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Sun, 19 Jul 2015 22:02:04 -0400
Subject: [PATCH] Basically working upload progress bar.

---
 skins/base/css/organisms/RoomView.css         | 11 ++++++
 skins/base/views/molecules/MessageComposer.js | 10 +----
 skins/base/views/organisms/RoomView.js        | 28 +++++++++++---
 src/controllers/organisms/RoomView.js         | 38 +++++++++++++++----
 4 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css
index 1fcb86e4..9341f213 100644
--- a/skins/base/css/organisms/RoomView.css
+++ b/skins/base/css/organisms/RoomView.css
@@ -117,3 +117,14 @@ limitations under the License.
     flex: 0 0 63px;
     margin-right: 2px;
 }
+
+.mx_RoomView_uploadProgressOuter {
+    width: 100%;
+    background-color: black;
+    height: 5px;
+}
+
+.mx_RoomView_uploadProgressInner {
+    background-color: blue;
+    height: 5px;
+}
diff --git a/skins/base/views/molecules/MessageComposer.js b/skins/base/views/molecules/MessageComposer.js
index 2f764b41..9ad1e029 100644
--- a/skins/base/views/molecules/MessageComposer.js
+++ b/skins/base/views/molecules/MessageComposer.js
@@ -32,14 +32,8 @@ module.exports = React.createClass({
 
     onUploadFileSelected: function(ev) {
         var files = ev.target.files;
-
-        ContentMessages.sendContentToRoom(
-            files[0], this.props.room.roomId, MatrixClientPeg.get()
-        ).progress(function(ev) {
-            //console.log("Upload: "+ev.loaded+" / "+ev.total);
-        }).done(undefined, function() {
-            // display error message
-        });
+        // MessageComposer shouldn't have to rely on it's parent passing in a callback to upload a file
+        this.props.uploadFile(files[0]);
     },
 
     render: function() {
diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js
index 5878e881..a93937f0 100644
--- a/skins/base/views/organisms/RoomView.js
+++ b/skins/base/views/organisms/RoomView.js
@@ -22,6 +22,7 @@ var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 
 var ComponentBroker = require('../../../../src/ComponentBroker');
 var classNames = require("classnames");
+var filesize = require('filesize');
 
 var MessageTile = ComponentBroker.get('molecules/MessageTile');
 var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
@@ -76,13 +77,30 @@ module.exports = React.createClass({
                 <div />
             );
 
-            var typingString = this.getWhoIsTypingString();
-            if (typingString) {
+            if (this.state.upload) {
+                var innerProgressStyle = {
+                    width: ((this.state.upload.uploadedBytes / this.state.upload.totalBytes) * 100) + '%'
+                };
                 statusBar = (
-                    <div className="mx_RoomView_typingBar">
-                        {typingString}
+                    <div className="mx_RoomView_uploadBar">
+                        <span className="mx_RoomView_uploadFilename">Uploading {this.state.upload.fileName}</span>
+                        <span className="mx_RoomView_uploadBytes">
+                        {filesize(this.state.upload.uploadedBytes)} / {filesize(this.state.upload.totalBytes)}
+                        </span>
+                        <div className="mx_RoomView_uploadProgressOuter">
+                            <div className="mx_RoomView_uploadProgressInner" style={innerProgressStyle}></div>
+                        </div>
                     </div>
                 );
+            } else {
+                var typingString = this.getWhoIsTypingString();
+                if (typingString) {
+                    statusBar = (
+                        <div className="mx_RoomView_typingBar">
+                            {typingString}
+                        </div>
+                    );
+                }
             }
 
             return (
@@ -105,7 +123,7 @@ module.exports = React.createClass({
                             {statusBar}
                         </div>
                     </div>
-                    <MessageComposer room={this.state.room} />
+                    <MessageComposer room={this.state.room} uploadFile={this.uploadFile} />
                 </div>
             );
         }
diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js
index 3ebbd3fe..a5bae754 100644
--- a/src/controllers/organisms/RoomView.js
+++ b/src/controllers/organisms/RoomView.js
@@ -231,18 +231,40 @@ module.exports = {
         ev.stopPropagation();
         ev.preventDefault();
         var files = ev.dataTransfer.files;
-
         if (files.length == 1) {
-            ContentMessages.sendContentToRoom(
-                files[0], this.props.roomId, MatrixClientPeg.get()
-            ).progress(function(ev) {
-                //console.log("Upload: "+ev.loaded+" / "+ev.total);
-            }).done(undefined, function() {
-                // display error message
-            });
+            this.uploadFile(files[0]);
         }
     },
 
+    uploadFile: function(file) {
+        this.setState({
+            upload: {
+                fileName: file.name,
+                uploadedBytes: 0,
+                totalBytes: file.size
+            }
+        });
+        var self = this;
+        ContentMessages.sendContentToRoom(
+            file, this.props.roomId, MatrixClientPeg.get()
+        ).progress(function(ev) {
+            //console.log("Upload: "+ev.loaded+" / "+ev.total);
+            self.setState({
+                upload: {
+                    fileName: file.name,
+                    uploadedBytes: ev.loaded,
+                    totalBytes: ev.total
+                }
+            });
+        }).finally(function() {
+            self.setState({
+                upload: undefined
+            });
+        }).done(undefined, function() {
+            // display error message
+        });
+    },
+
     getWhoIsTypingString: function() {
         return WhoIsTyping.whoIsTypingString(this.state.room);
     },