Add drag and drop. Add drag class. WIP Styles.

ui/src/data_explorer/components/WriteDataBody.js

@@ -28,9 +28,9 @@ const WriteDataBody = ({
         : <div className="write-data-form--file">
             <input
               type="file"
-              onChange={handleFile}
+              onChange={e => handleFile(e, false)}
               className="write-data-form--upload"
-              ref={r => inputRef = r}
+              ref={r => (inputRef = r)}
               accept="text/*, application/gzip"
             />
             <button

ui/src/data_explorer/components/WriteDataForm.js

@@ -1,4 +1,5 @@
 import React, {Component, PropTypes} from 'react'
+import classnames from 'classnames'
 
 import OnClickOutside from 'shared/components/OnClickOutside'
 import WriteDataBody from 'src/data_explorer/components/WriteDataBody'
@@ -16,6 +17,7 @@ class WriteDataForm extends Component {
       fileName: '',
       progress: '',
       isManual: false,
+      dragClass: 'drag-none',
     }
 
     this.handleSelectDatabase = ::this.handleSelectDatabase
@@ -69,13 +71,21 @@ class WriteDataForm extends Component {
     this.setState({inputContent: e.target.value.trim()})
   }
 
-  handleFile(e) {
+  handleFile(e, drop) {
     // todo: expect this to be a File or Blob
-    const file = e.target.files[0]
+    let file
-    const reader = new FileReader()
+    if (drop) {
-    reader.readAsText(file)
+      file = e.dataTransfer.files[0]
+    } else {
+      file = e.target.files[0]
+    }
+
+    e.preventDefault()
+    e.stopPropagation()
 
     // async function run when loading of file is complete
+    const reader = new FileReader()
+    reader.readAsText(file)
     reader.onload = loadEvent => {
       this.setState({
         uploadContent: loadEvent.target.result,
@@ -84,10 +94,38 @@ class WriteDataForm extends Component {
     }
   }
 
+  handleDragOver(e) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  handleDragClass(entering) {
+    return e => {
+      e.preventDefault()
+      if (entering) {
+        this.setState({
+          dragClass: 'drag-over',
+        })
+      } else {
+        this.setState({
+          dragClass: 'drag-none',
+        })
+      }
+    }
+  }
+
   render() {
     const {onClose, errorThrown} = this.props
+    const {dragClass} = this.state
 
     return (
+      <div
+        onDrop={e => this.handleFile(e, true)}
+        onDragOver={this.handleDragOver}
+        onDragEnter={this.handleDragClass(true)}
+        onDragLeave={this.handleDragClass(false)}
+        className={classnames(OVERLAY_TECHNOLOGY, dragClass)}
+      >
         <div className="write-data-form">
           <WriteDataHeader
             {...this.state}
@@ -104,6 +142,7 @@ class WriteDataForm extends Component {
             handleSubmit={this.handleSubmit}
           />
         </div>
+      </div>
     )
   }
 }