Users can now drop files into the center pane or the rhs respectively to upload images and other files

5 files changed, 79 insertions, 54 deletions

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} />
                     </div>
                     <MsgTyping channelId={this.props.channelId} parentId={this.props.rootId}  />
                     <div className={postFooterClassName}>
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='' />
                     </div>
                     <div className={postFooterClassName}>
                         {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;
     }
+  }
+}