refactor: upload utils

frontend/src/components/files/Listing.vue

@@ -89,12 +89,10 @@
 
 <script>
 import { mapState, mapMutations } from 'vuex'
-import throttle from 'lodash.throttle'
 import Item from './ListingItem'
 import css from '@/utils/css'
 import { users, files as api } from '@/api'
-import buttons from '@/utils/buttons'
+import * as upload  from '@/utils/upload'
-import url from '@/utils/url'
 
 export default {
   name: 'listing',
@@ -325,8 +323,8 @@ export default {
         base = el.querySelector('.name').innerHTML + '/'
       }
 
-      let files = await this.scanFiles(dt);
+      let files = await upload.scanFiles(dt)
-      let path = this.$route.path + base;
+      let path = this.$route.path + base
       let items = this.req.items
 
       if (base !== '') {
@@ -337,7 +335,7 @@ export default {
         }
       }
 
-      let conflict = this.checkConflict(files, items)
+      let conflict = upload.checkConflict(files, items)
 
       if (conflict) {
         this.$store.commit('showHover', {
@@ -345,48 +343,14 @@ export default {
           confirm: (event) => {
             event.preventDefault()
             this.$store.commit('closeHovers')
-            this.handleFiles(files, path, true)
+            upload.handleFiles(files, path, true)
           }
         })
 
         return
       }
 
-      this.handleFiles(files, path)
+      upload.handleFiles(files, path)
-    },
-    checkConflict (files, items) {
-      if (typeof items === 'undefined' || items === null) {
-        items = []
-      }
-
-      let folder_upload = false
-      if (files[0].fullPath !== undefined) {
-        folder_upload = true
-      }
-
-      let conflict = false
-      for (let i = 0; i < files.length; i++) {
-        let file = files[i]
-        let name = file.name
-
-        if (folder_upload) {
-          let dirs = file.fullPath.split("/")
-          if (dirs.length > 1) {
-            name = dirs[0]
-          }
-        }
-
-        let res = items.findIndex(function hasConflict (element) {
-          return (element.name === this)
-        }, name)
-
-        if (res >= 0) {
-          conflict = true
-          break
-        }
-      }
-
-      return conflict
     },
     uploadInput (event) {
       this.$store.commit('closeHovers')
@@ -401,8 +365,8 @@ export default {
         }
       }
 
-      let path = this.$route.path;
+      let path = this.$route.path
-      let conflict = this.checkConflict(files, this.req.items)
+      let conflict = upload.checkConflict(files, this.req.items)
 
       if (conflict) {
         this.$store.commit('showHover', {
@@ -416,7 +380,7 @@ export default {
 
         return
       }
-      this.handleFiles(files, path)
+      upload.handleFiles(files, path)
     },
     resetOpacity () {
       let items = document.getElementsByClassName('item')
@@ -425,132 +389,6 @@ export default {
         file.style.opacity = 1
       })
     },
-    scanFiles(dt) {
-        return new Promise((resolve) => {
-            let reading = 0
-            const contents = []
-
-            if (dt.items !== undefined) {
-              for (let item of dt.items) {
-                if (item.kind === "file" && typeof item.webkitGetAsEntry === "function") {
-                  const entry = item.webkitGetAsEntry()
-                  readEntry(entry)
-                }
-              }
-            } else {
-              resolve(dt.files)
-            }
-
-            function readEntry(entry, directory = "") {
-                if (entry.isFile) {
-                    reading++
-                    entry.file(file => {
-                        reading--
-
-                        file.fullPath = `${directory}${file.name}`
-                        contents.push(file)
-
-                        if (reading === 0) {
-                            resolve(contents)
-                        }
-                    })
-                } else if (entry.isDirectory) {
-                    const dir = {
-                      isDir: true,
-                      path: `${directory}${entry.name}`
-                    }
-
-                    contents.push(dir)
-
-                    readReaderContent(entry.createReader(), `${directory}${entry.name}`)
-                }
-            }
-
-            function readReaderContent(reader, directory) {
-                reading++
-
-                reader.readEntries(function (entries) {
-                    reading--
-                    if (entries.length > 0) {
-                        for (const entry of entries) {
-                            readEntry(entry, `${directory}/`)
-                        }
-
-                        readReaderContent(reader, `${directory}/`)
-                    }
-
-                    if (reading === 0) {
-                        resolve(contents)
-                    }
-                })
-            }
-        })
-    },
-    handleFiles (files, path, overwrite = false) {
-      if (this.uploading.count == 0) {
-        buttons.loading('upload')
-      }
-
-      let promises = []
-
-      let onupload = (id) => (event) => {
-        this.$store.commit('uploadigSetProgress', { id, loaded: event.loaded })
-      }
-
-      for (let i = 0; i < files.length; i++) {
-        let file = files[i]
-
-        if (!file.isDir) {
-          let filename = (file.fullPath !== undefined) ? file.fullPath : file.name
-          let filenameEncoded = url.encodeRFC5987ValueChars(filename)
-
-          let id = this.uploading.id
-
-          this.$store.commit('uploadingIncrementSize', file.size)
-          this.$store.commit('uploadingIncrementId')
-          this.$store.commit('uploadingIncrementCount')
-
-          let promise = api.post(path + filenameEncoded, file, overwrite, throttle(onupload(id), 100)).finally(() => {
-            this.$store.commit('uploadingDecreaseCount')
-          })
-
-          promises.push(promise)
-        } else {
-          let uri = path
-          let folders = file.path.split("/")
-
-          for (let i = 0; i < folders.length; i++) {
-            let folder = folders[i]
-            let folderEncoded = encodeURIComponent(folder)
-            uri += folderEncoded + "/"
-          }
-
-          api.post(uri)
-        }
-      }
-
-      let finish = () => {
-        if (this.uploading.count > 0) {
-          return
-        }
-
-        buttons.success('upload')
-
-        this.$store.commit('setReload', true)
-        this.$store.commit('uploadingReset')
-      }
-
-      Promise.all(promises)
-        .then(() => {
-          finish()
-        })
-        .catch(error => {
-          finish()
-          this.$showError(error)
-        })
-
-      return false
-    },
     async sort (by) {
       let asc = false
 

frontend/src/utils/upload.js

@@ -0,0 +1,168 @@
+import store from '@/store'
+import { files as api } from '@/api'
+import throttle from 'lodash.throttle'
+import buttons from '@/utils/buttons'
+import url from '@/utils/url'
+
+export function checkConflict(files, items) {
+  if (typeof items === 'undefined' || items === null) {
+    items = []
+  }
+
+  let folder_upload = false
+  if (files[0].fullPath !== undefined) {
+    folder_upload = true
+  }
+
+  let conflict = false
+  for (let i = 0; i < files.length; i++) {
+    let file = files[i]
+    let name = file.name
+
+    if (folder_upload) {
+      let dirs = file.fullPath.split("/")
+      if (dirs.length > 1) {
+        name = dirs[0]
+      }
+    }
+
+    let res = items.findIndex(function hasConflict(element) {
+      return (element.name === this)
+    }, name)
+
+    if (res >= 0) {
+      conflict = true
+      break
+    }
+  }
+
+  return conflict
+}
+
+export function scanFiles(dt) {
+  return new Promise((resolve) => {
+    let reading = 0
+    const contents = []
+
+    if (dt.items !== undefined) {
+      for (let item of dt.items) {
+        if (item.kind === "file" && typeof item.webkitGetAsEntry === "function") {
+          const entry = item.webkitGetAsEntry()
+          readEntry(entry)
+        }
+      }
+    } else {
+      resolve(dt.files)
+    }
+
+    function readEntry(entry, directory = "") {
+      if (entry.isFile) {
+        reading++
+        entry.file(file => {
+          reading--
+
+          file.fullPath = `${directory}${file.name}`
+          contents.push(file)
+
+          if (reading === 0) {
+            resolve(contents)
+          }
+        })
+      } else if (entry.isDirectory) {
+        const dir = {
+          isDir: true,
+          path: `${directory}${entry.name}`
+        }
+
+        contents.push(dir)
+
+        readReaderContent(entry.createReader(), `${directory}${entry.name}`)
+      }
+    }
+
+    function readReaderContent(reader, directory) {
+      reading++
+
+      reader.readEntries(function (entries) {
+        reading--
+        if (entries.length > 0) {
+          for (const entry of entries) {
+            readEntry(entry, `${directory}/`)
+          }
+
+          readReaderContent(reader, `${directory}/`)
+        }
+
+        if (reading === 0) {
+          resolve(contents)
+        }
+      })
+    }
+  })
+}
+
+export function handleFiles(files, path, overwrite = false) {
+  if (store.state.uploading.count == 0) {
+    buttons.loading('upload')
+  }
+
+  let promises = []
+
+  let onupload = (id) => (event) => {
+    store.commit('uploadigSetProgress', { id, loaded: event.loaded })
+  }
+
+  for (let i = 0; i < files.length; i++) {
+    let file = files[i]
+
+    if (!file.isDir) {
+      let filename = (file.fullPath !== undefined) ? file.fullPath : file.name
+      let filenameEncoded = url.encodeRFC5987ValueChars(filename)
+
+      let id = store.state.uploading.id
+
+      store.commit('uploadingIncrementSize', file.size)
+      store.commit('uploadingIncrementId')
+      store.commit('uploadingIncrementCount')
+
+      let promise = api.post(path + filenameEncoded, file, overwrite, throttle(onupload(id), 100)).finally(() => {
+        store.commit('uploadingDecreaseCount')
+      })
+
+      promises.push(promise)
+    } else {
+      let uri = path
+      let folders = file.path.split("/")
+
+      for (let i = 0; i < folders.length; i++) {
+        let folder = folders[i]
+        let folderEncoded = encodeURIComponent(folder)
+        uri += folderEncoded + "/"
+      }
+
+      api.post(uri)
+    }
+  }
+
+  let finish = () => {
+    if (store.state.uploading.count > 0) {
+      return
+    }
+
+    buttons.success('upload')
+
+    store.commit('setReload', true)
+    store.commit('uploadingReset')
+  }
+
+  Promise.all(promises)
+    .then(() => {
+      finish()
+    })
+    .catch(error => {
+      finish()
+      this.$showError(error)
+    })
+
+  return false
+}