Check for tus support and push files into array on progress

apps/files/src/components/FileUpload.vue

@@ -9,14 +9,16 @@
         aria-labelledby="files-file-upload-button"
         name="file"
         multiple
-        @change="$_ocUpload_addFileToQue"
+        @change="uploadFiles"
       />
     </div>
   </oc-nav-item>
 </template>
 
 <script>
+import { mapActions } from 'vuex'
 import Mixins from '../mixins'
+const tus = () => 'tus-js-client'
 
 export default {
   mixins: [Mixins],
@@ -37,8 +39,32 @@ export default {
     requestType: { type: String, default: 'PUT' }
   },
   methods: {
+    ...mapActions(['showMessage']),
+
     triggerUpload() {
       this.$refs.input.click()
+    },
+
+    uploadFiles(event) {
+      // TODO: Need more testing if this check really works
+      if (tus.isSupported) {
+        for (const file of event.target.files) {
+          this.uploadChunkedFile(file).catch(error => {
+            // TODO: Collect all failed uploads into an array
+            // and display one error message not to spam them
+            // TODO: Use proper error title
+            this.showMessage({
+              title: this.$gettext('Uploaded failed'),
+              desc: error.message,
+              status: 'danger'
+            })
+          })
+        }
+
+        return
+      }
+
+      this.$_ocUpload_addFileToQue(event)
     }
   }
 }

src/plugins/upload.js

@@ -1,29 +1,46 @@
-const tus = require('tus-js-client')
+import tus from 'tus-js-client'
 
 export default {
   install(Vue) {
     Vue.mixin({
+      data() {
+        return {
+          chunkedUploadFilesInProgress: []
+        }
+      },
+
       methods: {
         uploadChunkedFile(file) {
           const upload = new tus.Upload(file, {
             endpoint: this.$client.helpers._webdavUrl,
+            headers: this.$client.helpers.buildHeaders(),
             retryDelays: [0, 3000, 5000, 10000, 20000],
             metadata: {
-              filename: file.name,
-              filetype: file.type
+              name: file.name,
+              type: file.type,
+              size: file.size
             },
 
             onError: error => {
-              console.log('Failed because:', error)
+              console.error(error)
             },
 
             onProgress: (bytesUploaded, bytesTotal) => {
               const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2)
-              console.log(bytesUploaded, bytesTotal, percentage + '%')
+
+              for (let fileInProgress of this.chunkedUploadFilesInProgress) {
+                if (fileInProgress.name === file.name) {
+                  fileInProgress = { name: file.name, percentage }
+
+                  return
+                }
+              }
+
+              this.chunkedUploadFilesInProgress.push({ name: file.name, percentage })
             },
 
             onSuccess: () => {
-              console.log('File %s uploaded to %s', upload.file.name, upload.url)
+              Promise.resolve(`File ${upload.file.name} was successfully uploaded`)
             }
           })