From 984761a386c12a7d602c685db2049590874305f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 13 Oct 2015 16:12:05 +0200
Subject: [PATCH 1/2] Remove stopPropagation for event in FileDragAndDrop

---
 .../file_drag_and_drop.js                        |  3 +--
 js/utils/requests.js                             | 16 +++++++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
index 4c9211c5..57d87b76 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
@@ -121,13 +121,12 @@ let FileDragAndDrop = React.createClass({
         // Firefox only recognizes the simulated mouse click if bubbles is set to true,
         // but since Google Chrome propagates the event much further than needed, we
         // need to stop propagation as soon as the event is created
-        var evt = new MouseEvent('click', {
+        let evt = new MouseEvent('click', {
             view: window,
             bubbles: true,
             cancelable: true
         });
 
-        evt.stopPropagation();
         this.refs.fileinput.getDOMNode().dispatchEvent(evt);
     },
 
diff --git a/js/utils/requests.js b/js/utils/requests.js
index fd676896..7e9c9a58 100644
--- a/js/utils/requests.js
+++ b/js/utils/requests.js
@@ -57,12 +57,14 @@ class Requests {
             });
     }
 
-    handleError(err) {
-        if (err instanceof TypeError) {
-            throw new Error('Server did not respond to the request. (Not even displayed a 500)');
-        } else {
-            throw err;
-        }
+    handleError(url) {
+        return (err) => {
+            if (err instanceof TypeError) {
+                throw new Error('For: ' + url + ' - Server did not respond to the request. (Not even displayed a 500)');
+            } else {
+                throw err;
+            }
+        };
     }
 
     getUrl(url) {
@@ -118,7 +120,7 @@ class Requests {
         merged.method = verb;
         return fetch(url, merged)
                     .then(this.unpackResponse)
-                    .catch(this.handleError);
+                    .catch(this.handleError(url));
     }
 
     get(url, params) {

From 019ff6c7ede47d2ff451749e4e5a5a900b03aa32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 19 Oct 2015 14:22:20 +0200
Subject: [PATCH 2/2] Fix simulate click for Opera

---
 .../file_drag_and_drop.js                     | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
index 57d87b76..7db16ec9 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
@@ -12,6 +12,7 @@ import { getLangText } from '../../../utils/lang_utils';
 // Taken from: https://github.com/fedosejev/react-file-drag-and-drop
 let FileDragAndDrop = React.createClass({
     propTypes: {
+        className: React.PropTypes.string,
         onDrop: React.PropTypes.func.isRequired,
         onDragOver: React.PropTypes.func,
         onInactive: React.PropTypes.func,
@@ -107,6 +108,7 @@ let FileDragAndDrop = React.createClass({
     },
 
     handleOnClick() {
+        let evt;
         // when multiple is set to false and the user already uploaded a piece,
         // do not propagate event
         if(this.props.dropzoneInactive) {
@@ -118,14 +120,17 @@ let FileDragAndDrop = React.createClass({
             return;
         }
 
-        // Firefox only recognizes the simulated mouse click if bubbles is set to true,
-        // but since Google Chrome propagates the event much further than needed, we
-        // need to stop propagation as soon as the event is created
-        let evt = new MouseEvent('click', {
-            view: window,
-            bubbles: true,
-            cancelable: true
-        });
+        try {
+            evt = new MouseEvent('click', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+            });
+        } catch(e) {
+            // For browsers that do not support the new MouseEvent syntax
+            evt = document.createEvent('MouseEvents');
+            evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
+        }
 
         this.refs.fileinput.getDOMNode().dispatchEvent(evt);
     },
@@ -157,10 +162,10 @@ let FileDragAndDrop = React.createClass({
                     <div className="file-drag-and-drop-hashing-dialog">
                         <p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
                         <p>
-                            <a onClick={this.props.handleCancelHashing}> {getLangText('Cancel hashing')}</a>
+                            <a onClick={handleCancelHashing}> {getLangText('Cancel hashing')}</a>
                         </p>
                         <ProgressBar
-                            now={Math.ceil(this.props.hashingProgress)}
+                            now={Math.ceil(hashingProgress)}
                             label="%(percent)s%"
                             className="ascribe-progress-bar"/>
                     </div>
@@ -187,12 +192,23 @@ let FileDragAndDrop = React.createClass({
                             handleResumeFile={this.handleResumeFile}
                             areAssetsDownloadable={areAssetsDownloadable}
                             areAssetsEditable={areAssetsEditable}/>
+                        {/*
+                            Opera doesn't trigger simulated click events
+                            if the targeted input has `display:none` set.
+                            Which means we need to set its visibility to hidden
+                            instead of using `display:none`.
+
+                            See:
+                                - http://stackoverflow.com/questions/12880604/jquery-triggerclick-not-working-on-opera-if-the-element-is-not-displayed
+                        */}
                         <input
                             multiple={multiple}
                             ref="fileinput"
                             type="file"
                             style={{
-                                display: 'none',
+                                visibility: 'hidden',
+                                position: 'absolute',
+                                top: 0,
                                 height: 0,
                                 width: 0
                             }}