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();
                 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('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();
-            //e.target.style
-            console.log("HERE!: dragenter right");
             });
-        $('body').on('drop', '.app__content', function(e) {
+            $('body').on('dragend dragleave', '.sidebar--right', function(e) {
-            if (e.originalEvent.dataTransfer)
                 e.preventDefault();
-            console.log("HERE!: drop center");
+                e.stopPropagation();
             });
             $('body').on('drop', '.sidebar--right', function(e) {
                 e.preventDefault();
-            console.log("HERE!: drop right");
+                e.stopPropagation();
+                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();