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

@@ -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}>

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}

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
+        if (this.props.postType === 'post') {
-        document.addEventListener('paste', function(e) {
+            $('body').on('dragover', '.app__content', function(e) {
-=======
+                e.preventDefault();
-        $('body').on('dragover', '.app__content', function(e) {
+                e.stopPropagation();
-            e.preventDefault();
+            });
-            e.stopPropagation();
+            $('body').on('dragenter', '.app__content', function(e) {
-            //e.target.style
+                e.preventDefault();
-            console.log("HERE!: drag center");
+                e.stopPropagation();
-        });
+            });
-        $('body').on('dragover', '.sidebar--right', function(e) {
+            $('body').on('dragend dragleave', '.app__content', function(e) {
-            e.preventDefault();
+                e.preventDefault();
-            e.stopPropagation();
+                e.stopPropagation();
-            //e.target.style
+            });
-            console.log("HERE!: drag right");
+            $('body').on('drop', '.app__content', function(e) {
-        });
+                e.preventDefault();
-        $('body').on('dragenter', '.app__content', function(e) {
+                e.stopPropagation();
-            e.preventDefault();
+                self.handleDrop(e);
-            e.stopPropagation();
+            });
-            //e.target.style
+        } else if (this.props.postType === 'comment') {
-            console.log("HERE!: dragenter center");
+            $('body').on('dragover', '.sidebar--right', function(e) {
-        });
+                e.preventDefault();
-        $('body').on('dragenter', '.sidebar--right', function(e) {
+                e.stopPropagation();
-            e.preventDefault();
+            });
-            e.stopPropagation();
+            $('body').on('dragenter', '.sidebar--right', function(e) {
-            //e.target.style
+                e.preventDefault();
-            console.log("HERE!: dragenter right");
+                e.stopPropagation();
-        });
+            });
-        $('body').on('drop', '.app__content', function(e) {
+            $('body').on('dragend dragleave', '.sidebar--right', function(e) {
-            if (e.originalEvent.dataTransfer)
+                e.preventDefault();
-            e.preventDefault();
+                e.stopPropagation();
-            console.log("HERE!: drop center");
+            });
-        });
+            $('body').on('drop', '.sidebar--right', function(e) {
-        $('body').on('drop', '.sidebar--right', function(e) {
+                e.preventDefault();
-            e.preventDefault();
+                e.stopPropagation();
-            console.log("HERE!: drop right");
+                self.handleDrop(e);
-        });
+            });
+        }
 
-        document.addEventListener("paste", function(e) {
+        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)) {

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();

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
+    // helper to center the image icon in the preview window
-        .file-details__preview-helper {
+    .file-details__preview-helper {
-          height: 100%;
+      height: 100%;
-          display: inline-block;
+      display: inline-block;
-          vertical-align: middle;
+      vertical-align: middle;
-        }
-      }
     }
+  }
+}