about summary refs log tree commit diff
path: root/app
diff options
context:
space:
mode:
authorEugen Rochko <eugen@zeonfederated.com>2016-12-11 23:35:06 +0100
committerEugen Rochko <eugen@zeonfederated.com>2016-12-11 23:35:06 +0100
commitcda297450f023c36dc7135c4b02693a1b3525ccd (patch)
tree6c49bc685e2d3bfbcb504ba75fcc91d7969d4d94 /app
parentf92cb02b9bc4b6b09c48dee72ac3a9f0de213dc3 (diff)
Fix #171 - You can now drag & drop files to be uploaded
Diffstat (limited to 'app')
-rw-r--r--app/assets/javascripts/components/features/ui/index.jsx27
1 files changed, 26 insertions, 1 deletions
diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx
index 39ef35676..76e3dd940 100644
--- a/app/assets/javascripts/components/features/ui/index.jsx
+++ b/app/assets/javascripts/components/features/ui/index.jsx
@@ -9,6 +9,8 @@ import TabsBar from './components/tabs_bar';
 import ModalContainer from './containers/modal_container';
 import Notifications from '../notifications';
 import { debounce } from 'react-decoration';
+import { uploadCompose } from '../../actions/compose';
+import { connect } from 'react-redux';
 
 const UI = React.createClass({
 
@@ -25,12 +27,35 @@ const UI = React.createClass({
     this.setState({ width: window.innerWidth });
   },
 
+  handleDragOver (e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    e.dataTransfer.dropEffect = 'copy';
+
+    if (e.dataTransfer.effectAllowed === 'all' || e.dataTransfer.effectAllowed === 'uninitialized') {
+      //
+    }
+  },
+
+  handleDrop (e) {
+    e.preventDefault();
+
+    if (e.dataTransfer) {
+      this.props.dispatch(uploadCompose(e.dataTransfer.files));
+    }
+  },
+
   componentWillMount () {
     window.addEventListener('resize', this.handleResize, { passive: true });
+    window.addEventListener('dragover', this.handleDragOver);
+    window.addEventListener('drop', this.handleDrop);
   },
 
   componentWillUnmount () {
     window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener('dragover', this.handleDragOver);
+    window.removeEventListener('drop', this.handleDrop);
   },
 
   render () {
@@ -70,4 +95,4 @@ const UI = React.createClass({
 
 });
 
-export default UI;
+export default connect()(UI);