Fix file type detection #48

file.type is empty on some Windows machines (Registry settings affects)

src/components/DbUploader/index.vue

@@ -128,7 +128,7 @@
 </template>
 
 <script>
-import fu from '@/lib/utils/fileIo'
+import fIo from '@/lib/utils/fileIo'
 import csv from './csv'
 import CloseIcon from '@/components/svg/close'
 import TextField from '@/components/TextField'
@@ -140,15 +140,6 @@ import ChangeDbIcon from '@/components/svg/changeDb'
 import time from '@/lib/utils/time'
 import database from '@/lib/database'
 
-const csvMimeTypes = [
-  'text/csv',
-  'text/x-csv',
-  'application/x-csv',
-  'application/csv',
-  'text/x-comma-separated-values',
-  'text/comma-separated-values'
-]
-
 export default {
   name: 'DbUploader',
   props: {
@@ -390,7 +381,9 @@ export default {
 
     async checkFile (file) {
       this.state = 'dropping'
-      if (csvMimeTypes.includes(file.type)) {
+      if (fIo.isDatabase(file)) {
+        this.loadDb(file)
+      } else {
         this.file = file
         this.header = true
         this.quoteChar = '"'
@@ -400,12 +393,10 @@ export default {
           .then(() => {
             this.$modal.show('parse')
           })
-      } else {
-        this.loadDb(file)
       }
     },
     browse () {
-      fu.getFileFromUser('.db,.sqlite,.sqlite3,.csv')
+      fIo.getFileFromUser('.db,.sqlite,.sqlite3,.csv')
         .then(this.checkFile)
     },
 

src/lib/utils/fileIo.js

@@ -1,4 +1,11 @@
 export default {
+  isDatabase (file) {
+    const dbTypes = ['application/vnd.sqlite3', 'application/x-sqlite3']
+    return file.type
+      ? dbTypes.includes(file.type)
+      : /\.(db|sqlite(3)?)+$/.test(file.name)
+  },
+
   exportToFile (str, fileName, type = 'octet/stream') {
     // Create downloader
     const downloader = document.createElement('a')

tests/components/DbUploader/DbUploader.spec.js

@@ -33,7 +33,7 @@ describe('DbUploader.vue', () => {
 
   it('loads db on click and redirects to /editor', async () => {
     // mock getting a file from user
-    const file = {}
+    const file = { name: 'test.db' }
     sinon.stub(fu, 'getFileFromUser').resolves(file)
 
     // mock db loading
@@ -90,7 +90,7 @@ describe('DbUploader.vue', () => {
     })
 
     // mock a file dropped by a user
-    const file = {}
+    const file = { name: 'test.db' }
     const dropData = { dataTransfer: new DataTransfer() }
     Object.defineProperty(dropData.dataTransfer, 'files', {
       value: [file],
@@ -109,7 +109,7 @@ describe('DbUploader.vue', () => {
 
   it("doesn't redirect if already on /editor", async () => {
     // mock getting a file from user
-    const file = {}
+    const file = { name: 'test.db' }
     sinon.stub(fu, 'getFileFromUser').resolves(file)
 
     // mock db loading

tests/lib/utils/fileIo.spec.js

@@ -105,4 +105,27 @@ describe('fileIo.js', () => {
     const blob = new Blob(['foo'])
     await expect(fu.readAsArrayBuffer(blob)).to.be.rejectedWith('Problem parsing input file.')
   })
+
+  it('isDatabase', () => {
+    let file = { type: 'application/vnd.sqlite3' }
+    expect(fu.isDatabase(file)).to.equal(true)
+
+    file = { type: 'application/x-sqlite3' }
+    expect(fu.isDatabase(file)).to.equal(true)
+    
+    file = { type: '', name: 'test.db' }
+    expect(fu.isDatabase(file)).to.equal(true)
+
+    file = { type: '', name: 'test.sqlite' }
+    expect(fu.isDatabase(file)).to.equal(true)
+
+    file = { type: '', name: 'test.sqlite3' }
+    expect(fu.isDatabase(file)).to.equal(true)
+
+    file = { type: '', name: 'test.csv' }
+    expect(fu.isDatabase(file)).to.equal(false)
+
+    file = { type: 'text', name: 'test.db' }
+    expect(fu.isDatabase(file)).to.equal(false)
+  })
 })