add drag and drop feature

src/assets/styles/variables.css

@@ -4,6 +4,7 @@
   --color-gray-light-2: #DFE8F3;
   --color-gray-light-3: #C8D4E3;
   --color-gray-light-4:#EBF0F8;
+  --color-gray-light-5:#f8f8f9;
   --color-gray-medium: #A2B1C6;
   --color-gray-dark: #506784;
   --color-blue-medium: #119DFF;
@@ -14,6 +15,7 @@
 
   --color-bg-light: var(--color-gray-light);
   --color-bg-light-2: var(--color-gray-light-2);
+  --color-bg-light-3: var(--color-gray-light-5);
   --color-bg-dark: var(--color-gray-dark);
   --color-accent: var(--color-blue-medium);
   --color-accent-shade: var(--color-blue-dark);

src/views/DbUpload.vue

@@ -1,7 +1,19 @@
 <template>
-  <div>
-    <label class="button">
-      Load an SQLite database file: <input type='file' ref='dbfile' @change="loadDb">
+  <div id="dbloader-container">
+    <h1>Sqliteviz</h1>
+    <label for="assetsFieldHandle">
+      <div id="drop-area" @dragover="dragover" @dragleave="dragleave" @drop="drop">
+        <input
+          type="file"
+          id="assetsFieldHandle"
+          @change="loadDb"
+          ref="file"
+          accept=".db"
+        />
+        <div>
+          Drop the database file to upload here or click to choose a file from your computer.
+        </div>
+      </div>
     </label>
     <div id="error" class="error"></div>
   </div>
@@ -17,9 +29,9 @@ export default {
   },
   methods: {
     loadDb () {
-      const dbName = this.$refs.dbfile.value.substr(this.$refs.dbfile.value.lastIndexOf('\\') + 1)
+      const dbName = this.$refs.file.value.substr(this.$refs.file.value.lastIndexOf('\\') + 1)
       this.$store.commit('saveDbName', dbName)
-      const f = this.$refs.dbfile.files[0]
+      const f = this.$refs.file.files[0]
       const r = new FileReader()
       r.onload = () => {
         this.worker.onmessage = () => {
@@ -41,7 +53,62 @@ export default {
         }
       }
       r.readAsArrayBuffer(f)
+    },
+    dragover (event) {
+      event.preventDefault()
+      // TODO: Add some visual fluff to show the user can drop its files
+      if (!event.currentTarget.classList.contains('bg-green-300')) {
+        event.currentTarget.classList.remove('bg-gray-100')
+        event.currentTarget.classList.add('bg-green-300')
+      }
+    },
+    dragleave (event) {
+      // Clean up
+      event.currentTarget.classList.add('bg-gray-100')
+      event.currentTarget.classList.remove('bg-green-300')
+    },
+    drop (event) {
+      event.preventDefault()
+      this.$refs.file.files = event.dataTransfer.files
+      this.loadDb()
+      // Clean up
+      event.currentTarget.classList.add('bg-gray-100')
+      event.currentTarget.classList.remove('bg-green-300')
     }
   }
 }
 </script>
+
+<style scoped>
+#dbloader-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+h1 {
+  color: var(--color-accent);
+}
+label {
+  display: inline-block;
+  border: 1px dashed var(--color-border);
+  padding: 8px;
+  border-radius: var(--border-radius-big);
+}
+#drop-area {
+  width: 231px;
+  height: 153px;
+  background-color: var(--color-bg-light-3);
+  border-radius: var(--border-radius-big);
+  color: var(--color-text-base);
+  font-size: 13px;
+  padding: 44px 15px;
+  text-align: center;
+  box-sizing: border-box;
+}
+input {
+  display: none;
+}
+</style>