Changed post drafts to maintain a list of the names of uploading files instead of just a count

web/react/components/create_comment.jsx

@@ -18,7 +18,7 @@ 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;
 
@@ -86,7 +86,7 @@ module.exports = React.createClass({
     handleUserInput: function(messageText) {
         var draft = PostStore.getCommentDraft(this.props.rootId);
         if (!draft) {
-            draft = { previews: [], uploadsInProgress: 0};
+            draft = { previews: [], uploadsInProgress: []};
         }
         draft.message = messageText;
         PostStore.storeCommentDraft(this.props.rootId, draft);
@@ -95,22 +95,52 @@ module.exports = React.createClass({
         $(".post-right__scroll").perfectScrollbar('update');
         this.setState({messageText: messageText});
     },
-    handleFileUpload: function(newPreviews) {
+    handleUploadStart: function(filenames, channel_id) {
         var draft = PostStore.getCommentDraft(this.props.rootId);
         if (!draft) {
-            draft = { message: '', uploadsInProgress: 0, previews: []}
+            draft = {};
+            draft['message'] = '';
+            draft['uploadsInProgress'] = [];
+            draft['previews'] = [];
         }
 
-        $(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight);
+        draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(filenames);
-        $(".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']});
+    },
+    handleFileUploadComplete: function(filenames, channel_id) {
+        var draft = PostStore.getCommentDraft(this.props.rootId);
+        if (!draft) {
+            draft = {};
+            draft['message'] = '';
+            draft['uploadsInProgress'] = [];
+            draft['previews'] = [];
+        }
+
+        // remove each finished file from uploads
+        for (var i = 0; i < filenames.length; i++) {
+            var filename = filenames[i];
+
+            // filenames returned by the server include a path while stored uploads only have the actual file name
+            var index = -1;
+            for (var j = 0; j < draft['uploadsInProgress'].length; j++) {
+                var upload = draft['uploadsInProgress'][j];
+                if (upload.indexOf(filename, upload.length - filename.length)) {
+                    index = j;
+                    break;
+                }
+            }
+
+            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) {
         this.setState({ server_error: err });
@@ -127,12 +157,12 @@ module.exports = React.createClass({
             }
         }
 
-        var draft = PostStore.getCommentDraft();
+        var draft = PostStore.getCommentDraft(this.props.rootId);
         if (!draft) {
-            draft = { message: '', uploadsInProgress: 0};
+            draft = { message: '', uploadsInProgress: []};
         }
         draft.previews = previews;
-        PostStore.storeCommentDraft(draft);
+        PostStore.storeCommentDraft(this.props.rootId, draft);
 
         this.setState({previews: previews});
     },
@@ -141,7 +171,7 @@ module.exports = React.createClass({
 
         var draft = PostStore.getCommentDraft(this.props.rootId);
         messageText = '';
-        uploadsInProgress = 0;
+        uploadsInProgress = [];
         previews = [];
         if (draft) {
             messageText = draft.message;
@@ -154,7 +184,7 @@ module.exports = React.createClass({
         if(newProps.rootId !== this.props.rootId) {
             var draft = PostStore.getCommentDraft(newProps.rootId);
             messageText = '';
-            uploadsInProgress = 0;
+            uploadsInProgress = [];
             previews = [];
             if (draft) {
                 messageText = draft.message;
@@ -164,39 +194,16 @@ module.exports = React.createClass({
             this.setState({ messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews });
         }
     },
-    setUploads: function(val) {
+    getFileCount: function(channel_id) {
-        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 server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
         var post_error = this.state.post_error ? <label className='control-label'>{this.state.post_error}</label> : null;
-        var limit_error = this.state.limit_error ? <div className='has-error'><label className='control-label'>{this.state.limit_error}</label></div> : null;
 
         var preview = <div/>;
-        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}
@@ -218,8 +225,9 @@ module.exports = React.createClass({
                             id="reply_textbox"
                             ref="textbox" />
                         <FileUpload
-                            setUploads={this.setUploads}
+                            getFileCount={this.getFileCount}
-                            onFileUpload={this.handleFileUpload}
+                            onUploadStart={this.handleUploadStart}
+                            onFileUpload={this.handleFileUploadComplete}
                             onUploadError={this.handleUploadError} />
                     </div>
                     <MsgTyping channelId={this.props.channelId} parentId={this.props.rootId}  />
@@ -227,7 +235,6 @@ module.exports = React.createClass({
                         <input type="button" className="btn btn-primary comment-btn pull-right" value="Add Comment" onClick={this.handleSubmit} />
                         { post_error }
                         { server_error }
-                        { limit_error }
                     </div>
                 </div>
                 { preview }

web/react/components/create_post.jsx

@@ -22,7 +22,7 @@ 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;
 
@@ -118,7 +118,7 @@ module.exports = React.createClass({
         if (!draft) {
             draft = {}
             draft['previews'] = [];
-            draft['uploadsInProgress'] = 0;
+            draft['uploadsInProgress'] = [];
         }
         draft['message'] = messageText;
         PostStore.storeCurrentDraft(draft);
@@ -128,30 +128,52 @@ module.exports = React.createClass({
         $(".post-list-holder-by-time").css("height", height + "px");
         $(window).trigger('resize');
     },
-    handleFileUpload: function(newPreviews, channel_id) {
+    handleUploadStart: function(filenames, channel_id) {
         var draft = PostStore.getDraft(channel_id);
         if (!draft) {
-            draft = {}
+            draft = {};
             draft['message'] = '';
-            draft['uploadsInProgress'] = 0;
+            draft['uploadsInProgress'] = [];
             draft['previews'] = [];
         }
 
-        if (channel_id === this.state.channel_id) {
+        draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(filenames);
-            var num = this.state.uploadsInProgress;
+        PostStore.storeDraft(channel_id, 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);
+    handleFileUploadComplete: function(filenames, channel_id) {
-
+        var draft = PostStore.getDraft(channel_id);
-            this.setState({previews: previews, uploadsInProgress:num-1});
+        if (!draft) {
-        } else {
+            draft = {};
-            draft['previews'] = draft['previews'].concat(newPreviews);
+            draft['message'] = '';
-            draft['uploadsInProgress'] = draft['uploadsInProgress'] > 0 ? draft['uploadsInProgress'] - 1 : 0;
+            draft['uploadsInProgress'] = [];
-            PostStore.storeDraft(channel_id, draft);
+            draft['previews'] = [];
         }
+
+        // remove each finished file from uploads
+        for (var i = 0; i < filenames.length; i++) {
+            var filename = filenames[i];
+
+            // filenames returned by the server include a path while stored uploads only have the actual file name
+            var index = -1;
+            for (var j = 0; j < draft['uploadsInProgress'].length; j++) {
+                var upload = draft['uploadsInProgress'][j];
+                if (upload.indexOf(filename, upload.length - filename.length)) {
+                    index = j;
+                    break;
+                }
+            }
+
+            if (index != -1) {
+                draft['uploadsInProgress'].splice(index, 1);
+            }
+        }
+
+        draft['previews'] = draft['previews'].concat(filenames);
+        PostStore.storeDraft(channel_id, draft);
+
+        this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']});
     },
     handleUploadError: function(err) {
         this.setState({ server_error: err });
@@ -168,7 +190,7 @@ module.exports = React.createClass({
         if (!draft) {
             draft = {}
             draft['message'] = '';
-            draft['uploadsInProgress'] = 0;
+            draft['uploadsInProgress'] = [];
         }
         draft['previews'] = previews;
         PostStore.storeCurrentDraft(draft);
@@ -187,7 +209,7 @@ module.exports = React.createClass({
             var draft = PostStore.getCurrentDraft();
             var previews = [];
             var messageText = '';
-            var uploadsInProgress = 0;
+            var uploadsInProgress = [];
             if (draft) {
                 previews = draft['previews'];
                 messageText = draft['message'];
@@ -206,42 +228,27 @@ module.exports = React.createClass({
             previews = draft['previews'];
             messageText = draft['message'];
         }
-        return { channel_id: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: 0, previews: previews, submitting: false, initialText: messageText };
+        return { channel_id: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: [], previews: previews, submitting: false, initialText: messageText };
     },
-    setUploads: function(val) {
+    getFileCount: function(channel_id) {
-        var oldInProgress = this.state.uploadsInProgress
+        if (channel_id === this.state.channel_id) {
-        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(channel_id);
+
+            if (draft) {
+                return draft['previews'].length + draft['uploadsInProgress'].length;
+            } else {
+                return 0;
+            }
         }
-
-        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 server_error = this.state.server_error ? <div className='has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
         var post_error = this.state.post_error ? <label className='control-label'>{this.state.post_error}</label> : null;
-        var limit_error = this.state.limit_error ? <div className='has-error'><label className='control-label'>{this.state.limit_error}</label></div> : null;
 
         var preview = <div/>;
-        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}
@@ -263,14 +270,14 @@ module.exports = React.createClass({
                             id="post_textbox"
                             ref="textbox" />
                         <FileUpload
-                            setUploads={this.setUploads}
+                            getFileCount={this.getFileCount}
-                            onFileUpload={this.handleFileUpload}
+                            onUploadStart={this.handleUploadStart}
+                            onFileUpload={this.handleFileUploadComplete}
                             onUploadError={this.handleUploadError} />
                     </div>
                     <div className={post_error ? 'post-create-footer has-error' : 'post-create-footer'}>
                         { post_error }
                         { server_error }
-                        { limit_error }
                         { preview }
                         <MsgTyping channelId={this.state.channel_id} parentId=""/>
                     </div>

web/react/components/file_preview.jsx

@@ -43,13 +43,13 @@ module.exports = React.createClass({
             }
         }.bind(this));
 
-        for (var i = 0; i < this.props.uploadsInProgress; i++) {
+        this.props.uploadsInProgress.forEach(function(filename) {
             previews.push(
                 <div className="preview-div">
                     <img className="spinner" src="/static/images/load.gif"/>
                 </div>
             );
-        }
+        }.bind(this));
 
         return (
             <div className="preview-container">

web/react/components/file_upload.jsx

@@ -10,6 +10,8 @@ module.exports = React.createClass({
         var element = $(this.refs.fileInput.getDOMNode());
         var files = element.prop('files');
 
+        var channel_id = ChannelStore.getCurrentId();
+
         this.props.onUploadError(null);
 
         // This looks redundant, but must be done this way due to
@@ -21,7 +23,11 @@ module.exports = React.createClass({
             }
         }
 
-        var numToUpload = this.props.setUploads(numFiles);
+        var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - this.props.getFileCount(channel_id), 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) {
@@ -29,8 +35,6 @@ module.exports = React.createClass({
                 continue;
             }
 
-            var channel_id = ChannelStore.getCurrentId();
-
             // Prepare data to be uploaded.
             formData = new FormData();
             formData.append('channel_id', channel_id);
@@ -42,10 +46,11 @@ module.exports = React.createClass({
                     this.props.onFileUpload(parsedData['filenames'], channel_id);
                 }.bind(this),
                 function(err) {
-                    this.props.setUploads(-1);
                     this.props.onUploadError(err);
                 }.bind(this)
             );
+
+            this.props.onUploadStart([files[i].name], channel_id);
         }
 
         // clear file input for all modern browsers
@@ -87,7 +92,11 @@ module.exports = React.createClass({
                     }
                 }
 
-                var numToUpload = self.props.setUploads(numItems);
+                var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - self.props.getFileCount(channel_id), 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) {
@@ -105,17 +114,20 @@ module.exports = React.createClass({
                         var d = new Date();
                         var hour = d.getHours() < 10 ? "0" + d.getHours() : String(d.getHours());
                         var min = d.getMinutes() < 10 ? "0" + d.getMinutes() : String(d.getMinutes());
-                        formData.append('files', file, "Image Pasted at "+d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+" "+hour+"-"+min+"." + ext);
+                        var name = "Image Pasted at "+d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+" "+hour+"-"+min+"." + ext;
+                        formData.append('files', file, name);
 
                         client.uploadFile(formData,
                             function(data) {
                                 parsedData = $.parseJSON(data);
                                 self.props.onFileUpload(parsedData['filenames'], channel_id);
-                            }.bind(this),
+                            },
                             function(err) {
                                 self.props.onUploadError(err);
-                            }.bind(this)
+                            }
                         );
+
+                        self.props.onUploadStart([name], channel_id);
                     }
                 }
             }

web/react/stores/post_store.jsx

@@ -155,7 +155,7 @@ var PostStore = assign({}, EventEmitter.prototype, {
     clearDraftUploads: function clearDraftUploads() {
         BrowserStore.actionOnItemsWithPrefix('draft_', function clearUploads(key, value) {
             if (value) {
-                value.uploadsInProgress = 0;
+                value.uploadsInProgress = [];
                 BrowserStore.setItem(key, value);
             }
         });
@@ -163,7 +163,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);
             }
         });