From 5c17638a9053fae99cfda14b66a1ba9eead8b28c Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Sat, 30 Jan 2021 20:20:51 +0100
Subject: [PATCH] add getFileFromUser function

---
 src/components/Schema.vue | 19 ++++++++++---------
 src/fileUtils.js          | 27 ++++++++++++++++++---------
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/components/Schema.vue b/src/components/Schema.vue
index 0bd281b..bdefa9f 100644
--- a/src/components/Schema.vue
+++ b/src/components/Schema.vue
@@ -8,14 +8,11 @@
         <tree-chevron :expanded="schemaVisible"/>
         {{ dbName }}
       </div>
-      <div class="db-edit">
-        <input type="file" id="actual-btn"  ref="dbfile" hidden @change="changeDb"/>
-        <label for="actual-btn">
-          <change-db-icon />
-        </label>
+      <div id="db-edit" @click="changeDb">
+        <change-db-icon />
       </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])
-        .then(({ dbName, schema }) => {
-          this.$store.commit('saveSchema', { dbName, schema })
+      fu.getFileFromUser('.db,.sqlite,.sqlite3')
+        .then(file => {
+          return this.$db.loadDb(file)
+        })
+        .then((schema) => {
+          this.$store.commit('saveSchema', schema)
         })
     }
   }
diff --git a/src/fileUtils.js b/src/fileUtils.js
index a572424..4eff444 100644
--- a/src/fileUtils.js
+++ b/src/fileUtils.js
@@ -20,27 +20,36 @@ export default {
    * it will be an unsettled promise. But it's grabbed by
    * the garbage collector (tested with FinalizationRegistry).
    */
-  importFile () {
-    return new Promise((resolve, reject) => {
+  getFileFromUser (type) {
+    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(e.target.result)
-        }
-        reader.readAsText(file)
+        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)
+        })
+      })
+  },
+
   readFile (path) {
     return fetch(path)
   }