From 9bbeef208fe9769618d2de3b69f0eb417eb007f8 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 6 Aug 2015 20:07:14 -0700 Subject: Added handlers for dragging and dropping files onto the center pane or RHS --- web/react/components/file_upload.jsx | 38 ++++++++++++++++++++++++++++++++++++ web/react/components/post_list.jsx | 6 ++++++ 2 files changed, 44 insertions(+) (limited to 'web/react') diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index b90fa4fd3..aaf45c1ef 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -84,7 +84,45 @@ module.exports = React.createClass({ var inputDiv = this.refs.input.getDOMNode(); var self = this; +<<<<<<< HEAD document.addEventListener('paste', function(e) { +======= + $('body').on('dragover', '.app__content', function(e) { + e.preventDefault(); + e.stopPropagation(); + //e.target.style + console.log("HERE!: drag center"); + }); + $('body').on('dragover', '.sidebar--right', function(e) { + e.preventDefault(); + e.stopPropagation(); + //e.target.style + console.log("HERE!: drag right"); + }); + $('body').on('dragenter', '.app__content', function(e) { + e.preventDefault(); + e.stopPropagation(); + //e.target.style + console.log("HERE!: dragenter center"); + }); + $('body').on('dragenter', '.sidebar--right', function(e) { + e.preventDefault(); + e.stopPropagation(); + //e.target.style + console.log("HERE!: dragenter right"); + }); + $('body').on('drop', '.app__content', function(e) { + if (e.originalEvent.dataTransfer) + e.preventDefault(); + console.log("HERE!: drop center"); + }); + $('body').on('drop', '.sidebar--right', function(e) { + e.preventDefault(); + console.log("HERE!: drop right"); + }); + + document.addEventListener("paste", function(e) { +>>>>>>> Added handlers for dragging and dropping files onto the center pane or RHS var textarea = $(inputDiv.parentNode.parentNode).find('.custom-textarea')[0]; if (textarea !== e.target && !$.contains(textarea, e.target)) { diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 83f806b79..5724dbd62 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -125,6 +125,12 @@ module.exports = React.createClass({ } }); + //$('body').on('drop drag') + /*window.document.addEventListener("drop", function(e) { + e.preventDefault(); + var centerPostList = $(inputDiv.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode).find('.post-list')[0]; + console.log("HERE!: " + centerPostList); + });*/ }, componentDidUpdate: function() { this.resize(); -- cgit v1.2.3-1-g7c22 From 1fa436b4f99d482bc2adb926b93d0c0b832d9288 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Fri, 7 Aug 2015 14:24:09 -0700 Subject: Users can now drop files into the center pane or the rhs respectively to upload images and other files --- web/react/components/create_comment.jsx | 4 +- web/react/components/create_post.jsx | 4 +- web/react/components/file_upload.jsx | 104 ++++++++++++++++++++------------ web/react/components/post_list.jsx | 7 --- 4 files changed, 72 insertions(+), 47 deletions(-) (limited to 'web/react') diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 78e06c532..c954229ae 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -222,7 +222,9 @@ module.exports = React.createClass({ getFileCount={this.getFileCount} onUploadStart={this.handleUploadStart} onFileUpload={this.handleFileUploadComplete} - onUploadError={this.handleUploadError} /> + onUploadError={this.handleUploadError} + postType='comment' + channelId={this.props.channelId} />
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 9ca1d5388..137420440 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -262,7 +262,9 @@ module.exports = React.createClass({ getFileCount={this.getFileCount} onUploadStart={this.handleUploadStart} onFileUpload={this.handleFileUploadComplete} - onUploadError={this.handleUploadError} /> + onUploadError={this.handleUploadError} + postType='post' + channelId='' />
{postError} diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index aaf45c1ef..eb461ae9c 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -80,49 +80,77 @@ module.exports = React.createClass({ } } catch(e) {} }, + handleDrop: function(e) { + this.props.onUploadError(null); + + var files = e.originalEvent.dataTransfer.files; + if (files.length) { + var numFiles = files.length; + var numToUpload = this.props.setUploads(numFiles); + + for (var i = 0; i < numFiles && i < numToUpload; i++) { + var file = files[i]; + var channelId = this.props.channelId || ChannelStore.getCurrentId(); + + var formData = new FormData(); + formData.append('channel_id', channelId); + formData.append('files', file, file.name); + + client.uploadFile(formData, + function(data) { + var parsedData = $.parseJSON(data); + this.props.onFileUpload(parsedData.filenames, channelId); + }.bind(this), + function(err) { + this.props.onUploadError(err); + }.bind(this) + ); + } + } + }, componentDidMount: function() { var inputDiv = this.refs.input.getDOMNode(); var self = this; -<<<<<<< HEAD - document.addEventListener('paste', function(e) { -======= - $('body').on('dragover', '.app__content', function(e) { - e.preventDefault(); - e.stopPropagation(); - //e.target.style - console.log("HERE!: drag center"); - }); - $('body').on('dragover', '.sidebar--right', function(e) { - e.preventDefault(); - e.stopPropagation(); - //e.target.style - console.log("HERE!: drag right"); - }); - $('body').on('dragenter', '.app__content', function(e) { - e.preventDefault(); - e.stopPropagation(); - //e.target.style - console.log("HERE!: dragenter center"); - }); - $('body').on('dragenter', '.sidebar--right', function(e) { - e.preventDefault(); - e.stopPropagation(); - //e.target.style - console.log("HERE!: dragenter right"); - }); - $('body').on('drop', '.app__content', function(e) { - if (e.originalEvent.dataTransfer) - e.preventDefault(); - console.log("HERE!: drop center"); - }); - $('body').on('drop', '.sidebar--right', function(e) { - e.preventDefault(); - console.log("HERE!: drop right"); - }); + if (this.props.postType === 'post') { + $('body').on('dragover', '.app__content', function(e) { + e.preventDefault(); + e.stopPropagation(); + }); + $('body').on('dragenter', '.app__content', function(e) { + e.preventDefault(); + e.stopPropagation(); + }); + $('body').on('dragend dragleave', '.app__content', function(e) { + e.preventDefault(); + e.stopPropagation(); + }); + $('body').on('drop', '.app__content', function(e) { + e.preventDefault(); + e.stopPropagation(); + self.handleDrop(e); + }); + } else if (this.props.postType === 'comment') { + $('body').on('dragover', '.sidebar--right', function(e) { + e.preventDefault(); + e.stopPropagation(); + }); + $('body').on('dragenter', '.sidebar--right', function(e) { + e.preventDefault(); + e.stopPropagation(); + }); + $('body').on('dragend dragleave', '.sidebar--right', function(e) { + e.preventDefault(); + e.stopPropagation(); + }); + $('body').on('drop', '.sidebar--right', function(e) { + e.preventDefault(); + e.stopPropagation(); + self.handleDrop(e); + }); + } - document.addEventListener("paste", function(e) { ->>>>>>> Added handlers for dragging and dropping files onto the center pane or RHS + document.addEventListener('paste', function(e) { var textarea = $(inputDiv.parentNode.parentNode).find('.custom-textarea')[0]; if (textarea !== e.target && !$.contains(textarea, e.target)) { diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 5724dbd62..4df78817a 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -124,13 +124,6 @@ module.exports = React.createClass({ $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--comment'); } }); - - //$('body').on('drop drag') - /*window.document.addEventListener("drop", function(e) { - e.preventDefault(); - var centerPostList = $(inputDiv.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode).find('.post-list')[0]; - console.log("HERE!: " + centerPostList); - });*/ }, componentDidUpdate: function() { this.resize(); -- cgit v1.2.3-1-g7c22 From 81d7599f75b11d619f8ee9440394de3f9f86f39f Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Sun, 9 Aug 2015 13:04:24 -0700 Subject: Working on adding overlays for file drag and drop --- web/react/components/file_upload.jsx | 18 +++++------------- web/react/components/post_list.jsx | 11 ++++++++++- web/react/components/post_right.jsx | 11 ++++++++++- 3 files changed, 25 insertions(+), 15 deletions(-) (limited to 'web/react') diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index eb461ae9c..a479883c9 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -113,39 +113,31 @@ module.exports = React.createClass({ var self = this; if (this.props.postType === 'post') { - $('body').on('dragover', '.app__content', function(e) { + $('body').on('dragover', '.post-list__table', function(e) { e.preventDefault(); - e.stopPropagation(); }); - $('body').on('dragenter', '.app__content', function(e) { + $('body').on('dragenter', '.post-list__table', function(e) { e.preventDefault(); - e.stopPropagation(); }); - $('body').on('dragend dragleave', '.app__content', function(e) { + $('body').on('dragleave', '.post-list__table', function(e) { e.preventDefault(); - e.stopPropagation(); }); - $('body').on('drop', '.app__content', function(e) { + $('body').on('drop', '.post-list__table', function(e) { e.preventDefault(); - e.stopPropagation(); self.handleDrop(e); }); } else if (this.props.postType === 'comment') { $('body').on('dragover', '.sidebar--right', function(e) { e.preventDefault(); - e.stopPropagation(); }); $('body').on('dragenter', '.sidebar--right', function(e) { e.preventDefault(); - e.stopPropagation(); }); - $('body').on('dragend dragleave', '.sidebar--right', function(e) { + $('body').on('dragleave', '.sidebar--right', function(e) { e.preventDefault(); - e.stopPropagation(); }); $('body').on('drop', '.sidebar--right', function(e) { e.preventDefault(); - e.stopPropagation(); self.handleDrop(e); }); } diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 4df78817a..cf0c4c663 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -280,6 +280,10 @@ module.exports = React.createClass({ } ); }, + handleDragEnter: function() { + console.log("HERE ENTER"); + this.setState({fileDrag: true}); + }, getInitialState: function() { return getStateFromStores(); }, @@ -461,9 +465,14 @@ module.exports = React.createClass({ postCtls.push(); } + var fileDragOverlay = ''; + if (this.state.fileDrag) { + fileDragOverlay = 'post-list-file-overlay'; + } + return (
-
+
{ more_messages } { postCtls } diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index ad8b54012..f7f5ed509 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -243,6 +243,10 @@ module.exports = React.createClass({ this.refs[id].forceUpdate(); } }, + handleDragEnter: function() { + console.log("HERE ENTER RIGHT"); + this.setState({fileDrag: true}); + }, getInitialState: function() { return getStateFromStores(); }, @@ -294,8 +298,13 @@ module.exports = React.createClass({ var currentId = UserStore.getCurrentId(); var searchForm = currentId == null ? null : ; + var fileDragOverlay = ''; + if (this.state.fileDrag) { + fileDragOverlay = 'post-right-file-overlay'; + } + return ( -
+
{searchForm}
-- cgit v1.2.3-1-g7c22 From 9baafdb372d92c96a4063f11531f4fb5d9e7059e Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 11 Aug 2015 09:48:25 -0700 Subject: Changed structure to keep code contained to file_upload.jsx --- web/react/components/file_upload.jsx | 26 ++++++++++++++------------ web/react/components/post_list.jsx | 6 +----- web/react/components/post_right.jsx | 6 +----- 3 files changed, 16 insertions(+), 22 deletions(-) (limited to 'web/react') diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index a479883c9..e082abcd2 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -113,31 +113,33 @@ module.exports = React.createClass({ var self = this; if (this.props.postType === 'post') { - $('body').on('dragover', '.post-list__table', function(e) { + $('body').on('dragover dragleave', '.app__content', function(e) { e.preventDefault(); }); - $('body').on('dragenter', '.post-list__table', function(e) { + $('body').on('dragenter', '.app__content', function(e) { e.preventDefault(); + console.log('HERE'); + $('.app__content').addClass('center-file-overlay'); + $('.post-right__container').removeClass('right-file-overlay'); }); - $('body').on('dragleave', '.post-list__table', function(e) { - e.preventDefault(); - }); - $('body').on('drop', '.post-list__table', function(e) { + $('body').on('drop', '.app__content', function(e) { e.preventDefault(); + $('.app__content').removeClass('center-file-overlay'); self.handleDrop(e); }); } else if (this.props.postType === 'comment') { - $('body').on('dragover', '.sidebar--right', function(e) { - e.preventDefault(); - }); - $('body').on('dragenter', '.sidebar--right', function(e) { + $('body').on('dragover dragleave', '.post-right__container', function(e) { e.preventDefault(); }); - $('body').on('dragleave', '.sidebar--right', function(e) { + $('body').on('dragenter', '.post-right__container', function(e) { e.preventDefault(); + console.log('HERE RIGHT'); + $('.post-right__container').addClass('right-file-overlay'); + $('.app__content').removeClass('center-file-overlay'); }); - $('body').on('drop', '.sidebar--right', function(e) { + $('body').on('drop', '.post-right__container', function(e) { e.preventDefault(); + $('.post-right__container').removeClass('right-file-overlay'); self.handleDrop(e); }); } diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index cf0c4c663..826d34a7d 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -280,10 +280,6 @@ module.exports = React.createClass({ } ); }, - handleDragEnter: function() { - console.log("HERE ENTER"); - this.setState({fileDrag: true}); - }, getInitialState: function() { return getStateFromStores(); }, @@ -472,7 +468,7 @@ module.exports = React.createClass({ return (
-
+
{ more_messages } { postCtls } diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index f7f5ed509..ad993aee1 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -243,10 +243,6 @@ module.exports = React.createClass({ this.refs[id].forceUpdate(); } }, - handleDragEnter: function() { - console.log("HERE ENTER RIGHT"); - this.setState({fileDrag: true}); - }, getInitialState: function() { return getStateFromStores(); }, @@ -304,7 +300,7 @@ module.exports = React.createClass({ } return ( -
+
{searchForm}
-- cgit v1.2.3-1-g7c22 From 9f9d93e6133ffd2523546e27e9099e2e6f436506 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 11 Aug 2015 11:42:31 -0700 Subject: Switched to using the jquery-dragster library to implement more consistent drag and drop support, rather than using the inconsistent html5 implementation --- web/react/components/file_upload.jsx | 48 +++++++++++++++++------------------- 1 file changed, 22 insertions(+), 26 deletions(-) (limited to 'web/react') diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index e082abcd2..f382b848a 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -113,34 +113,30 @@ module.exports = React.createClass({ var self = this; if (this.props.postType === 'post') { - $('body').on('dragover dragleave', '.app__content', function(e) { - e.preventDefault(); - }); - $('body').on('dragenter', '.app__content', function(e) { - e.preventDefault(); - console.log('HERE'); - $('.app__content').addClass('center-file-overlay'); - $('.post-right__container').removeClass('right-file-overlay'); - }); - $('body').on('drop', '.app__content', function(e) { - e.preventDefault(); - $('.app__content').removeClass('center-file-overlay'); - self.handleDrop(e); + $('.app__content').dragster({ + enter: function(dragsterEvent, e) { + $('.app__content').addClass('center-file-overlay'); + }, + leave: function(dragsterEvent, e) { + $('.app__content').removeClass('center-file-overlay'); + }, + drop: function(dragsterEvent, e) { + $('.app__content').removeClass('center-file-overlay'); + self.handleDrop(e); + } }); } else if (this.props.postType === 'comment') { - $('body').on('dragover dragleave', '.post-right__container', function(e) { - e.preventDefault(); - }); - $('body').on('dragenter', '.post-right__container', function(e) { - e.preventDefault(); - console.log('HERE RIGHT'); - $('.post-right__container').addClass('right-file-overlay'); - $('.app__content').removeClass('center-file-overlay'); - }); - $('body').on('drop', '.post-right__container', function(e) { - e.preventDefault(); - $('.post-right__container').removeClass('right-file-overlay'); - self.handleDrop(e); + $('.post-right__container').dragster({ + enter: function(dragsterEvent, e) { + $('.post-right__container').addClass('right-file-overlay'); + }, + leave: function(dragsterEvent, e) { + $('.post-right__container').removeClass('right-file-overlay'); + }, + drop: function(dragsterEvent, e) { + $('.post-right__container').removeClass('right-file-overlay'); + self.handleDrop(e); + } }); } -- cgit v1.2.3-1-g7c22 From 6f091f0f6d17b74a5d87517ef35f89cd46e1bcb4 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 11 Aug 2015 15:31:07 -0700 Subject: Added check to make sure files are not strings --- web/react/components/file_upload.jsx | 8 ++++++-- web/react/components/post_list.jsx | 6 +----- web/react/components/post_right.jsx | 7 +------ 3 files changed, 8 insertions(+), 13 deletions(-) (limited to 'web/react') diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index f382b848a..05c883ffc 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -84,13 +84,17 @@ module.exports = React.createClass({ this.props.onUploadError(null); var files = e.originalEvent.dataTransfer.files; - if (files.length) { + if (!files.length) { + files = e.originalEvent.dataTransfer.getData('URL'); + } + var channelId = this.props.channelId || ChannelStore.getCurrentId(); + + if (typeof files !== 'string' && files.length) { var numFiles = files.length; var numToUpload = this.props.setUploads(numFiles); for (var i = 0; i < numFiles && i < numToUpload; i++) { var file = files[i]; - var channelId = this.props.channelId || ChannelStore.getCurrentId(); var formData = new FormData(); formData.append('channel_id', channelId); diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 826d34a7d..83f806b79 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -124,6 +124,7 @@ module.exports = React.createClass({ $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--comment'); } }); + }, componentDidUpdate: function() { this.resize(); @@ -461,11 +462,6 @@ module.exports = React.createClass({ postCtls.push(); } - var fileDragOverlay = ''; - if (this.state.fileDrag) { - fileDragOverlay = 'post-list-file-overlay'; - } - return (
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index ad993aee1..ad8b54012 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -294,13 +294,8 @@ module.exports = React.createClass({ var currentId = UserStore.getCurrentId(); var searchForm = currentId == null ? null : ; - var fileDragOverlay = ''; - if (this.state.fileDrag) { - fileDragOverlay = 'post-right-file-overlay'; - } - return ( -
+
{searchForm}
-- cgit v1.2.3-1-g7c22 From 596e76d40418465c80fadb640450ee4d37bc4e1e Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Wed, 12 Aug 2015 08:30:03 -0700 Subject: Fixed issue with uploading files from RHS when trying to upload after opening the RHS and then switching channels --- web/react/components/file_upload.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'web/react') diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index 05c883ffc..7918b42ec 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -14,7 +14,7 @@ module.exports = React.createClass({ var element = $(this.refs.fileInput.getDOMNode()); var files = element.prop('files'); - var channelId = ChannelStore.getCurrentId(); + var channelId = this.props.channelId || ChannelStore.getCurrentId(); this.props.onUploadError(null); @@ -192,14 +192,13 @@ module.exports = React.createClass({ continue; } - var channelId = ChannelStore.getCurrentId(); + var channelId = this.props.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); - var d = new Date(); var hour; if (d.getHours() < 10) { -- cgit v1.2.3-1-g7c22 From 0f1c9917271d8e28c55b8d930ac9057ef19e5862 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Wed, 12 Aug 2015 12:47:29 -0700 Subject: Updated feature to work with new upload cancel logic --- web/react/components/file_upload.jsx | 39 +++++++++++++++++++++++++++++------- 1 file changed, 32 insertions(+), 7 deletions(-) (limited to 'web/react') diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index 7918b42ec..641a888c7 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -91,24 +91,49 @@ module.exports = React.createClass({ if (typeof files !== 'string' && files.length) { var numFiles = files.length; - var numToUpload = this.props.setUploads(numFiles); - for (var i = 0; i < numFiles && i < numToUpload; i++) { - var file = files[i]; + 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'); + continue; + } + + // 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. var formData = new FormData(); formData.append('channel_id', channelId); - formData.append('files', file, file.name); + formData.append('files', files[i], files[i].name); + formData.append('client_ids', clientId); - client.uploadFile(formData, + var request = client.uploadFile(formData, function(data) { var parsedData = $.parseJSON(data); - this.props.onFileUpload(parsedData.filenames, channelId); + 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.onUploadError(err); + this.props.onUploadError(err, clientId); }.bind(this) ); + + var requests = this.state.requests; + requests[clientId] = request; + this.setState({requests: requests}); + + this.props.onUploadStart([clientId], channelId); } } }, -- cgit v1.2.3-1-g7c22 From 14c121dc0cccdd36f97b0b13cde6dd3a5802bb9e Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Wed, 12 Aug 2015 14:12:17 -0700 Subject: Implements better markup for css changes to be made, including an overlay of the dropzones and help pic/text --- web/react/components/file_upload.jsx | 18 ++++++++++++------ web/react/components/post_list.jsx | 16 +++++++++++----- web/react/components/post_right.jsx | 4 ++++ 3 files changed, 27 insertions(+), 11 deletions(-) (limited to 'web/react') diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index 641a888c7..adf0a9fa8 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -144,26 +144,32 @@ module.exports = React.createClass({ if (this.props.postType === 'post') { $('.app__content').dragster({ enter: function(dragsterEvent, e) { - $('.app__content').addClass('center-file-overlay'); + $('.center-file-overlay').removeClass('invisible'); + $('.center-file-overlay').addClass('visible'); }, leave: function(dragsterEvent, e) { - $('.app__content').removeClass('center-file-overlay'); + $('.center-file-overlay').removeClass('visible'); + $('.center-file-overlay').addClass('invisible'); }, drop: function(dragsterEvent, e) { - $('.app__content').removeClass('center-file-overlay'); + $('.center-file-overlay').removeClass('visible'); + $('.center-file-overlay').addClass('invisible'); self.handleDrop(e); } }); } else if (this.props.postType === 'comment') { $('.post-right__container').dragster({ enter: function(dragsterEvent, e) { - $('.post-right__container').addClass('right-file-overlay'); + $('.right-file-overlay').removeClass('invisible'); + $('.right-file-overlay').addClass('visible'); }, leave: function(dragsterEvent, e) { - $('.post-right__container').removeClass('right-file-overlay'); + $('.right-file-overlay').removeClass('visible'); + $('.right-file-overlay').addClass('invisible'); }, drop: function(dragsterEvent, e) { - $('.post-right__container').removeClass('right-file-overlay'); + $('.right-file-overlay').removeClass('visible'); + $('.right-file-overlay').addClass('invisible'); self.handleDrop(e); } }); diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 83f806b79..756ed521d 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -463,11 +463,17 @@ module.exports = React.createClass({ } return ( -
-
-
- { more_messages } - { postCtls } +
+
+ Drop a file to upload it. + +
+
+
+
+ { more_messages } + { postCtls } +
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index ad8b54012..49c12ad9c 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -296,6 +296,10 @@ module.exports = React.createClass({ return (
+
+ Drop a file to upload it. + +
{searchForm}
-- cgit v1.2.3-1-g7c22 From 097257ade8b01a6f4ce4766cb844d06533bb74cf Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 13 Aug 2015 23:11:01 +0500 Subject: UI Upgrades to file overlay for uploads --- web/react/components/post_list.jsx | 6 ++++-- web/react/components/post_right.jsx | 8 +++++--- 2 files changed, 9 insertions(+), 5 deletions(-) (limited to 'web/react') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 756ed521d..53e8d0761 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -465,8 +465,10 @@ module.exports = React.createClass({ return (
- Drop a file to upload it. - +
+ + Drop a file to upload it. +
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index 49c12ad9c..b772c7ee8 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -296,9 +296,11 @@ module.exports = React.createClass({ return (
-
- Drop a file to upload it. - +
+
+ + Drop a file to upload it. +
{searchForm}
-- cgit v1.2.3-1-g7c22 From 6ca6072f478f556ba2d25c9762f0d73c9e84c7f6 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 13 Aug 2015 23:33:18 +0500 Subject: Updating UI to cover RHS and the centre channel separately --- web/react/components/post_list.jsx | 2 +- web/react/components/post_right.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'web/react') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 53e8d0761..f45650279 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -464,7 +464,7 @@ module.exports = React.createClass({ return (
-
+
Drop a file to upload it. diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index b772c7ee8..09cd8cb56 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -296,7 +296,7 @@ module.exports = React.createClass({ return (
-
+
Drop a file to upload it. -- cgit v1.2.3-1-g7c22 From 912ca8e8dd2f69d8a15429f3ab4bbb7ac178ab8a Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 13 Aug 2015 12:07:32 -0700 Subject: Changed location of file upload overlay --- web/react/components/file_upload_overlay.jsx | 16 ++++++++++++++++ web/react/components/post_list.jsx | 18 +++++------------- web/react/pages/channel.jsx | 6 ++++++ 3 files changed, 27 insertions(+), 13 deletions(-) create mode 100644 web/react/components/file_upload_overlay.jsx (limited to 'web/react') diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx new file mode 100644 index 000000000..5f8ef0b0c --- /dev/null +++ b/web/react/components/file_upload_overlay.jsx @@ -0,0 +1,16 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +module.exports = React.createClass({ + displayName: 'FileUploadOverlay', + render: function() { + return ( +
+
+ + Drop a file to upload it. +
+
+ ); + } +}); diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index f45650279..83f806b79 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -463,19 +463,11 @@ module.exports = React.createClass({ } return ( -
-
-
- - Drop a file to upload it. -
-
-
-
-
- { more_messages } - { postCtls } -
+
+
+
+ { more_messages } + { postCtls }
diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index 90d90b29f..922e61d1a 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -35,6 +35,7 @@ var ChannelInfoModal = require('../components/channel_info_modal.jsx'); var AccessHistoryModal = require('../components/access_history_modal.jsx'); var ActivityLogModal = require('../components/activity_log_modal.jsx'); var RemovedFromChannelModal = require('../components/removed_from_channel_modal.jsx') +var FileUploadOverlay = require('../components/file_upload_overlay.jsx'); var Constants = require('../utils/constants.jsx'); @@ -223,4 +224,9 @@ global.window.setup_channel_page = function(team_name, team_type, team_id, chann document.getElementById('removed_from_channel_modal') ); + React.render( + , + document.getElementById('file_upload_overlay') + ); + }; -- cgit v1.2.3-1-g7c22 From 6f68c508ee3fd8c54fc1ba314cc60bae3f0b2600 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 13 Aug 2015 15:44:38 -0700 Subject: Better error checking along with other fixes --- web/react/components/create_comment.jsx | 18 +++++++++++------- web/react/components/create_post.jsx | 18 +++++++++++------- web/react/components/file_upload.jsx | 7 +++---- web/react/components/file_upload_overlay.jsx | 22 +++++++++++----------- 4 files changed, 36 insertions(+), 29 deletions(-) (limited to 'web/react') diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index c954229ae..885efab7a 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -122,16 +122,20 @@ module.exports = React.createClass({ this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); }, handleUploadError: function(err, clientId) { - var draft = PostStore.getCommentDraft(this.props.rootId); + if (clientId !== -1) { + var draft = PostStore.getCommentDraft(this.props.rootId); - var index = draft['uploadsInProgress'].indexOf(clientId); - if (index !== -1) { - draft['uploadsInProgress'].splice(index, 1); - } + var index = draft['uploadsInProgress'].indexOf(clientId); + if (index !== -1) { + draft['uploadsInProgress'].splice(index, 1); + } - PostStore.storeCommentDraft(this.props.rootId, draft); + PostStore.storeCommentDraft(this.props.rootId, draft); - this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); + this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); + } else { + this.setState({serverError: err}); + } }, clearPreviews: function() { this.setState({previews: []}); diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 137420440..377e7bd34 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -145,16 +145,20 @@ module.exports = React.createClass({ this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); }, handleUploadError: function(err, clientId) { - var draft = PostStore.getDraft(this.state.channelId); + if (clientId !== -1) { + var draft = PostStore.getDraft(this.state.channelId); - var index = draft['uploadsInProgress'].indexOf(clientId); - if (index !== -1) { - draft['uploadsInProgress'].splice(index, 1); - } + var index = draft['uploadsInProgress'].indexOf(clientId); + if (index !== -1) { + draft['uploadsInProgress'].splice(index, 1); + } - PostStore.storeDraft(this.state.channelId, draft); + PostStore.storeDraft(this.state.channelId, draft); - this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); + this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); + } else { + this.setState({serverError: err}); + } }, removePreview: function(id) { var previews = this.state.previews; diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index f1a06c361..2bce1b537 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -91,9 +91,6 @@ module.exports = React.createClass({ this.props.onUploadError(null); var files = e.originalEvent.dataTransfer.files; - if (!files.length) { - files = e.originalEvent.dataTransfer.getData('URL'); - } var channelId = this.props.channelId || ChannelStore.getCurrentId(); if (typeof files !== 'string' && files.length) { @@ -142,6 +139,8 @@ module.exports = React.createClass({ this.props.onUploadStart([clientId], channelId); } + } else { + this.props.onUploadError('Invalid file upload', -1); } }, componentDidMount: function() { @@ -149,7 +148,7 @@ module.exports = React.createClass({ var self = this; if (this.props.postType === 'post') { - $('.app__content').dragster({ + $('.row.main').dragster({ enter: function(dragsterEvent, e) { $('.center-file-overlay').removeClass('invisible'); $('.center-file-overlay').addClass('visible'); diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx index 5f8ef0b0c..a82f02af1 100644 --- a/web/react/components/file_upload_overlay.jsx +++ b/web/react/components/file_upload_overlay.jsx @@ -2,15 +2,15 @@ // See License.txt for license information. module.exports = React.createClass({ - displayName: 'FileUploadOverlay', - render: function() { - return ( -
-
- - Drop a file to upload it. -
-
- ); - } + displayName: 'FileUploadOverlay', + render: function() { + return ( +
+
+ + Drop a file to upload it. +
+
+ ); + } }); -- cgit v1.2.3-1-g7c22 From 3a55cc6dcb8e45b65debd7569a49961faa55b402 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 13 Aug 2015 16:00:55 -0700 Subject: Minor refactoring for better maintainibility --- web/react/components/file_upload_overlay.jsx | 12 +++++++++++- web/react/components/post_right.jsx | 9 +++------ web/react/pages/channel.jsx | 3 ++- 3 files changed, 16 insertions(+), 8 deletions(-) (limited to 'web/react') diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx index a82f02af1..28d66d817 100644 --- a/web/react/components/file_upload_overlay.jsx +++ b/web/react/components/file_upload_overlay.jsx @@ -3,9 +3,19 @@ module.exports = React.createClass({ displayName: 'FileUploadOverlay', + propTypes: { + overlayType: React.PropTypes.string + }, render: function() { + var overlayClass = 'file-overlay invisible'; + if (this.props.overlayType === 'right') { + overlayClass += ' right-file-overlay'; + } else if (this.props.overlayType === 'center') { + overlayClass += ' center-file-overlay'; + } + return ( -
+
Drop a file to upload it. diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index 09cd8cb56..e46979ff7 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -11,6 +11,7 @@ var SearchBox =require('./search_bar.jsx'); var CreateComment = require( './create_comment.jsx' ); var Constants = require('../utils/constants.jsx'); var FileAttachmentList = require('./file_attachment_list.jsx'); +var FileUploadOverlay = require('./file_upload_overlay.jsx'); var ActionTypes = Constants.ActionTypes; RhsHeaderPost = React.createClass({ @@ -296,12 +297,8 @@ module.exports = React.createClass({ return (
-
-
- - Drop a file to upload it. -
-
+
{searchForm}
diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index 922e61d1a..3ef6817f3 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -225,7 +225,8 @@ global.window.setup_channel_page = function(team_name, team_type, team_id, chann ); React.render( - , + , document.getElementById('file_upload_overlay') ); -- cgit v1.2.3-1-g7c22 From bcea7ae74fab36d7633db3b06a13f0a221fb0ed0 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 13 Aug 2015 16:26:48 -0700 Subject: Minor cosmetic refactoring of file_upload.jsx --- web/react/components/file_upload.jsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) (limited to 'web/react') diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index 2bce1b537..bc0cf70c8 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -12,7 +12,9 @@ module.exports = React.createClass({ onUploadError: React.PropTypes.func, getFileCount: React.PropTypes.func, onFileUpload: React.PropTypes.func, - onUploadStart: React.PropTypes.func + onUploadStart: React.PropTypes.func, + channelId: React.PropTypes.string, + postType: React.PropTypes.string }, getInitialState: function() { return {requests: {}}; @@ -61,8 +63,8 @@ module.exports = React.createClass({ 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]]; + for (var j = 0; j < parsedData.client_ids.length; j++) { + delete requests[parsedData.client_ids[j]]; } this.setState({requests: requests}); }.bind(this), @@ -120,11 +122,11 @@ module.exports = React.createClass({ var request = client.uploadFile(formData, function(data) { var parsedData = $.parseJSON(data); - this.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channelId); + 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]]; + for (var j = 0; j < parsedData.client_ids.length; j++) { + delete requests[parsedData.client_ids[j]]; } this.setState({requests: requests}); }.bind(this), @@ -149,11 +151,11 @@ module.exports = React.createClass({ if (this.props.postType === 'post') { $('.row.main').dragster({ - enter: function(dragsterEvent, e) { + enter: function() { $('.center-file-overlay').removeClass('invisible'); $('.center-file-overlay').addClass('visible'); }, - leave: function(dragsterEvent, e) { + leave: function() { $('.center-file-overlay').removeClass('visible'); $('.center-file-overlay').addClass('invisible'); }, @@ -165,11 +167,11 @@ module.exports = React.createClass({ }); } else if (this.props.postType === 'comment') { $('.post-right__container').dragster({ - enter: function(dragsterEvent, e) { + enter: function() { $('.right-file-overlay').removeClass('invisible'); $('.right-file-overlay').addClass('visible'); }, - leave: function(dragsterEvent, e) { + leave: function() { $('.right-file-overlay').removeClass('visible'); $('.right-file-overlay').addClass('invisible'); }, @@ -254,8 +256,8 @@ module.exports = React.createClass({ self.props.onFileUpload(parsedData.filenames, parsedData.client_ids, channelId); var requests = self.state.requests; - for (var i = 0; i < parsedData.client_ids.length; i++) { - delete requests[parsedData.client_ids[i]]; + for (var j = 0; j < parsedData.client_ids.length; j++) { + delete requests[parsedData.client_ids[j]]; } self.setState({requests: requests}); }, -- cgit v1.2.3-1-g7c22 From 2c098d7711eda893f903329ab64528a7d387a6e8 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Fri, 14 Aug 2015 10:00:24 -0700 Subject: Small changes to css to clean up code --- web/react/components/file_upload.jsx | 18 ++++++------------ web/react/components/file_upload_overlay.jsx | 2 +- web/react/pages/channel.jsx | 2 +- 3 files changed, 8 insertions(+), 14 deletions(-) (limited to 'web/react') diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index bc0cf70c8..7497ec330 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -152,32 +152,26 @@ module.exports = React.createClass({ if (this.props.postType === 'post') { $('.row.main').dragster({ enter: function() { - $('.center-file-overlay').removeClass('invisible'); - $('.center-file-overlay').addClass('visible'); + $('.center-file-overlay').removeClass('hidden'); }, leave: function() { - $('.center-file-overlay').removeClass('visible'); - $('.center-file-overlay').addClass('invisible'); + $('.center-file-overlay').addClass('hidden'); }, drop: function(dragsterEvent, e) { - $('.center-file-overlay').removeClass('visible'); - $('.center-file-overlay').addClass('invisible'); + $('.center-file-overlay').addClass('hidden'); self.handleDrop(e); } }); } else if (this.props.postType === 'comment') { $('.post-right__container').dragster({ enter: function() { - $('.right-file-overlay').removeClass('invisible'); - $('.right-file-overlay').addClass('visible'); + $('.right-file-overlay').removeClass('hidden'); }, leave: function() { - $('.right-file-overlay').removeClass('visible'); - $('.right-file-overlay').addClass('invisible'); + $('.right-file-overlay').addClass('hidden'); }, drop: function(dragsterEvent, e) { - $('.right-file-overlay').removeClass('visible'); - $('.right-file-overlay').addClass('invisible'); + $('.right-file-overlay').addClass('hidden'); self.handleDrop(e); } }); diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx index 28d66d817..f35556371 100644 --- a/web/react/components/file_upload_overlay.jsx +++ b/web/react/components/file_upload_overlay.jsx @@ -7,7 +7,7 @@ module.exports = React.createClass({ overlayType: React.PropTypes.string }, render: function() { - var overlayClass = 'file-overlay invisible'; + var overlayClass = 'file-overlay hidden'; if (this.props.overlayType === 'right') { overlayClass += ' right-file-overlay'; } else if (this.props.overlayType === 'center') { diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index 3ef6817f3..1f07cb519 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -225,7 +225,7 @@ global.window.setup_channel_page = function(team_name, team_type, team_id, chann ); React.render( - , document.getElementById('file_upload_overlay') ); -- cgit v1.2.3-1-g7c22