Progress bar. Close #199

assets/src/components/files/Listing.vue

@@ -318,18 +318,36 @@ export default {
     handleFiles (files, base, overwrite = false) {
       buttons.loading('upload')
       let promises = []
+      let progress = new Array(files.length).fill(0)
 
-      for (let file of files) {
+      let onupload = (id) => (event) => {
-        promises.push(api.post(this.$route.path + base + file.name, file, overwrite))
+        progress[id] = (event.loaded / event.total) * 100
+
+        let sum = 0
+        for (let i = 0; i < progress.length; i++) {
+          sum += progress[i]
+        }
+
+        this.$store.commit('setProgress', Math.ceil(sum / progress.length))
+      }
+
+      for (let i = 0; i < files.length; i++) {
+        let file = files[i]
+        promises.push(api.post(this.$route.path + base + file.name, file, overwrite, onupload(i)))
+      }
+
+      let finish = () => {
+        buttons.success('upload')
+        this.$store.commit('setProgress', 0)
       }
 
       Promise.all(promises)
         .then(() => {
-          buttons.success('upload')
+          finish()
           this.$store.commit('setReload', true)
         })
         .catch(error => {
-          buttons.done('upload')
+          finish()
           this.$store.commit('showError', error)
         })
 

assets/src/css/base.css

@@ -145,3 +145,19 @@ main {
 #breadcrumbs span a {
   padding: .2em;
 }
+
+#progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  z-index: 9999999999;
+}
+
+#progress div {
+  height: 100%;
+  background-color: #40c4ff;
+  width: 0;
+  transition: .2s ease width;
+}

assets/src/store/index.js

@@ -15,6 +15,7 @@ const state = {
   staticGen: document.querySelector('meta[name="staticgen"]').getAttribute('content'),
   baseURL: document.querySelector('meta[name="base"]').getAttribute('content'),
   jwt: '',
+  progress: 0,
   schedule: '',
   loading: false,
   reload: false,

assets/src/store/mutations.js

@@ -61,6 +61,9 @@ const mutations = {
   },
   setSchedule: (state, value) => {
     state.schedule = value
+  },
+  setProgress: (state, value) => {
+    state.progress = value
   }
 }
 

assets/src/utils/api.js

@@ -56,7 +56,7 @@ export function remove (url) {
   })
 }
 
-export function post (url, content = '', overwrite = false) {
+export function post (url, content = '', overwrite = false, onupload) {
   url = removePrefix(url)
 
   return new Promise((resolve, reject) => {
@@ -64,6 +64,10 @@ export function post (url, content = '', overwrite = false) {
     request.open('POST', `${store.state.baseURL}/api/resource${url}`, true)
     request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
+    if (typeof onupload === 'function') {
+      request.upload.onprogress = onupload
+    }
+
     if (overwrite) {
       request.setRequestHeader('Action', `override`)
     }

assets/src/views/Layout.vue

@@ -1,5 +1,8 @@
 <template>
   <div>
+    <div id="progress">
+      <div v-bind:style="{ width: $store.state.progress + '%' }"></div>
+    </div>
     <site-header></site-header>
     <sidebar></sidebar>
     <main>