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

2015-08-07 16:24:13 -04:00
--- a/web/react/components/create_comment.jsx
+++ b/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);
-        $(".post-right__scroll").perfectScrollbar('update');
-        var previews = this.state.previews.concat(newPreviews);
-        var num = this.state.uploadsInProgress;
-
-        draft.previews = previews;
-        draft.uploadsInProgress = num-1;
+        draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(filenames);
        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) {
-        var oldInProgress = this.state.uploadsInProgress
-        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;
+    getFileCount: function(channel_id) {
+        return this.state.previews.length + this.state.uploadsInProgress.length;
    },
    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}
-                            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}  />
@@ -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 }
--- a/web/react/components/create_post.jsx
+++ b/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) {
-            var num = this.state.uploadsInProgress;
-            var oldPreviews = this.state.previews;
-            var previews = oldPreviews.concat(newPreviews);
+        draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(filenames);
+        PostStore.storeDraft(channel_id, draft);

-            draft['previews'] = previews;
-            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);
+        this.setState({uploadsInProgress: draft['uploadsInProgress']});
+    },
+    handleFileUploadComplete: function(filenames, channel_id) {
+        var draft = PostStore.getDraft(channel_id);
+        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.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) {
-        var oldInProgress = this.state.uploadsInProgress
-        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 posts for more files."});
+    getFileCount: function(channel_id) {
+        if (channel_id === this.state.channel_id) {
+            return this.state.previews.length + this.state.uploadsInProgress.length;
        } 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}
-                            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'}>
                        { post_error }
                        { server_error }
-                        { limit_error }
                        { preview }
                        <MsgTyping channelId={this.state.channel_id} parentId=""/>
                    </div>
--- a/web/react/components/file_preview.jsx
+++ b/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">
--- a/web/react/components/file_upload.jsx
+++ b/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);
                    }
                }
            }
--- a/web/react/stores/post_store.jsx
+++ b/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);
            }
        });