Basically working upload progress bar.

This commit is contained in:
David Baker 2015-07-19 22:02:04 -04:00
parent a477c8be4c
commit 29b4f59982
4 changed files with 66 additions and 21 deletions
skins/base
css/organisms
views
src/controllers/organisms

View File

@ -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;
}

View File

@ -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() {

View File

@ -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>
);
}

View File

@ -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);
},