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 --- web/sass-files/sass/partials/_files.scss | 14 ++--- 5 files changed, 79 insertions(+), 54 deletions(-) (limited to 'web') 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(); diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 65775f01e..34409d563 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -194,11 +194,11 @@ border-right: 1px solid #ddd; vertical-align: center; - // helper to center the image icon in the preview window - .file-details__preview-helper { - height: 100%; - display: inline-block; - vertical-align: middle; - } - } + // helper to center the image icon in the preview window + .file-details__preview-helper { + height: 100%; + display: inline-block; + vertical-align: middle; } + } +} -- cgit v1.2.3-1-g7c22