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({

{getLangText('Computing hash(es)... This may take a few minutes.')}

- {getLangText('Cancel hashing')} + {getLangText('Cancel hashing')}

@@ -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 + */}