From 20d755f3dd5c797413177752884d8589c1f46931 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Fri, 7 Aug 2015 16:24:13 -0400 Subject: Changed post drafts to maintain a list of the names of uploading files instead of just a count --- web/react/components/create_comment.jsx | 97 ++++++++++++++++-------------- web/react/components/create_post.jsx | 103 +++++++++++++++++--------------- web/react/components/file_preview.jsx | 4 +- web/react/components/file_upload.jsx | 28 ++++++--- web/react/stores/post_store.jsx | 4 +- 5 files changed, 131 insertions(+), 105 deletions(-) (limited to 'web/react') diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 88c01c586..fa7162397 100644 --- 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['uploadsInProgress'] = draft['uploadsInProgress'].concat(filenames); + PostStore.storeCommentDraft(this.props.rootId, draft); - draft.previews = previews; - draft.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({previews: previews, uploadsInProgress: num-1}); + 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 ?
: null; var post_error = this.state.post_error ? : null; - var limit_error = this.state.limit_error ?
: null; var preview =
; - if (this.state.previews.length > 0 || this.state.uploadsInProgress > 0) { + if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) { preview = (
@@ -227,7 +235,6 @@ module.exports = React.createClass({ { post_error } { server_error } - { limit_error } { preview } diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 76286eb88..09d7acd9c 100644 --- 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({uploadsInProgress: draft['uploadsInProgress']}); + }, + handleFileUploadComplete: function(filenames, channel_id) { + var draft = PostStore.getDraft(channel_id); + if (!draft) { + draft = {}; + draft['message'] = ''; + draft['uploadsInProgress'] = []; + draft['previews'] = []; + } - 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); + // 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 numToUpload = newInProgress - oldInProgress; - if (numToUpload <= 0) return 0; + var draft = PostStore.getDraft(channel_id); - var draft = PostStore.getCurrentDraft(); - if (!draft) { - draft = {} - draft['message'] = ''; - draft['previews'] = []; + if (draft) { + return draft['previews'].length + draft['uploadsInProgress'].length; + } else { + return 0; + } } - draft['uploadsInProgress'] = newInProgress; - PostStore.storeCurrentDraft(draft); - this.setState({uploadsInProgress: newInProgress}); - - return numToUpload; }, render: function() { - var server_error = this.state.server_error ?
: null; var post_error = this.state.post_error ? : null; - var limit_error = this.state.limit_error ?
: null; var preview =
; - if (this.state.previews.length > 0 || this.state.uploadsInProgress > 0) { + if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) { preview = (
{ post_error } { server_error } - { limit_error } { preview }
diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx index 7c1db3e10..2b4e459f1 100644 --- 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(
); - } + }.bind(this)); return (
diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index aee089dbc..c02afc5e9 100644 --- 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); } } } diff --git a/web/react/stores/post_store.jsx b/web/react/stores/post_store.jsx index ea1e75ecb..044e7b300 100644 --- 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); } }); -- cgit v1.2.3-1-g7c22