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 ++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) (limited to 'web/react/components/file_upload.jsx') 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)) { -- 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/file_upload.jsx | 104 ++++++++++++++++++++++------------- 1 file changed, 66 insertions(+), 38 deletions(-) (limited to 'web/react/components/file_upload.jsx') 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)) { -- 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 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) (limited to 'web/react/components/file_upload.jsx') 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); }); } -- 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 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) (limited to 'web/react/components/file_upload.jsx') 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); }); } -- 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/components/file_upload.jsx') 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 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'web/react/components/file_upload.jsx') 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); -- 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/components/file_upload.jsx') 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/components/file_upload.jsx') 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 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) (limited to 'web/react/components/file_upload.jsx') 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); } }); -- cgit v1.2.3-1-g7c22