From b4f131be50bb292903b413cef7cb41a95c790dc9 Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Tue, 7 Jul 2020 19:41:13 +0000
Subject: [PATCH 1/4] refactor: uploading counters vuex state

---
 frontend/src/components/files/Listing.vue | 117 +++++++++++-----------
 frontend/src/store/getters.js             |  10 +-
 frontend/src/store/index.js               |   8 +-
 frontend/src/store/mutations.js           |  24 ++++-
 frontend/src/views/Layout.vue             |   4 +-
 5 files changed, 98 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/files/Listing.vue b/frontend/src/components/files/Listing.vue
index 7c27f7e2..175f254e 100644
--- a/frontend/src/components/files/Listing.vue
+++ b/frontend/src/components/files/Listing.vue
@@ -101,17 +101,11 @@ export default {
   components: { Item },
   data: function () {
     return {
-      showLimit: 50,
-      uploading: {
-        id: 0,
-        count: 0,
-        size: 0,
-        progress: []
-      }
+      showLimit: 50
     }
   },
   computed: {
-    ...mapState(['req', 'selected', 'user', 'show']),
+    ...mapState(['req', 'selected', 'user', 'show', 'uploading']),
     nameSorted () {
       return (this.req.sorting.by === 'name')
     },
@@ -194,7 +188,7 @@ export default {
     base64: function (name) {
       return window.btoa(unescape(encodeURIComponent(name)))
     },
-    keyEvent (event) {      
+    keyEvent (event) {
       if (this.show !== null) {
         return
       }
@@ -311,7 +305,7 @@ export default {
     dragEnd () {
       this.resetOpacity()
     },
-    drop: function (event) {
+    drop: async function (event) {
       event.preventDefault()
       this.resetOpacity()
 
@@ -331,21 +325,36 @@ export default {
         base = el.querySelector('.name').innerHTML + '/'
       }
 
-      if (base === '') {
-        this.scanFiles(dt).then((result) => {
-          this.checkConflict(result, this.req.items, base)
-        })
-      } else {
-        this.scanFiles(dt).then((result) => {
-          api.fetch(this.$route.path + base)
-            .then(req => {
-                this.checkConflict(result, req.items, base)
-            })
-            .catch(this.$showError)
-        })
+      let files = await this.scanFiles(dt);
+      let path = this.$route.path + base;
+      let items = this.req.items
+
+      if (base !== '') {
+        try {
+          items = (await api.fetch(path)).items
+        } catch (error) {
+          this.$showError(error)
+        }
       }
+
+      let conflict = this.checkConflict(files, items)
+
+      if (conflict) {
+        this.$store.commit('showHover', {
+          prompt: 'replace',
+          confirm: (event) => {
+            event.preventDefault()
+            this.$store.commit('closeHovers')
+            this.handleFiles(files, path, true)
+          }
+        })
+
+        return
+      }
+
+      this.handleFiles(files, path)
     },
-    checkConflict (files, items, base) {
+    checkConflict (files, items) {
       if (typeof items === 'undefined' || items === null) {
         items = []
       }
@@ -377,19 +386,7 @@ export default {
         }
       }
 
-      if (!conflict) {
-        this.handleFiles(files, base)
-        return
-      }
-
-      this.$store.commit('showHover', {
-        prompt: 'replace',
-        confirm: (event) => {
-          event.preventDefault()
-          this.$store.commit('closeHovers')
-          this.handleFiles(files, base, true)
-        }
-      })
+      return conflict
     },
     uploadInput (event) {
       this.$store.commit('closeHovers')
@@ -404,7 +401,22 @@ export default {
         }
       }
 
-      this.checkConflict(files, this.req.items, '')
+      let path = this.$route.path;
+      let conflict = this.checkConflict(files, this.req.items)
+
+      if (conflict) {
+        this.$store.commit('showHover', {
+          prompt: 'replace',
+          confirm: (event) => {
+            event.preventDefault()
+            this.$store.commit('closeHovers')
+            this.handleFiles(files, path, true)
+          }
+        })
+
+        return
+      }
+      this.handleFiles(files, path)
     },
     resetOpacity () {
       let items = document.getElementsByClassName('item')
@@ -474,15 +486,7 @@ export default {
             }
         })
     },
-    setProgress: throttle(function() {
-      if (this.uploading.count == 0) {
-        return
-      }
-      
-      let sum = this.uploading.progress.reduce((acc, val) => acc + val)
-      this.$store.commit('setProgress', Math.ceil(sum / this.uploading.size * 100))
-    }, 100, {leading: false, trailing: true}),
-    handleFiles (files, base, overwrite = false) {
+    handleFiles (files, path, overwrite = false) {
       if (this.uploading.count == 0) {
         buttons.loading('upload')
       }
@@ -490,8 +494,7 @@ export default {
       let promises = []
 
       let onupload = (id) => (event) => {
-        this.uploading.progress[id] = event.loaded
-        this.setProgress()
+        this.$store.commit('uploadigSetProgress', { id, loaded: event.loaded })
       }
 
       for (let i = 0; i < files.length; i++) {
@@ -503,17 +506,17 @@ export default {
 
           let id = this.uploading.id
 
-          this.uploading.size += file.size
-          this.uploading.id++
-          this.uploading.count++
+          this.$store.commit('uploadingIncrementSize', file.size)
+          this.$store.commit('uploadingIncrementId')
+          this.$store.commit('uploadingIncrementCount')
 
-          let promise = api.post(this.$route.path + base + filenameEncoded, file, overwrite, throttle(onupload(id), 100)).finally(() => {            
-            this.uploading.count--
+          let promise = api.post(path + filenameEncoded, file, overwrite, throttle(onupload(id), 100)).finally(() => {
+            this.$store.commit('uploadingDecreaseCount')
           })
 
           promises.push(promise)
         } else {
-          let uri = this.$route.path + base
+          let uri = path
           let folders = file.path.split("/")
 
           for (let i = 0; i < folders.length; i++) {
@@ -533,12 +536,8 @@ export default {
 
         buttons.success('upload')
 
-        this.$store.commit('setProgress', 0)
         this.$store.commit('setReload', true)
-
-        this.uploading.id = 0
-        this.uploading.sizes = []
-        this.uploading.progress = []        
+        this.$store.commit('uploadingReset')
       }
 
       Promise.all(promises)
diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
index 9831b7b9..3188ea41 100644
--- a/frontend/src/store/getters.js
+++ b/frontend/src/store/getters.js
@@ -3,7 +3,15 @@ const getters = {
   isFiles: state => !state.loading && state.route.name === 'Files',
   isListing: (state, getters) => getters.isFiles && state.req.isDir,
   isEditor: (state, getters) => getters.isFiles && (state.req.type === 'text' || state.req.type === 'textImmutable'),
-  selectedCount: state => state.selected.length
+  selectedCount: state => state.selected.length,
+  progress : state => {
+    if (state.uploading.progress.length == 0) {
+      return 0;
+    }
+
+    let sum = state.uploading.progress.reduce((acc, val) => acc + val)
+    return Math.ceil(sum / state.uploading.size * 100);
+  }
 }
 
 export default getters
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 25c37bb8..0529d89e 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -22,7 +22,13 @@ const state = {
   show: null,
   showShell: false,
   showMessage: null,
-  showConfirm: null
+  showConfirm: null,
+  uploading: {
+    id: 0,
+    count: 0,
+    size: 0,
+    progress: []
+  }
 }
 
 export default new Vuex.Store({
diff --git a/frontend/src/store/mutations.js b/frontend/src/store/mutations.js
index 747c91be..595406a6 100644
--- a/frontend/src/store/mutations.js
+++ b/frontend/src/store/mutations.js
@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import * as i18n from '@/i18n'
 import moment from 'moment'
 
@@ -83,8 +84,27 @@ const mutations = {
     state.clipboard.key = ''
     state.clipboard.items = []
   },
-  setProgress: (state, value) => {
-    state.progress = value
+
+  uploadingIncrementId: (state) => {
+    state.uploading.id = state.uploading.id + 1
+  },
+  uploadingIncrementSize: (state, value) => {
+    state.uploading.size = state.uploading.size + value
+  },
+  uploadingIncrementCount: (state) => {
+    state.uploading.count = state.uploading.count + 1
+  },
+  uploadingDecreaseCount: (state) => {
+    state.uploading.count = state.uploading.count - 1
+  },
+  uploadigSetProgress(state, { id, loaded }) {
+    Vue.set(state.uploading.progress, id, loaded)
+  },
+  uploadingReset: (state) => {
+    state.uploading.id = 0
+    state.uploading.size = 0
+    state.uploading.count = 0
+    state.uploading.progress = []
   }
 }
 
diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue
index 8db58b32..c5e6c2ef 100644
--- a/frontend/src/views/Layout.vue
+++ b/frontend/src/views/Layout.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div id="progress">
-      <div v-bind:style="{ width: $store.state.progress + '%' }"></div>
+      <div v-bind:style="{ width: this.progress + '%' }"></div>
     </div>
     <site-header></site-header>
     <sidebar></sidebar>
@@ -29,7 +29,7 @@ export default {
     Shell
   },
   computed: {
-    ...mapGetters([ 'isLogged' ]),
+    ...mapGetters([ 'isLogged', 'progress' ]),
     ...mapState([ 'user' ])
   },
   watch: {

From 28d2b357186136bd66bd5d4ce6d0906df83353db Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Tue, 7 Jul 2020 19:58:07 +0000
Subject: [PATCH 2/4] refactor: upload utils

---
 frontend/src/components/files/Listing.vue | 180 ++--------------------
 frontend/src/utils/upload.js              | 168 ++++++++++++++++++++
 2 files changed, 177 insertions(+), 171 deletions(-)
 create mode 100644 frontend/src/utils/upload.js

diff --git a/frontend/src/components/files/Listing.vue b/frontend/src/components/files/Listing.vue
index 175f254e..c846e2e9 100644
--- a/frontend/src/components/files/Listing.vue
+++ b/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 url from '@/utils/url'
+import * as upload  from '@/utils/upload'
 
 export default {
   name: 'listing',
@@ -325,8 +323,8 @@ export default {
         base = el.querySelector('.name').innerHTML + '/'
       }
 
-      let files = await this.scanFiles(dt);
-      let path = this.$route.path + base;
+      let files = await upload.scanFiles(dt)
+      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)
-    },
-    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
+      upload.handleFiles(files, path)
     },
     uploadInput (event) {
       this.$store.commit('closeHovers')
@@ -401,8 +365,8 @@ export default {
         }
       }
 
-      let path = this.$route.path;
-      let conflict = this.checkConflict(files, this.req.items)
+      let path = this.$route.path
+      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
 
diff --git a/frontend/src/utils/upload.js b/frontend/src/utils/upload.js
new file mode 100644
index 00000000..f1921953
--- /dev/null
+++ b/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
+}
\ No newline at end of file

From c9cc0d3d5dd3dc69147794299e6e8785f740c231 Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Wed, 8 Jul 2020 14:12:33 +0000
Subject: [PATCH 3/4] refactor: upload vuex module

---
 frontend/src/components/files/Listing.vue |  2 +-
 frontend/src/store/getters.js             |  6 ++--
 frontend/src/store/index.js               | 12 +++-----
 frontend/src/store/modules/upload.js      | 34 +++++++++++++++++++++++
 frontend/src/store/mutations.js           | 23 ---------------
 frontend/src/utils/upload.js              | 18 ++++++------
 6 files changed, 51 insertions(+), 44 deletions(-)
 create mode 100644 frontend/src/store/modules/upload.js

diff --git a/frontend/src/components/files/Listing.vue b/frontend/src/components/files/Listing.vue
index c846e2e9..d34d2f10 100644
--- a/frontend/src/components/files/Listing.vue
+++ b/frontend/src/components/files/Listing.vue
@@ -103,7 +103,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['req', 'selected', 'user', 'show', 'uploading']),
+    ...mapState(['req', 'selected', 'user', 'show']),
     nameSorted () {
       return (this.req.sorting.by === 'name')
     },
diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
index 3188ea41..0f9925f4 100644
--- a/frontend/src/store/getters.js
+++ b/frontend/src/store/getters.js
@@ -5,12 +5,12 @@ const getters = {
   isEditor: (state, getters) => getters.isFiles && (state.req.type === 'text' || state.req.type === 'textImmutable'),
   selectedCount: state => state.selected.length,
   progress : state => {
-    if (state.uploading.progress.length == 0) {
+    if (state.upload.progress.length == 0) {
       return 0;
     }
 
-    let sum = state.uploading.progress.reduce((acc, val) => acc + val)
-    return Math.ceil(sum / state.uploading.size * 100);
+    let sum = state.upload.progress.reduce((acc, val) => acc + val)
+    return Math.ceil(sum / state.upload.size * 100);
   }
 }
 
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 0529d89e..3662d3a6 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import mutations from './mutations'
 import getters from './getters'
+import upload from './modules/upload'
 
 Vue.use(Vuex)
 
@@ -22,18 +23,13 @@ const state = {
   show: null,
   showShell: false,
   showMessage: null,
-  showConfirm: null,
-  uploading: {
-    id: 0,
-    count: 0,
-    size: 0,
-    progress: []
-  }
+  showConfirm: null
 }
 
 export default new Vuex.Store({
   strict: true,
   state,
   getters,
-  mutations
+  mutations,
+  modules: { upload }
 })
diff --git a/frontend/src/store/modules/upload.js b/frontend/src/store/modules/upload.js
new file mode 100644
index 00000000..c1378d9a
--- /dev/null
+++ b/frontend/src/store/modules/upload.js
@@ -0,0 +1,34 @@
+import Vue from 'vue'
+
+const state = {
+  id: 0,
+  count: 0,
+  size: 0,
+  progress: []
+}
+
+const mutations = {
+  incrementId: (state) => {
+    state.id = state.id + 1
+  },
+  incrementSize: (state, value) => {
+    state.size = state.size + value
+  },
+  incrementCount: (state) => {
+    state.count = state.count + 1
+  },
+  decreaseCount: (state) => {
+    state.count = state.count - 1
+  },
+  setProgress(state, { id, loaded }) {
+    Vue.set(state.progress, id, loaded)
+  },
+  reset: (state) => {
+    state.id = 0
+    state.size = 0
+    state.count = 0
+    state.progress = []
+  }
+}
+
+export default { state, mutations, namespaced: true }
\ No newline at end of file
diff --git a/frontend/src/store/mutations.js b/frontend/src/store/mutations.js
index 595406a6..579edbec 100644
--- a/frontend/src/store/mutations.js
+++ b/frontend/src/store/mutations.js
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import * as i18n from '@/i18n'
 import moment from 'moment'
 
@@ -83,28 +82,6 @@ const mutations = {
   resetClipboard: (state) => {
     state.clipboard.key = ''
     state.clipboard.items = []
-  },
-
-  uploadingIncrementId: (state) => {
-    state.uploading.id = state.uploading.id + 1
-  },
-  uploadingIncrementSize: (state, value) => {
-    state.uploading.size = state.uploading.size + value
-  },
-  uploadingIncrementCount: (state) => {
-    state.uploading.count = state.uploading.count + 1
-  },
-  uploadingDecreaseCount: (state) => {
-    state.uploading.count = state.uploading.count - 1
-  },
-  uploadigSetProgress(state, { id, loaded }) {
-    Vue.set(state.uploading.progress, id, loaded)
-  },
-  uploadingReset: (state) => {
-    state.uploading.id = 0
-    state.uploading.size = 0
-    state.uploading.count = 0
-    state.uploading.progress = []
   }
 }
 
diff --git a/frontend/src/utils/upload.js b/frontend/src/utils/upload.js
index f1921953..32b32fa9 100644
--- a/frontend/src/utils/upload.js
+++ b/frontend/src/utils/upload.js
@@ -102,14 +102,14 @@ export function scanFiles(dt) {
 }
 
 export function handleFiles(files, path, overwrite = false) {
-  if (store.state.uploading.count == 0) {
+  if (store.state.upload.count == 0) {
     buttons.loading('upload')
   }
 
   let promises = []
 
   let onupload = (id) => (event) => {
-    store.commit('uploadigSetProgress', { id, loaded: event.loaded })
+    store.commit('upload/setProgress', { id, loaded: event.loaded })
   }
 
   for (let i = 0; i < files.length; i++) {
@@ -119,14 +119,14 @@ export function handleFiles(files, path, overwrite = false) {
       let filename = (file.fullPath !== undefined) ? file.fullPath : file.name
       let filenameEncoded = url.encodeRFC5987ValueChars(filename)
 
-      let id = store.state.uploading.id
+      let id = store.state.upload.id
 
-      store.commit('uploadingIncrementSize', file.size)
-      store.commit('uploadingIncrementId')
-      store.commit('uploadingIncrementCount')
+      store.commit('upload/incrementSize', file.size)
+      store.commit('upload/incrementId')
+      store.commit('upload/incrementCount')
 
       let promise = api.post(path + filenameEncoded, file, overwrite, throttle(onupload(id), 100)).finally(() => {
-        store.commit('uploadingDecreaseCount')
+        store.commit('upload/decreaseCount')
       })
 
       promises.push(promise)
@@ -145,14 +145,14 @@ export function handleFiles(files, path, overwrite = false) {
   }
 
   let finish = () => {
-    if (store.state.uploading.count > 0) {
+    if (store.state.upload.count > 0) {
       return
     }
 
     buttons.success('upload')
 
     store.commit('setReload', true)
-    store.commit('uploadingReset')
+    store.commit('upload/reset')
   }
 
   Promise.all(promises)

From 6ec6a2386173410f5cab9941dbf1bacb6b70ddd2 Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Thu, 9 Jul 2020 15:16:04 +0000
Subject: [PATCH 4/4] feat: upload queue

---
 frontend/src/store/modules/upload.js | 93 +++++++++++++++++++++++-----
 frontend/src/utils/upload.js         | 65 +++++--------------
 2 files changed, 92 insertions(+), 66 deletions(-)

diff --git a/frontend/src/store/modules/upload.js b/frontend/src/store/modules/upload.js
index c1378d9a..738edaf9 100644
--- a/frontend/src/store/modules/upload.js
+++ b/frontend/src/store/modules/upload.js
@@ -1,34 +1,95 @@
 import Vue from 'vue'
+import { files as api } from '@/api'
+import throttle from 'lodash.throttle'
+import buttons from '@/utils/buttons'
+
+const UPLOADS_LIMIT = 5;
 
 const state = {
   id: 0,
-  count: 0,
   size: 0,
-  progress: []
+  progress: [],
+  queue: [],
+  uploads: {}
 }
 
 const mutations = {
-  incrementId: (state) => {
-    state.id = state.id + 1
-  },
-  incrementSize: (state, value) => {
-    state.size = state.size + value
-  },
-  incrementCount: (state) => {
-    state.count = state.count + 1
-  },
-  decreaseCount: (state) => {
-    state.count = state.count - 1
-  },
   setProgress(state, { id, loaded }) {
     Vue.set(state.progress, id, loaded)
   },
   reset: (state) => {
     state.id = 0
     state.size = 0
-    state.count = 0
     state.progress = []
+  },
+  addJob: (state, item) => {
+    state.queue.push(item)
+    state.size += item.file.size
+    state.id++
+  },
+  moveJob(state) {
+    const item = state.queue[0]
+    state.queue.shift()
+    Vue.set(state.uploads, item.id, item)
+  },
+  removeJob(state, id) {
+    delete state.uploads[id]
   }
 }
 
-export default { state, mutations, namespaced: true }
\ No newline at end of file
+const actions = {
+  upload: (context, item) => {
+    let uploadsCount = Object.keys(context.state.uploads).length;
+
+    let isQueueEmpty = context.state.queue.length == 0
+    let isUploadsEmpty = uploadsCount == 0
+
+    if (isQueueEmpty && isUploadsEmpty) {
+      buttons.loading('upload')
+    }
+
+    context.commit('addJob', item)
+    context.dispatch('processUploads')
+  },
+  finishUpload: (context, item) => {
+    context.commit('setProgress', { id: item.id, loaded: item.file.size })
+    context.commit('removeJob', item.id)
+    context.dispatch('processUploads')
+  },
+  processUploads: async (context) => {
+    let uploadsCount = Object.keys(context.state.uploads).length;
+
+    let isBellowLimit = uploadsCount < UPLOADS_LIMIT
+    let isQueueEmpty = context.state.queue.length == 0
+    let isUploadsEmpty = uploadsCount == 0
+
+    let isFinished = isQueueEmpty && isUploadsEmpty
+    let canProcess = isBellowLimit && !isQueueEmpty
+
+    if (isFinished) {
+      buttons.success('upload')
+      context.commit('reset')
+      context.commit('setReload', true, { root: true })
+    }
+
+    if (canProcess) {
+      const item = context.state.queue[0];
+      context.commit('moveJob')
+
+      if (item.file.isDir) {
+        await api.post(item.path).catch(Vue.prototype.$showError)
+      } else {
+        let onUpload = throttle(
+          (event) => context.commit('setProgress', { id: item.id, loaded: event.loaded }),
+          100, { leading: true, trailing: false }
+        )
+
+        await api.post(item.path, item.file, item.overwrite, onUpload).catch(Vue.prototype.$showError)
+      }
+
+      context.dispatch('finishUpload', item)
+    }
+  }
+}
+
+export default { state, mutations, actions, namespaced: true }
\ No newline at end of file
diff --git a/frontend/src/utils/upload.js b/frontend/src/utils/upload.js
index 32b32fa9..61e6a8e7 100644
--- a/frontend/src/utils/upload.js
+++ b/frontend/src/utils/upload.js
@@ -1,7 +1,4 @@
 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) {
@@ -71,6 +68,7 @@ export function scanFiles(dt) {
       } else if (entry.isDirectory) {
         const dir = {
           isDir: true,
+          size: 0,
           path: `${directory}${entry.name}`
         }
 
@@ -102,67 +100,34 @@ export function scanFiles(dt) {
 }
 
 export function handleFiles(files, path, overwrite = false) {
-  if (store.state.upload.count == 0) {
-    buttons.loading('upload')
-  }
-
-  let promises = []
-
-  let onupload = (id) => (event) => {
-    store.commit('upload/setProgress', { 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 filename = (file.fullPath !== undefined) ? file.fullPath : file.name
+    let filenameEncoded = url.encodeRFC5987ValueChars(filename)
 
-      let id = store.state.upload.id
+    let id = store.state.upload.id
 
-      store.commit('upload/incrementSize', file.size)
-      store.commit('upload/incrementId')
-      store.commit('upload/incrementCount')
+    let itemPath = path + filenameEncoded
 
-      let promise = api.post(path + filenameEncoded, file, overwrite, throttle(onupload(id), 100)).finally(() => {
-        store.commit('upload/decreaseCount')
-      })
-
-      promises.push(promise)
-    } else {
-      let uri = path
+    if (file.isDir) {
+      itemPath = path
       let folders = file.path.split("/")
 
       for (let i = 0; i < folders.length; i++) {
         let folder = folders[i]
         let folderEncoded = encodeURIComponent(folder)
-        uri += folderEncoded + "/"
+        itemPath += folderEncoded + "/"
       }
-
-      api.post(uri)
-    }
-  }
-
-  let finish = () => {
-    if (store.state.upload.count > 0) {
-      return
     }
 
-    buttons.success('upload')
+    const item = {
+      id,
+      path: itemPath,
+      file,
+      overwrite
+    }
 
-    store.commit('setReload', true)
-    store.commit('upload/reset')
+    store.dispatch('upload/upload', item);
   }
-
-  Promise.all(promises)
-    .then(() => {
-      finish()
-    })
-    .catch(error => {
-      finish()
-      this.$showError(error)
-    })
-
-  return false
 }
\ No newline at end of file