imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #45 from matrix-org/file_uploads

Browse source 
Improve file uploads
This commit is contained in:
David Baker 2015-12-03 10:57:55 +00:00
commit c0391145e5
4 changed files with 202 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/components/structures/RoomView.js
View file

@ -26,7 +26,6 @@ var ReactDOM = require("react-dom");
var GeminiScrollbar = require('react-gemini-scrollbar');
var q = require("q");
var classNames = require("classnames");
var filesize = require('filesize');
var Matrix = require("matrix-js-sdk");
var MatrixClientPeg = require("../../MatrixClientPeg");
@ -107,6 +106,9 @@ module.exports = React.createClass({
this.forceUpdate();
break;
case 'notifier_enabled':
case 'upload_failed':
case 'upload_started':
case 'upload_finished':
this.forceUpdate();
break;
case 'call_state':
@ -408,30 +410,10 @@ module.exports = React.createClass({
},
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(error) {
).done(undefined, function(error) {
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
title: "Failed to upload file",
@ -894,28 +876,9 @@ module.exports = React.createClass({
// fileName: "testing_fooble.jpg",
// }
if (this.state.upload) {
var innerProgressStyle = {
width: ((this.state.upload.uploadedBytes / this.state.upload.totalBytes) * 100) + '%'
};
var uploadedSize = filesize(this.state.upload.uploadedBytes);
var totalSize = filesize(this.state.upload.totalBytes);
if (uploadedSize.replace(/^.* /,'') === totalSize.replace(/^.* /,'')) {
uploadedSize = uploadedSize.replace(/ .*/, '');
}
statusBar = (
<div className="mx_RoomView_uploadBar">
<div className="mx_RoomView_uploadProgressOuter">
<div className="mx_RoomView_uploadProgressInner" style={innerProgressStyle}></div>
</div>
<img className="mx_RoomView_uploadIcon" src="img/fileicon.png" width="17" height="22"/>
<img className="mx_RoomView_uploadCancel" src="img/cancel.png" width="18" height="18"/>
<div className="mx_RoomView_uploadBytes">
{ uploadedSize } / { totalSize }
</div>
<div className="mx_RoomView_uploadFilename">Uploading {this.state.upload.fileName}</div>
</div>
);
if (ContentMessages.getCurrentUploads().length > 0) {
var UploadBar = sdk.getComponent('structures.UploadBar');
statusBar = <UploadBar room={this.state.room} />
} else {
var typingString = this.getWhoIsTypingString();
// typingString = "S͚͍̭̪̤͙̱͙̖̥͙̥̤̻̙͕͓͂̌ͬ͐̂k̜̝͎̰̥̻̼̂̌͛͗͊̅̒͂̊̍̍͌̈̈́͌̋̊ͬa͉̯͚̺̗̳̩ͪ̋̑͌̓̆̍̂̉̏̅̆ͧ̌̑v̲̲̪̝ͥ̌ͨͮͭ̊͆̾ͮ̍ͮ͑̚e̮̙͈̱̘͕̼̮͒ͩͨͫ̃͗̇ͩ͒ͣͦ͒̄̍͐ͣ̿ͥṘ̗̺͇̺̺͔̄́̊̓͊̍̃ͨ̚ā̼͎̘̟̼͎̜̪̪͚̋ͨͨͧ̓ͦͯͤ̄͆̋͂ͩ͌ͧͅt̙̙̹̗̦͖̞ͫͪ͑̑̅ͪ̃̚ͅ is typing...";