Merge "Add drag and drop file upload."

tools/ota_analysis/src/components/BaseFile.vue

@@ -1,11 +1,19 @@
 <template>
-  <label class="file-select">
-    <div class="select-button">
-      <span v-if="label">{{ label }}</span>
+  <label class="file-select ma-5">
+    <div
+      class="select-button"
+      @dragover="dragover"
+      @dragleave="dragleave"
+      @drop="drop"
+    >
+      <span v-if="label">{{ !fileName ? label : '' }}</span>
       <span v-else>Select File</span>
+      <div v-if="fileName"> File selected: {{ fileName }}</div>
     </div>
     <input
+      ref="file"
       type="file"
+      accept=".zip"
       @change="handleFileChange"
     >
   </label>
@@ -16,31 +24,53 @@ export default {
   props: {
     label: {
       type: String,
-      default: ''
+      default: '',
+    },
+  },
+  data() {
+    return {
+      fileName: '',
     }
   },
   methods: {
-    handleFileChange(e) {
-      this.$emit('file-select', e.target.files)
-    }
+    handleFileChange(event) {
+      this.$emit('file-select', this.$refs.file.files)
+      this.fileName = this.$refs.file.files[0].name
+    },
+    dragover(event) {
+      event.preventDefault()
+      if (!event.currentTarget.classList.contains('file-hover')) {
+        event.currentTarget.classList.add('file-hover')
       }
+    },
+    dragleave(event) {
+      event.currentTarget.classList.remove('file-hover')
+    },
+    drop(event) {
+      event.preventDefault()
+      this.$refs.file.files = event.dataTransfer.files
+      this.handleFileChange(event)
+      event.currentTarget.classList.remove('file-hover')
+    },
+  },
 }
 </script>
 
 <style scoped>
 .file-select > .select-button {
-  padding: 1rem;
-
-  color: white;
-  background-color: #2EA169;
-
-  border-radius: .3rem;
-
+  padding: 3rem;
+  border-radius: 0.3rem;
+  border: 4px dashed #eaebec;
   text-align: center;
   font-weight: bold;
+  cursor: pointer;
 }
 
-.file-select > input[type="file"] {
+.file-select > input[type='file'] {
   display: none;
 }
+
+.file-hover {
+  background-color: #95e995;
+}
 </style>