forked from matrix/element-web
Basically working upload progress bar.
This commit is contained in:
parent
a477c8be4c
commit
29b4f59982
skins/base
src/controllers/organisms
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue