feat(drag-and-drop): drag and drop a data file to create a dataset

First, we add `showDragDrop` state to the App component. This will get refactored to the state tree. We add a `onDragEnter` handler to the App div. This event will trigger the `drag-drop` div mask to render (this should also get refactored to a separate component, potentially). Currently we have `onDragEnter`, `onDragOver`, `onDragLeave`, and `onDrop` handler attached to the `drag-drop` div mask. `onDragLeave` and `onDrop` close the `drag-drop` mask. This thread was very helpful: https://stackoverflow.com/questions/19841859/full-page-drag-and-drop-files-website

app/components/App.tsx

@@ -71,6 +71,7 @@ interface AppState {
  currentModal: Modal
  sessionID: string
  peername: string
+ showDragDrop: boolean
 }
 
 const noModalObject: HideModal = {
@@ -84,7 +85,8 @@ class App extends React.Component<AppProps, AppState> {
  this.state = {
  currentModal: noModalObject,
  sessionID: this.props.sessionID,
- peername: this.props.peername
+ peername: this.props.peername,
+ showDragDrop: false
  }
 
  this.renderModal = this.renderModal.bind(this)
@@ -260,6 +262,41 @@ class App extends React.Component<AppProps, AppState> {
  )
  }
 
+ private renderDragDrop () {
+ return (
+ <div
+ onDragEnter={(event) => {
+ event.stopPropagation()
+ event.preventDefault()
+ this.setState({ showDragDrop: true })
+ console.log('enter')
+ }}
+ onDragOver={(event) => {
+ event.stopPropagation()
+ event.preventDefault()
+ this.setState({ showDragDrop: true })
+ console.log('over')
+ }}
+ onDragLeave={(event) => {
+ event.stopPropagation()
+ event.preventDefault()
+ this.setState({ showDragDrop: false })
+ console.log('leave')
+ }}
+ onDrop={(event) => {
+ this.setState({ showDragDrop: false })
+ console.log(event.dataTransfer.files[0].name)
+ event.preventDefault()
+ console.log('drop')
+ }}
+ className='drag-drop'
+ id='drag-drop'
+ >
+ DRAG AND DROP!
+ </div>
+ )
+ }
+
  render () {
  const {
  toast,
@@ -272,12 +309,17 @@ class App extends React.Component<AppProps, AppState> {
  }
 
  return (
- <div style={{
- height: '100%',
- position: 'relative',
- overflow: 'hidden'
- }}>
+ <div className='drag'
+ onDragEnter={() => {
+ this.setState({ showDragDrop: true })
+ }}
+ style={{
+ height: '100%',
+ position: 'relative',
+ overflow: 'hidden'
+ }}>
  {this.renderAppError()}
+ {this.state.showDragDrop && this.renderDragDrop() }
  {this.renderModal()}
  <Router>
  <RoutesContainer />

app/scss/_drag-drop.scss

@@ -0,0 +1,13 @@
+.drag-drop {
+ background: rgba($color: #000000, $alpha: .6);
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+}

app/scss/_welcome.scss

@@ -15,8 +15,9 @@
  bottom: 0;
  }
 
-#app-loading { z-index: 201 }
-#app-error { z-index: 200 }
+#app-loading { z-index: 250 }
+#app-error { z-index: 249 }
+#drag-drop { z-index: 200 }
 #welcome-page { z-index: 199 }
 #signup-page { z-index: 198 }
 #signin-page { z-index: 197 }

app/scss/style.scss

@@ -24,6 +24,7 @@
 @import "stylesheet";
 
 @import "dataset";
+@import "drag-drop";
 @import "saveform";
 @import "dataset-list";
 @import "welcome";