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]
-    const reader = new FileReader()
-    reader.readAsText(file)
+    let file
+    if (drop) {
+      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,25 +94,54 @@ 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 className="write-data-form">
-        <WriteDataHeader
-          {...this.state}
-          handleSelectDatabase={this.handleSelectDatabase}
-          errorThrown={errorThrown}
-          toggleWriteView={this.toggleWriteView}
-          onClose={onClose}
-        />
-        <WriteDataBody
-          {...this.state}
-          handleEdit={this.handleEdit}
-          handleFile={this.handleFile}
-          handleKeyUp={this.handleKeyUp}
-          handleSubmit={this.handleSubmit}
-        />
+      <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}
+            handleSelectDatabase={this.handleSelectDatabase}
+            errorThrown={errorThrown}
+            toggleWriteView={this.toggleWriteView}
+            onClose={onClose}
+          />
+          <WriteDataBody
+            {...this.state}
+            handleEdit={this.handleEdit}
+            handleFile={this.handleFile}
+            handleKeyUp={this.handleKeyUp}
+            handleSubmit={this.handleSubmit}
+          />
+        </div>
       </div>
     )
   }