mastofe

commit: cda297450f023c36dc7135c4b02693a1b3525ccd
parent: f92cb02b9bc4b6b09c48dee72ac3a9f0de213dc3
Author: Eugen Rochko <eugen@zeonfederated.com>
Date:   Sun, 11 Dec 2016 23:35:06 +0100

Fix #171 - You can now drag & drop files to be uploaded

Diffstat:
M
app/assets/javascripts/components/features/ui/index.jsx
27
++++++++++++++++++++++++++-

1 file changed, 26 insertions(+), 1 deletion(-)
diff --git 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);