add getFileFromUser function

src/components/Schema.vue

@@ -8,14 +8,11 @@
         <tree-chevron :expanded="schemaVisible"/>
         {{ dbName }}
       </div>
-      <div class="db-edit">
+      <div id="db-edit" @click="changeDb">
-        <input type="file" id="actual-btn"  ref="dbfile" hidden @change="changeDb"/>
-        <label for="actual-btn">
         <change-db-icon />
-        </label>
       </div>
     </div>
-    <div v-if="schemaVisible" class="schema">
+    <div v-show="schemaVisible" class="schema">
       <table-description
         v-for="table in schema"
         :key="table.name"
@@ -31,6 +28,7 @@ import TableDescription from '@/components/TableDescription'
 import TextField from '@/components/TextField'
 import ChangeDbIcon from '@/components/svg/changeDb'
 import TreeChevron from '@/components/svg/treeChevron'
+import fu from '@/fileUtils'
 
 export default {
   name: 'Schema',
@@ -64,9 +62,12 @@ export default {
   },
   methods: {
     changeDb () {
-      this.$db.loadDb(this.$refs.dbfile.files[0])
+      fu.getFileFromUser('.db,.sqlite,.sqlite3')
-        .then(({ dbName, schema }) => {
+        .then(file => {
-          this.$store.commit('saveSchema', { dbName, schema })
+          return this.$db.loadDb(file)
+        })
+        .then((schema) => {
+          this.$store.commit('saveSchema', schema)
         })
     }
   }

src/fileUtils.js

@@ -20,24 +20,33 @@ export default {
    * it will be an unsettled promise. But it's grabbed by
    * the garbage collector (tested with FinalizationRegistry).
    */
-  importFile () {
+  getFileFromUser (type) {
-    return new Promise((resolve, reject) => {
+    return new Promise(resolve => {
       const uploader = document.createElement('input')
 
       uploader.type = 'file'
-      uploader.accept = '.json'
+      uploader.accept = type
 
       uploader.addEventListener('change', () => {
         const file = uploader.files[0]
-        const reader = new FileReader()
-        reader.onload = (e) => {
         uploader.remove()
+        resolve(file)
+      })
+
+      uploader.click()
+    })
+  },
+
+  importFile () {
+    return this.getFileFromUser('.json')
+      .then(file => {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader()
+          reader.onload = e => {
             resolve(e.target.result)
           }
           reader.readAsText(file)
         })
-
-      uploader.click()
       })
   },