Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Basically working upload progress bar.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
skins/base/css/organisms/RoomView.css
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;
}

10
skins/base/views/molecules/MessageComposer.js
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() {

20
skins/base/views/organisms/RoomView.js
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,6 +77,22 @@ module.exports = React.createClass({
<div />
);
if (this.state.upload) {
var innerProgressStyle = {
width: ((this.state.upload.uploadedBytes / this.state.upload.totalBytes) * 100) + '%'
};
statusBar = (
<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 = (
@ -84,6 +101,7 @@ module.exports = React.createClass({
</div>
);
}
}
return (
<div className="mx_RoomView">
@ -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>
);
}

28
src/controllers/organisms/RoomView.js
View File

@ -231,16 +231,38 @@ module.exports = {
ev.stopPropagation();
ev.preventDefault();
var files = ev.dataTransfer.files;
if (files.length == 1) {
this.uploadFile(files[0]);
}
},
uploadFile: function(file) {
this.setState({
upload: {
fileName: file.name,
uploadedBytes: 0,
totalBytes: file.size
}
});
var self = this;
ContentMessages.sendContentToRoom(
files[0], this.props.roomId, MatrixClientPeg.get()
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() {