Merge pull request #359 from hmhealey/mm1770

MM-1770 Add the ability to cancel in-progress file uploads

api/file.go

@@ -71,7 +71,9 @@ func uploadFile(c *Context, w http.ResponseWriter, r *http.Request) {
 	files := m.File["files"]
 
 	resStruct := &model.FileUploadResponse{
-		Filenames: []string{}}
+		Filenames: []string{},
+		ClientIds: []string{},
+	}
 
 	imageNameList := []string{}
 	imageDataList := [][]byte{}
@@ -113,6 +115,10 @@ func uploadFile(c *Context, w http.ResponseWriter, r *http.Request) {
 		resStruct.Filenames = append(resStruct.Filenames, fileUrl)
 	}
 
+	for _, clientId := range props["client_ids"] {
+		resStruct.ClientIds = append(resStruct.ClientIds, clientId)
+	}
+
 	fireAndForgetHandleImages(imageNameList, imageDataList, c.Session.TeamId, channelId, c.Session.UserId)
 
 	w.Write([]byte(resStruct.ToJson()))

model/file.go

@@ -19,6 +19,7 @@ var (
 
 type FileUploadResponse struct {
 	Filenames []string `json:"filenames"`
+	ClientIds []string `json:"client_ids"`
 }
 
 func FileUploadResponseFromJson(data io.Reader) *FileUploadResponse {

web/react/components/create_comment.jsx

@@ -18,20 +18,24 @@ module.exports = React.createClass({
     handleSubmit: function(e) {
         e.preventDefault();
 
-        if (this.state.uploadsInProgress > 0) return;
+        if (this.state.uploadsInProgress.length > 0) {
+            return;
+        }
 
-        if (this.state.submitting) return;
+        if (this.state.submitting) {
+            return;
+        }
 
-        var post = {}
+        var post = {};
         post.filenames = [];
-
         post.message = this.state.messageText;
+
         if (post.message.trim().length === 0 && this.state.previews.length === 0) {
             return;
         }
 
         if (post.message.length > Constants.CHARACTER_LIMIT) {
-            this.setState({ post_error: 'Comment length must be less than '+Constants.CHARACTER_LIMIT+' characters.' });
+            this.setState({postError: 'Comment length must be less than ' + Constants.CHARACTER_LIMIT + ' characters.'});
             return;
         }
 
@@ -40,163 +44,154 @@ module.exports = React.createClass({
         post.parent_id = this.props.parentId;
         post.filenames = this.state.previews;
 
-        this.setState({ submitting: true, limit_error: null });
+        this.setState({submitting: true, serverError: null});
 
         client.createPost(post, ChannelStore.getCurrent(),
             function(data) {
                 PostStore.storeCommentDraft(this.props.rootId, null);
-                this.setState({ messageText: '', submitting: false, post_error: null, server_error: null });
+                this.setState({messageText: '', submitting: false, postError: null, serverError: null});
                 this.clearPreviews();
                 AsyncClient.getPosts(true, this.props.channelId);
 
                 var channel = ChannelStore.get(this.props.channelId);
                 var member = ChannelStore.getMember(this.props.channelId);
                 member.msg_count = channel.total_msg_count;
-                member.last_viewed_at = (new Date).getTime();
+                member.last_viewed_at = Date.now();
                 ChannelStore.setChannelMember(member);
-
             }.bind(this),
             function(err) {
                 var state = {};
-                state.server_error = err.message;
+                state.serverError = err.message;
                 state.submitting = false;
 
-                if (err.message === "Invalid RootId parameter") {
+                if (err.message === 'Invalid RootId parameter') {
-                    if ($('#post_deleted').length > 0) $('#post_deleted').modal('show');
+                    if ($('#post_deleted').length > 0) {
-                }
+                        $('#post_deleted').modal('show');
-                else {
+                    }
+                } else {
                     this.setState(state);
                 }
             }.bind(this)
         );
     },
     commentMsgKeyPress: function(e) {
-        if (e.which == 13 && !e.shiftKey && !e.altKey) {
+        if (e.which === 13 && !e.shiftKey && !e.altKey) {
             e.preventDefault();
             this.refs.textbox.getDOMNode().blur();
             this.handleSubmit(e);
         }
 
-        var t = new Date().getTime();
+        var t = Date.now();
         if ((t - this.lastTime) > 5000) {
-            SocketStore.sendMessage({channel_id: this.props.channelId, action: "typing", props: {"parent_id": this.props.rootId} });
+            SocketStore.sendMessage({channel_id: this.props.channelId, action: 'typing', props: {'parent_id': this.props.rootId}});
             this.lastTime = t;
         }
     },
     handleUserInput: function(messageText) {
         var draft = PostStore.getCommentDraft(this.props.rootId);
-        if (!draft) {
-            draft = { previews: [], uploadsInProgress: 0};
-        }
         draft.message = messageText;
         PostStore.storeCommentDraft(this.props.rootId, draft);
 
-        $(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight);
+        $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight);
-        $(".post-right__scroll").perfectScrollbar('update');
+        $('.post-right__scroll').perfectScrollbar('update');
         this.setState({messageText: messageText});
     },
-    handleFileUpload: function(newPreviews) {
+    handleUploadStart: function(clientIds, channelId) {
         var draft = PostStore.getCommentDraft(this.props.rootId);
-        if (!draft) {
-            draft = { message: '', uploadsInProgress: 0, previews: []}
-        }
 
-        $(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight);
+        draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds);
-        $(".post-right__scroll").perfectScrollbar('update');
-        var previews = this.state.previews.concat(newPreviews);
-        var num = this.state.uploadsInProgress;
-
-        draft.previews = previews;
-        draft.uploadsInProgress = num-1;
         PostStore.storeCommentDraft(this.props.rootId, draft);
 
-        this.setState({previews: previews, uploadsInProgress: num-1});
+        this.setState({uploadsInProgress: draft['uploadsInProgress']});
     },
-    handleUploadError: function(err) {
+    handleFileUploadComplete: function(filenames, clientIds, channelId) {
-        this.setState({ server_error: err });
+        var draft = PostStore.getCommentDraft(this.props.rootId);
+
+        // remove each finished file from uploads
+        for (var i = 0; i < clientIds.length; i++) {
+            var index = draft['uploadsInProgress'].indexOf(clientIds[i]);
+
+            if (index !== -1) {
+                draft['uploadsInProgress'].splice(index, 1);
+            }
+        }
+
+        draft['previews'] = draft['previews'].concat(filenames);
+        PostStore.storeCommentDraft(this.props.rootId, draft);
+
+        this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']});
+    },
+    handleUploadError: function(err, clientId) {
+        var draft = PostStore.getCommentDraft(this.props.rootId);
+
+        var index = draft['uploadsInProgress'].indexOf(clientId);
+        if (index !== -1) {
+            draft['uploadsInProgress'].splice(index, 1);
+        }
+
+        PostStore.storeCommentDraft(this.props.rootId, draft);
+
+        this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err});
     },
     clearPreviews: function() {
         this.setState({previews: []});
     },
-    removePreview: function(filename) {
+    removePreview: function(id) {
         var previews = this.state.previews;
-        for (var i = 0; i < previews.length; i++) {
+        var uploadsInProgress = this.state.uploadsInProgress;
-            if (previews[i] === filename) {
+
-                previews.splice(i, 1);
+        // id can either be the path of an uploaded file or the client id of an in progress upload
-                break;
+        var index = previews.indexOf(id);
+        if (index !== -1) {
+            previews.splice(index, 1);
+        } else {
+            index = uploadsInProgress.indexOf(id);
+
+            if (index !== -1) {
+                uploadsInProgress.splice(index, 1);
+                this.refs.fileUpload.cancelUpload(id);
             }
         }
 
-        var draft = PostStore.getCommentDraft();
+        var draft = PostStore.getCommentDraft(this.props.rootId);
-        if (!draft) {
-            draft = { message: '', uploadsInProgress: 0};
-        }
         draft.previews = previews;
-        PostStore.storeCommentDraft(draft);
+        draft.uploadsInProgress = uploadsInProgress;
+        PostStore.storeCommentDraft(this.props.rootId, draft);
 
-        this.setState({previews: previews});
+        this.setState({previews: previews, uploadsInProgress: uploadsInProgress});
     },
     getInitialState: function() {
         PostStore.clearCommentDraftUploads();
 
         var draft = PostStore.getCommentDraft(this.props.rootId);
-        messageText = '';
+        return {messageText: draft['message'], uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews'], submitting: false};
-        uploadsInProgress = 0;
-        previews = [];
-        if (draft) {
-            messageText = draft.message;
-            uploadsInProgress = draft.uploadsInProgress;
-            previews = draft.previews
-        }
-        return { messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews, submitting: false };
     },
     componentWillReceiveProps: function(newProps) {
-        if(newProps.rootId !== this.props.rootId) {
+        if (newProps.rootId !== this.props.rootId) {
             var draft = PostStore.getCommentDraft(newProps.rootId);
-            messageText = '';
+            this.setState({messageText: draft['message'], uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']});
-            uploadsInProgress = 0;
-            previews = [];
-            if (draft) {
-                messageText = draft.message;
-                uploadsInProgress = draft.uploadsInProgress;
-                previews = draft.previews
-            }
-            this.setState({ messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews });
         }
     },
-    setUploads: function(val) {
+    getFileCount: function(channelId) {
-        var oldInProgress = this.state.uploadsInProgress
+        return this.state.previews.length + this.state.uploadsInProgress.length;
-        var newInProgress = oldInProgress + val;
-
-        if (newInProgress + this.state.previews.length > Constants.MAX_UPLOAD_FILES) {
-            newInProgress = Constants.MAX_UPLOAD_FILES - this.state.previews.length;
-            this.setState({limit_error: "Uploads limited to " + Constants.MAX_UPLOAD_FILES + " files maximum. Please use additional comments for more files."});
-        } else {
-            this.setState({limit_error: null});
-        }
-
-        var numToUpload = newInProgress - oldInProgress;
-        if (numToUpload <= 0) return 0;
-
-        var draft = PostStore.getCommentDraft(this.props.rootId);
-        if (!draft) {
-            draft = { message: '', previews: []};
-        }
-        draft.uploadsInProgress = newInProgress;
-        PostStore.storeCommentDraft(this.props.rootId, draft);
-
-        this.setState({uploadsInProgress: newInProgress});
-
-        return numToUpload;
     },
     render: function() {
+        var serverError = null;
+        if (this.state.serverError) {
+            serverError = (
+                <div className='form-group has-error'>
+                    <label className='control-label'>{this.state.serverError}</label>
+                </div>
+            );
+        }
 
-        var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
+        var postError = null;
-        var post_error = this.state.post_error ? <label className='control-label'>{this.state.post_error}</label> : null;
+        if (this.state.postError) {
-        var limit_error = this.state.limit_error ? <div className='has-error'><label className='control-label'>{this.state.limit_error}</label></div> : null;
+            postError = <label className='control-label'>{this.state.postError}</label>;
+        }
 
-        var preview = <div/>;
+        var preview = null;
-        if (this.state.previews.length > 0 || this.state.uploadsInProgress > 0) {
+        if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) {
             preview = (
                 <FilePreview
                     files={this.state.previews}
@@ -205,32 +200,38 @@ module.exports = React.createClass({
             );
         }
 
+        var postFooterClassName = 'post-create-footer';
+        if (postError) {
+            postFooterClassName += ' has-error';
+        }
+
         return (
             <form onSubmit={this.handleSubmit}>
-                <div className="post-create">
+                <div className='post-create'>
-                    <div id={this.props.rootId} className="post-create-body comment-create-body">
+                    <div id={this.props.rootId} className='post-create-body comment-create-body'>
                         <Textbox
                             onUserInput={this.handleUserInput}
                             onKeyPress={this.commentMsgKeyPress}
                             messageText={this.state.messageText}
-                            createMessage="Add a comment..."
+                            createMessage='Add a comment...'
-                            initialText=""
+                            initialText=''
-                            id="reply_textbox"
+                            id='reply_textbox'
-                            ref="textbox" />
+                            ref='textbox' />
                         <FileUpload
-                            setUploads={this.setUploads}
+                            ref='fileUpload'
-                            onFileUpload={this.handleFileUpload}
+                            getFileCount={this.getFileCount}
+                            onUploadStart={this.handleUploadStart}
+                            onFileUpload={this.handleFileUploadComplete}
                             onUploadError={this.handleUploadError} />
                     </div>
                     <MsgTyping channelId={this.props.channelId} parentId={this.props.rootId}  />
-                    <div className={post_error ? 'has-error' : 'post-create-footer'}>
+                    <div className={postFooterClassName}>
-                        <input type="button" className="btn btn-primary comment-btn pull-right" value="Add Comment" onClick={this.handleSubmit} />
+                        <input type='button' className='btn btn-primary comment-btn pull-right' value='Add Comment' onClick={this.handleSubmit} />
-                        { post_error }
+                        {postError}
-                        { server_error }
+                        {serverError}
-                        { limit_error }
                     </div>
                 </div>
-                { preview }
+                {preview}
             </form>
         );
     }

web/react/components/create_post.jsx

@@ -22,13 +22,12 @@ module.exports = React.createClass({
     handleSubmit: function(e) {
         e.preventDefault();
 
-        if (this.state.uploadsInProgress > 0) return;
+        if (this.state.uploadsInProgress.length > 0 || this.state.submitting) {
-
+            return;
-        if (this.state.submitting) return;
+        }
 
         var post = {};
         post.filenames = [];
-
         post.message = this.state.messageText;
 
         if (post.message.trim().length === 0 && this.state.previews.length === 0) {
@@ -36,55 +35,52 @@ module.exports = React.createClass({
         }
 
         if (post.message.length > Constants.CHARACTER_LIMIT) {
-            this.setState({ post_error: 'Post length must be less than '+Constants.CHARACTER_LIMIT+' characters.' });
+            this.setState({postError: 'Post length must be less than ' + Constants.CHARACTER_LIMIT + ' characters.'});
             return;
         }
 
-        this.setState({ submitting: true, limit_error: null });
+        this.setState({submitting: true, serverError: null});
 
-        var user_id = UserStore.getCurrentId();
+        if (post.message.indexOf('/') === 0) {
-
-        if (post.message.indexOf("/") == 0) {
             client.executeCommand(
-                this.state.channel_id,
+                this.state.channelId,
                 post.message,
                 false,
                 function(data) {
                     PostStore.storeDraft(data.channel_id, null);
-                    this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null });
+                    this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null});
 
                     if (data.goto_location.length > 0) {
                         window.location.href = data.goto_location;
                     }
                 }.bind(this),
-                function(err){
+                function(err) {
-                    var state = {}
+                    var state = {};
-                    state.server_error = err.message;
+                    state.serverError = err.message;
                     state.submitting = false;
                     this.setState(state);
                 }.bind(this)
             );
         } else {
-            post.channel_id = this.state.channel_id;
+            post.channel_id = this.state.channelId;
             post.filenames = this.state.previews;
 
             client.createPost(post, ChannelStore.getCurrent(),
                 function(data) {
                     PostStore.storeDraft(data.channel_id, null);
-                    this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null });
+                    this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null});
                     this.resizePostHolder();
                     AsyncClient.getPosts(true);
 
-                    var channel = ChannelStore.get(this.state.channel_id);
+                    var channel = ChannelStore.get(this.state.channelId);
-                    var member = ChannelStore.getMember(this.state.channel_id);
+                    var member = ChannelStore.getMember(this.state.channelId);
                     member.msg_count = channel.total_msg_count;
-                    member.last_viewed_at = (new Date).getTime();
+                    member.last_viewed_at = Date.now();
                     ChannelStore.setChannelMember(member);
-
                 }.bind(this),
                 function(err) {
-                    var state = {}
+                    var state = {};
-                    state.server_error = err.message;
+                    state.serverError = err.message;
 
                     state.submitting = false;
                     this.setState(state);
@@ -92,21 +88,21 @@ module.exports = React.createClass({
             );
         }
 
-        $(".post-list-holder-by-time").perfectScrollbar('update');
+        $('.post-list-holder-by-time').perfectScrollbar('update');
     },
     componentDidUpdate: function() {
         this.resizePostHolder();
     },
     postMsgKeyPress: function(e) {
-        if (e.which == 13 && !e.shiftKey && !e.altKey) {
+        if (e.which === 13 && !e.shiftKey && !e.altKey) {
             e.preventDefault();
             this.refs.textbox.getDOMNode().blur();
             this.handleSubmit(e);
         }
 
-        var t = new Date().getTime();
+        var t = Date.now();
         if ((t - this.lastTime) > 5000) {
-            SocketStore.sendMessage({channel_id: this.state.channel_id, action: "typing", props: {"parent_id": ""}, state: {} });
+            SocketStore.sendMessage({channelId: this.state.channelId, action: 'typing', props: {'parent_id': ''}, state: {}});
             this.lastTime = t;
         }
     },
@@ -115,64 +111,74 @@ module.exports = React.createClass({
         this.setState({messageText: messageText});
 
         var draft = PostStore.getCurrentDraft();
-        if (!draft) {
-            draft = {}
-            draft['previews'] = [];
-            draft['uploadsInProgress'] = 0;
-        }
         draft['message'] = messageText;
         PostStore.storeCurrentDraft(draft);
     },
     resizePostHolder: function() {
         var height = $(window).height() - $(this.refs.topDiv.getDOMNode()).height() - $('#error_bar').outerHeight() - 50;
-        $(".post-list-holder-by-time").css("height", height + "px");
+        $('.post-list-holder-by-time').css('height', height + 'px');
         $(window).trigger('resize');
     },
-    handleFileUpload: function(newPreviews, channel_id) {
+    handleUploadStart: function(clientIds, channelId) {
-        var draft = PostStore.getDraft(channel_id);
+        var draft = PostStore.getDraft(channelId);
-        if (!draft) {
-            draft = {}
-            draft['message'] = '';
-            draft['uploadsInProgress'] = 0;
-            draft['previews'] = [];
-        }
 
-        if (channel_id === this.state.channel_id) {
+        draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds);
-            var num = this.state.uploadsInProgress;
+        PostStore.storeDraft(channelId, draft);
-            var oldPreviews = this.state.previews;
-            var previews = oldPreviews.concat(newPreviews);
 
-            draft['previews'] = previews;
+        this.setState({uploadsInProgress: draft['uploadsInProgress']});
-            draft['uploadsInProgress'] = num-1;
-            PostStore.storeCurrentDraft(draft);
-
-            this.setState({previews: previews, uploadsInProgress:num-1});
-        } else {
-            draft['previews'] = draft['previews'].concat(newPreviews);
-            draft['uploadsInProgress'] = draft['uploadsInProgress'] > 0 ? draft['uploadsInProgress'] - 1 : 0;
-            PostStore.storeDraft(channel_id, draft);
-        }
     },
-    handleUploadError: function(err) {
+    handleFileUploadComplete: function(filenames, clientIds, channelId) {
-        this.setState({ server_error: err });
+        var draft = PostStore.getDraft(channelId);
-    },
+
-    removePreview: function(filename) {
+        // remove each finished file from uploads
-        var previews = this.state.previews;
+        for (var i = 0; i < clientIds.length; i++) {
-        for (var i = 0; i < previews.length; i++) {
+            var index = draft['uploadsInProgress'].indexOf(clientIds[i]);
-            if (previews[i] === filename) {
+
-                previews.splice(i, 1);
+            if (index !== -1) {
-                break;
+                draft['uploadsInProgress'].splice(index, 1);
             }
         }
-        var draft = PostStore.getCurrentDraft();
+
-        if (!draft) {
+        draft['previews'] = draft['previews'].concat(filenames);
-            draft = {}
+        PostStore.storeDraft(channelId, draft);
-            draft['message'] = '';
+
-            draft['uploadsInProgress'] = 0;
+        this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']});
+    },
+    handleUploadError: function(err, clientId) {
+        var draft = PostStore.getDraft(this.state.channelId);
+
+        var index = draft['uploadsInProgress'].indexOf(clientId);
+        if (index !== -1) {
+            draft['uploadsInProgress'].splice(index, 1);
         }
+
+        PostStore.storeDraft(this.state.channelId, draft);
+
+        this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err});
+    },
+    removePreview: function(id) {
+        var previews = this.state.previews;
+        var uploadsInProgress = this.state.uploadsInProgress;
+
+        // id can either be the path of an uploaded file or the client id of an in progress upload
+        var index = previews.indexOf(id);
+        if (index !== -1) {
+            previews.splice(index, 1);
+        } else {
+            index = uploadsInProgress.indexOf(id);
+
+            if (index !== -1) {
+                uploadsInProgress.splice(index, 1);
+                this.refs.fileUpload.cancelUpload(id);
+            }
+        }
+
+        var draft = PostStore.getCurrentDraft();
         draft['previews'] = previews;
+        draft['uploadsInProgress'] = uploadsInProgress;
         PostStore.storeCurrentDraft(draft);
-        this.setState({previews: previews});
+
+        this.setState({previews: previews, uploadsInProgress: uploadsInProgress});
     },
     componentDidMount: function() {
         ChannelStore.addChangeListener(this._onChange);
@@ -182,66 +188,50 @@ module.exports = React.createClass({
         ChannelStore.removeChangeListener(this._onChange);
     },
     _onChange: function() {
-        var channel_id = ChannelStore.getCurrentId();
+        var channelId = ChannelStore.getCurrentId();
-        if (this.state.channel_id != channel_id) {
+        if (this.state.channelId !== channelId) {
             var draft = PostStore.getCurrentDraft();
-            var previews = [];
+            this.setState({
-            var messageText = '';
+                channelId: channelId, messageText: draft['message'], initialText: draft['message'], submitting: false,
-            var uploadsInProgress = 0;
+                serverError: null, postError: null, previews: draft['previews'], uploadsInProgress: draft['uploadsInProgress']
-            if (draft) {
+            });
-                previews = draft['previews'];
-                messageText = draft['message'];
-                uploadsInProgress = draft['uploadsInProgress'];
-            }
-            this.setState({ channel_id: channel_id, messageText: messageText, initialText: messageText, submitting: false, limit_error: null, server_error: null, post_error: null, previews: previews, uploadsInProgress: uploadsInProgress });
         }
     },
     getInitialState: function() {
         PostStore.clearDraftUploads();
 
         var draft = PostStore.getCurrentDraft();
-        var previews = [];
+        return {
-        var messageText = '';
+            channelId: ChannelStore.getCurrentId(), messageText: draft['message'], uploadsInProgress: draft['uploadsInProgress'],
-        if (draft) {
+            previews: draft['previews'], submitting: false, initialText: draft['message']
-            previews = draft['previews'];
+        };
-            messageText = draft['message'];
-        }
-        return { channel_id: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: 0, previews: previews, submitting: false, initialText: messageText };
     },
-    setUploads: function(val) {
+    getFileCount: function(channelId) {
-        var oldInProgress = this.state.uploadsInProgress
+        if (channelId === this.state.channelId) {
-        var newInProgress = oldInProgress + val;
+            return this.state.previews.length + this.state.uploadsInProgress.length;
-
-        if (newInProgress + this.state.previews.length > Constants.MAX_UPLOAD_FILES) {
-            newInProgress = Constants.MAX_UPLOAD_FILES - this.state.previews.length;
-            this.setState({limit_error: "Uploads limited to " + Constants.MAX_UPLOAD_FILES + " files maximum. Please use additional posts for more files."});
         } else {
-            this.setState({limit_error: null});
+            var draft = PostStore.getDraft(channelId);
+
+            return draft['previews'].length + draft['uploadsInProgress'].length;
         }
-
-        var numToUpload = newInProgress - oldInProgress;
-        if (numToUpload <= 0) return 0;
-
-        var draft = PostStore.getCurrentDraft();
-        if (!draft) {
-            draft = {}
-            draft['message'] = '';
-            draft['previews'] = [];
-        }
-        draft['uploadsInProgress'] = newInProgress;
-        PostStore.storeCurrentDraft(draft);
-        this.setState({uploadsInProgress: newInProgress});
-
-        return numToUpload;
     },
     render: function() {
+        var serverError = null;
+        if (this.state.serverError) {
+            serverError = (
+                <div className='has-error'>
+                    <label className='control-label'>{this.state.serverError}</label>
+                </div>
+            );
+        }
 
-        var server_error = this.state.server_error ? <div className='has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
+        var postError = null;
-        var post_error = this.state.post_error ? <label className='control-label'>{this.state.post_error}</label> : null;
+        if (this.state.postError) {
-        var limit_error = this.state.limit_error ? <div className='has-error'><label className='control-label'>{this.state.limit_error}</label></div> : null;
+            postError = <label className='control-label'>{this.state.postError}</label>;
+        }
 
-        var preview = <div/>;
+        var preview = null;
-        if (this.state.previews.length > 0 || this.state.uploadsInProgress > 0) {
+        if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) {
             preview = (
                 <FilePreview
                     files={this.state.previews}
@@ -250,29 +240,35 @@ module.exports = React.createClass({
             );
         }
 
+        var postFooterClassName = 'post-create-footer';
+        if (postError) {
+            postFooterClassName += ' has-error';
+        }
+
         return (
-            <form id="create_post" ref="topDiv" role="form" onSubmit={this.handleSubmit}>
+            <form id='create_post' ref='topDiv' role='form' onSubmit={this.handleSubmit}>
-                <div className="post-create">
+                <div className='post-create'>
-                    <div className="post-create-body">
+                    <div className='post-create-body'>
                         <Textbox
                             onUserInput={this.handleUserInput}
                             onKeyPress={this.postMsgKeyPress}
                             messageText={this.state.messageText}
-                            createMessage="Write a message..."
+                            createMessage='Write a message...'
-                            channelId={this.state.channel_id}
+                            channelId={this.state.channelId}
-                            id="post_textbox"
+                            id='post_textbox'
-                            ref="textbox" />
+                            ref='textbox' />
                         <FileUpload
-                            setUploads={this.setUploads}
+                            ref='fileUpload'
-                            onFileUpload={this.handleFileUpload}
+                            getFileCount={this.getFileCount}
+                            onUploadStart={this.handleUploadStart}
+                            onFileUpload={this.handleFileUploadComplete}
                             onUploadError={this.handleUploadError} />
                     </div>
-                    <div className={post_error ? 'post-create-footer has-error' : 'post-create-footer'}>
+                    <div className={postFooterClassName}>
-                        { post_error }
+                        {postError}
-                        { server_error }
+                        {serverError}
-                        { limit_error }
+                        {preview}
-                        { preview }
+                        <MsgTyping channelId={this.state.channelId} parentId=''/>
-                        <MsgTyping channelId={this.state.channel_id} parentId=""/>
                     </div>
                 </div>
             </form>

web/react/components/file_preview.jsx

@@ -10,7 +10,12 @@ var Constants = require('../utils/constants.jsx');
 module.exports = React.createClass({
     handleRemove: function(e) {
         var previewDiv = e.target.parentNode.parentNode;
-        this.props.onRemove(previewDiv.getAttribute('data-filename'));
+
+        if (previewDiv.hasAttribute('data-filename')) {
+            this.props.onRemove(previewDiv.getAttribute('data-filename'));
+        } else if (previewDiv.hasAttribute('data-client-id')) {
+            this.props.onRemove(previewDiv.getAttribute('data-client-id'));
+        }
     },
     render: function() {
         var previews = [];
@@ -43,13 +48,14 @@ module.exports = React.createClass({
             }
         }.bind(this));
 
-        for (var i = 0; i < this.props.uploadsInProgress; i++) {
+        this.props.uploadsInProgress.forEach(function(clientId) {
             previews.push(
-                <div className="preview-div">
+                <div className="preview-div" data-client-id={clientId}>
                     <img className="spinner" src="/static/images/load.gif"/>
+                    <a className="remove-preview" onClick={this.handleRemove}><i className="glyphicon glyphicon-remove"/></a>
                 </div>
             );
-        }
+        }.bind(this));
 
         return (
             <div className="preview-container">

web/react/components/file_upload.jsx

@@ -4,12 +4,18 @@
 var client = require('../utils/client.jsx');
 var Constants = require('../utils/constants.jsx');
 var ChannelStore = require('../stores/channel_store.jsx');
+var utils = require('../utils/utils.jsx');
 
 module.exports = React.createClass({
+    getInitialState: function() {
+        return {requests: {}};
+    },
     handleChange: function() {
         var element = $(this.refs.fileInput.getDOMNode());
         var files = element.prop('files');
 
+        var channelId = ChannelStore.getCurrentId();
+
         this.props.onUploadError(null);
 
         // This looks redundant, but must be done this way due to
@@ -21,50 +27,67 @@ module.exports = React.createClass({
             }
         }
 
-        var numToUpload = this.props.setUploads(numFiles);
+        var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - this.props.getFileCount(channelId), numFiles);
+
+        if (numFiles > numToUpload) {
+            this.props.onUploadError('Uploads limited to ' + Constants.MAX_UPLOAD_FILES + ' files maximum. Please use additional posts for more files.');
+        }
 
         for (var i = 0; i < files.length && i < numToUpload; i++) {
             if (files[i].size > Constants.MAX_FILE_SIZE) {
-                this.props.onUploadError("Files must be no more than " + Constants.MAX_FILE_SIZE/1000000 + " MB");
+                this.props.onUploadError('Files must be no more than ' + Constants.MAX_FILE_SIZE / 1000000 + ' MB');
                 continue;
             }
 
-            var channel_id = ChannelStore.getCurrentId();
+            // generate a unique id that can be used by other components to refer back to this file upload
+            var clientId = utils.generateId();
 
             // Prepare data to be uploaded.
-            formData = new FormData();
+            var formData = new FormData();
-            formData.append('channel_id', channel_id);
+            formData.append('channel_id', channelId);
             formData.append('files', files[i], files[i].name);
+            formData.append('client_ids', clientId);
 
-            client.uploadFile(formData,
+            var request = client.uploadFile(formData,
                 function(data) {
-                    parsedData = $.parseJSON(data);
+                    var parsedData = $.parseJSON(data);
-                    this.props.onFileUpload(parsedData['filenames'], channel_id);
+                    this.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channelId);
+
+                    var requests = this.state.requests;
+                    for (var i = 0; i < parsedData['client_ids'].length; i++) {
+                        delete requests[parsedData['client_ids'][i]];
+                    }
+                    this.setState({requests: requests});
                 }.bind(this),
                 function(err) {
-                    this.props.setUploads(-1);
+                    this.props.onUploadError(err, clientId);
-                    this.props.onUploadError(err);
                 }.bind(this)
             );
+
+            var requests = this.state.requests;
+            requests[clientId] = request;
+            this.setState({requests: requests});
+
+            this.props.onUploadStart([clientId], channelId);
         }
 
         // clear file input for all modern browsers
-        try{
+        try {
             element[0].value = '';
-            if(element.value){
+            if (element.value) {
-                element[0].type = "text";
+                element[0].type = 'text';
-                element[0].type = "file";
+                element[0].type = 'file';
             }
-        }catch(e){}
+        } catch(e) {}
     },
     componentDidMount: function() {
         var inputDiv = this.refs.input.getDOMNode();
         var self = this;
 
-        document.addEventListener("paste", function(e) {
+        document.addEventListener('paste', function(e) {
             var textarea = $(inputDiv.parentNode.parentNode).find('.custom-textarea')[0];
 
-            if (textarea != e.target && !$.contains(textarea,e.target)) {
+            if (textarea !== e.target && !$.contains(textarea, e.target)) {
                 return;
             }
 
@@ -76,54 +99,110 @@ module.exports = React.createClass({
             var numItems = 0;
             if (items) {
                 for (var i = 0; i < items.length; i++) {
-                    if (items[i].type.indexOf("image") !== -1) {
+                    if (items[i].type.indexOf('image') !== -1) {
+                        var ext = items[i].type.split('/')[1].toLowerCase();
+                        if (ext === 'jpeg') {
+                            ext = 'jpg';
+                        }
 
-                        ext = items[i].type.split("/")[1].toLowerCase();
+                        if (Constants.IMAGE_TYPES.indexOf(ext) < 0) {
-                        ext = ext == 'jpeg' ? 'jpg' : ext;
+                            continue;
+                        }
 
-                        if (Constants.IMAGE_TYPES.indexOf(ext) < 0) return;
+                        numItems++;
-
-                        numItems++
                     }
                 }
 
-                var numToUpload = self.props.setUploads(numItems);
+                var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - self.props.getFileCount(channelId), numItems);
+
+                if (numItems > numToUpload) {
+                    self.props.onUploadError('Uploads limited to ' + Constants.MAX_UPLOAD_FILES + ' files maximum. Please use additional posts for more files.');
+                }
 
                 for (var i = 0; i < items.length && i < numToUpload; i++) {
-                    if (items[i].type.indexOf("image") !== -1) {
+                    if (items[i].type.indexOf('image') !== -1) {
                         var file = items[i].getAsFile();
 
-                        ext = items[i].type.split("/")[1].toLowerCase();
+                        var ext = items[i].type.split('/')[1].toLowerCase();
-                        ext = ext == 'jpeg' ? 'jpg' : ext;
+                        if (ext === 'jpeg') {
+                            ext = 'jpg';
+                        }
 
-                        if (Constants.IMAGE_TYPES.indexOf(ext) < 0) return;
+                        if (Constants.IMAGE_TYPES.indexOf(ext) < 0) {
+                            continue;
+                        }
 
-                        var channel_id = ChannelStore.getCurrentId();
+                        var channelId = ChannelStore.getCurrentId();
+
+                        // generate a unique id that can be used by other components to refer back to this file upload
+                        var clientId = utils.generateId();
+
+                        var formData = new FormData();
+                        formData.append('channel_id', channelId);
 
-                        formData = new FormData();
-                        formData.append('channel_id', channel_id);
                         var d = new Date();
-                        var hour = d.getHours() < 10 ? "0" + d.getHours() : String(d.getHours());
+                        var hour;
-                        var min = d.getMinutes() < 10 ? "0" + d.getMinutes() : String(d.getMinutes());
+                        if (d.getHours() < 10) {
-                        formData.append('files', file, "Image Pasted at "+d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+" "+hour+"-"+min+"." + ext);
+                            hour = '0' + d.getHours();
+                        } else {
+                            hour = String(d.getHours());
+                        }
+                        var min;
+                        if (d.getMinutes() < 10) {
+                            min = '0' + d.getMinutes();
+                        } else {
+                            min = String(d.getMinutes());
+                        }
 
-                        client.uploadFile(formData,
+                        var name = 'Image Pasted at ' + d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate() + ' ' + hour + '-' + min + '.' + ext;
+                        formData.append('files', file, name);
+                        formData.append('client_ids', clientId);
+
+                        var request = client.uploadFile(formData,
                             function(data) {
-                                parsedData = $.parseJSON(data);
+                                var parsedData = $.parseJSON(data);
-                                self.props.onFileUpload(parsedData['filenames'], channel_id);
+                                self.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channelId);
-                            }.bind(this),
+
+                                var requests = self.state.requests;
+                                for (var i = 0; i < parsedData['client_ids'].length; i++) {
+                                    delete requests[parsedData['client_ids'][i]];
+                                }
+                                self.setState({requests: requests});
+                            },
                             function(err) {
-                                self.props.onUploadError(err);
+                                self.props.onUploadError(err, clientId);
-                            }.bind(this)
+                            }
                         );
+
+                        var requests = self.state.requests;
+                        requests[clientId] = request;
+                        self.setState({requests: requests});
+
+                        self.props.onUploadStart([clientId], channelId);
                     }
                 }
             }
         });
     },
+    cancelUpload: function(clientId) {
+        var requests = this.state.requests;
+        var request = requests[clientId];
+
+        if (request) {
+            request.abort();
+
+            delete requests[clientId];
+            this.setState({requests: requests});
+        }
+    },
     render: function() {
         return (
-            <span ref="input" className="btn btn-file"><span><i className="glyphicon glyphicon-paperclip"></i></span><input ref="fileInput" type="file" onChange={this.handleChange} multiple/></span>
+            <span ref='input' className='btn btn-file'>
+                <span>
+                    <i className='glyphicon glyphicon-paperclip' />
+                </span>
+                <input ref='fileInput' type='file' onChange={this.handleChange} multiple/>
+            </span>
         );
     }
 });

web/react/stores/post_store.jsx

@@ -132,30 +132,33 @@ var PostStore = assign({}, EventEmitter.prototype, {
     getSearchTerm: function getSearchTerm() {
         return BrowserStore.getItem('search_term');
     },
+    getEmptyDraft: function getEmptyDraft(draft) {
+        return {message: '', uploadsInProgress: [], previews: []};
+    },
     storeCurrentDraft: function storeCurrentDraft(draft) {
         var channelId = ChannelStore.getCurrentId();
         BrowserStore.setItem('draft_' + channelId, draft);
     },
     getCurrentDraft: function getCurrentDraft() {
         var channelId = ChannelStore.getCurrentId();
-        return BrowserStore.getItem('draft_' + channelId);
+        return PostStore.getDraft(channelId);
     },
     storeDraft: function storeDraft(channelId, draft) {
         BrowserStore.setItem('draft_' + channelId, draft);
     },
     getDraft: function getDraft(channelId) {
-        return BrowserStore.getItem('draft_' + channelId);
+        return BrowserStore.getItem('draft_' + channelId, PostStore.getEmptyDraft());
     },
     storeCommentDraft: function storeCommentDraft(parentPostId, draft) {
         BrowserStore.setItem('comment_draft_' + parentPostId, draft);
     },
     getCommentDraft: function getCommentDraft(parentPostId) {
-        return BrowserStore.getItem('comment_draft_' + parentPostId);
+        return BrowserStore.getItem('comment_draft_' + parentPostId, PostStore.getEmptyDraft());
     },
     clearDraftUploads: function clearDraftUploads() {
         BrowserStore.actionOnItemsWithPrefix('draft_', function clearUploads(key, value) {
             if (value) {
-                value.uploadsInProgress = 0;
+                value.uploadsInProgress = [];
                 BrowserStore.setItem(key, value);
             }
         });
@@ -163,7 +166,7 @@ var PostStore = assign({}, EventEmitter.prototype, {
     clearCommentDraftUploads: function clearCommentDraftUploads() {
         BrowserStore.actionOnItemsWithPrefix('comment_draft_', function clearUploads(key, value) {
             if (value) {
-                value.uploadsInProgress = 0;
+                value.uploadsInProgress = [];
                 BrowserStore.setItem(key, value);
             }
         });

web/react/utils/client.jsx

@@ -754,7 +754,7 @@ module.exports.getProfiles = function(success, error) {
 };
 
 module.exports.uploadFile = function(formData, success, error) {
-    $.ajax({
+    var request = $.ajax({
         url: "/api/v1/files/upload",
         type: 'POST',
         data: formData,
@@ -763,12 +763,16 @@ module.exports.uploadFile = function(formData, success, error) {
         processData: false,
         success: success,
         error: function(xhr, status, err) {
-            e = handleError("uploadFile", xhr, status, err);
+            if (err !== 'abort') {
-            error(e);
+                e = handleError("uploadFile", xhr, status, err);
+                error(e);
+            }
         }
     });
 
     module.exports.track('api', 'api_files_upload');
+
+    return request;
 };
 
 module.exports.getPublicLink = function(data, success, error) {

web/react/utils/utils.jsx

@@ -913,3 +913,24 @@ module.exports.getFileName = function(path) {
     var split = path.split('/');
     return split[split.length - 1];
 };
+
+// Generates a RFC-4122 version 4 compliant globally unique identifier.
+module.exports.generateId = function() {
+    // implementation taken from http://stackoverflow.com/a/2117523
+    var id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
+
+    id = id.replace(/[xy]/g, function(c) {
+        var r = Math.floor(Math.random() * 16);
+
+        var v;
+        if (c === 'x') {
+            v = r;
+        } else {
+            v = r & 0x3 | 0x8;
+        }
+
+        return v.toString(16);
+    });
+
+    return id;
+};