Style drag & drop interaction

ui/src/data_explorer/components/WriteDataForm.js

@@ -76,6 +76,9 @@ class WriteDataForm extends Component {
     let file
     if (drop) {
       file = e.dataTransfer.files[0]
+      this.setState({
+        dragClass: 'drag-none',
+      })
     } else {
       file = e.target.files[0]
     }
@@ -142,6 +145,9 @@ class WriteDataForm extends Component {
             handleSubmit={this.handleSubmit}
           />
         </div>
+        <div className="write-data-form--drag-here">
+          Drag & Drop a File to Upload
+        </div>
       </div>
     )
   }

ui/src/style/components/write-data-form.scss

@@ -8,10 +8,12 @@ $write-data--max-width: 960px;
 $write-data--gutter: 30px;
 $write-data--margin: 18px;
 $write-data--input-height: 120px;
+$write-data--transition: opacity 0.4s ease;
 
 .write-data-form {
   max-width: $write-data--max-width;
   margin: 0 auto;
+  transition: $write-data--transition;
 }
 .write-data-form--header {
   height: $chronograf-page-header-height;
@@ -89,3 +91,26 @@ input[type="file"].write-data-form--upload {
   color: $c-rainforest;
   .icon {margin-right: 4px;}
 }
+
+/* Drag File to Upload Styles */
+.write-data-form--drag-here {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  transition: $write-data--transition;
+  width: 520px;
+  height: 240px;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 240px;
+  font-size: 30px;
+  font-weight: 400;
+  opacity: 0;
+  color: $g20-white;
+  border: 2px dashed fade-out($g20-white, 0.5);
+}
+.drag-over {
+  .write-data-form {opacity: 0;}
+  .write-data-form--drag-here {opacity: 1;}
+}