From cda297450f023c36dc7135c4b02693a1b3525ccd Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 11 Dec 2016 23:35:06 +0100 Subject: [PATCH] Fix #171 - You can now drag & drop files to be uploaded --- .../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 index 39ef3567..76e3dd94 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);