From 9bbeef208fe9769618d2de3b69f0eb417eb007f8 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
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 <rgarmsen2295@gmail.com>
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 <rgarmsen2295@gmail.com>
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 <rgarmsen2295@gmail.com>
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 <rgarmsen2295@gmail.com>
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 <rgarmsen2295@gmail.com>
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 <rgarmsen2295@gmail.com>
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 <rgarmsen2295@gmail.com>
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 <rgarmsen2295@gmail.com>
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

