Rebase&refactor

Author: pascalwengerter

packages/web-app-files/package.json

@@ -4,7 +4,11 @@
   "description": "ownCloud web files",
   "license": "AGPL-3.0",
   "dependencies": {
-    "copy-to-clipboard": "^3.3.1",
-    "vue2-dropzone": "^3.6.0"
+    "@uppy/core": "^2.1.4",
+    "@uppy/drop-target": "^1.1.1",
+    "@uppy/status-bar": "^2.1.2",
+    "@uppy/tus": "^2.1.2",
+    "@uppy/xhr-upload": "^2.0.7",
+    "copy-to-clipboard": "^3.3.1"
   }
 }

packages/web-app-files/src/App.vue

@@ -22,7 +22,7 @@
 </template>
 <script>
 import Mixins from './mixins'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 import SideBar from './components/SideBar/SideBar.vue'
 
 export default {
@@ -31,7 +31,6 @@ export default {
   },
   mixins: [Mixins],
   computed: {
-    ...mapGetters('Files', ['dropzone']),
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
 
     showSidebar() {
@@ -104,8 +103,4 @@ main {
   grid-area: main;
   z-index: 0;
 }
-
-#files-upload-progress {
-  grid-area: upload;
-}
 </style>

packages/web-app-files/src/components/AppBar/CreateAndUpload.vue

@@ -70,15 +70,10 @@
         <translate>New folder</translate>
       </oc-button>
     </template>
-    <file-drop
-      v-if="!uploadOrFileCreationBlocked"
-      :root-path="currentPath"
-      :path="currentPath"
-      :headers="headers"
-      @success="onFileSuccess"
-      @error="onFileError"
-      @progress="onFileProgress"
-    />
+    <!-- PoC since the components don't get recognized on 
+    initial page rendering as (hidden) OcDrop elements -->
+    <folder-upload />
+    <file-upload />
     <oc-button
       id="upload-menu-btn"
       key="upload-menu-btn-enabled"
@@ -99,23 +94,10 @@
     >
       <oc-list id="upload-list">
         <li>
-          <folder-upload
-            :root-path="currentPath"
-            :path="currentPath"
-            :headers="headers"
-            @success="onFileSuccess"
-            @error="onFileError"
-            @progress="onFileProgress"
-          />
+          <folder-upload />
         </li>
         <li>
-          <file-upload
-            :path="currentPath"
-            :headers="headers"
-            @success="onFileSuccess"
-            @error="onFileError"
-            @progress="onFileProgress"
-          />
+          <file-upload />
         </li>
       </oc-list>
     </oc-drop>
@@ -125,26 +107,29 @@
 <script>
 import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
 import pathUtil from 'path'
+import Uppy from '@uppy/core'
+import Tus from '@uppy/tus'
+import XHRUpload from '@uppy/xhr-upload'
+import StatusBar from '@uppy/status-bar'
+import DropTarget from '@uppy/drop-target'
 
-import Mixins from '../../mixins'
 import MixinFileActions, { EDITOR_MODE_CREATE } from '../../mixins/fileActions'
 import { buildResource, buildWebDavFilesPath, buildWebDavSpacesPath } from '../../helpers/resources'
 import { isLocationPublicActive, isLocationSpacesActive } from '../../router'
 import { useActiveLocation } from '../../composables'
 
 import { DavProperties, DavProperty } from 'web-pkg/src/constants'
 
-import FileDrop from './Upload/FileDrop.vue'
+// TODO: Simplify to one UploadButton component and fill from here
 import FileUpload from './Upload/FileUpload.vue'
 import FolderUpload from './Upload/FolderUpload.vue'
 
 export default {
   components: {
-    FileDrop,
     FileUpload,
     FolderUpload
   },
-  mixins: [Mixins, MixinFileActions],
+  mixins: [MixinFileActions],
   setup() {
     return {
       isPersonalLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-personal-home'),
@@ -256,17 +241,136 @@ export default {
       )
     }
   },
+  mounted() {
+    const chunkSize = this.configuration.uploadChunkSize
+    // if (this.currentFolder.isChunkedUploadSupported) {
+    //   let chunkSize = this.configuration.uploadChunkSize
+    //   if (this.capabilities.files.tus_support.max_chunk_size > 0) {
+    //     if (
+    //       chunkSize === null ||
+    //       chunkSize === 0 ||
+    //       chunkSize > this.capabilities.files.tus_support.max_chunk_size
+    //     ) {
+    //       chunkSize = this.capabilities.files.tus_support.max_chunk_size
+    //     }
+    //   }
+    // }
+
+    const client = this.$client
+    // might make sense to initialize an Uppy instance in the runtime?
+    // todo: set debug to false
+    const uppy = new Uppy({ debug: true, autoProceed: true })
+    const uploadPath = client.files.getFileUrl(this.currentPath)
+    const headers = client.helpers.buildHeaders()
+
+    if (this.capabilities.files.tus_support) {
+      delete headers['OCS-APIREQUEST']
+      uppy.use(Tus, {
+        endpoint: uploadPath,
+        headers: headers,
+        chunkSize: chunkSize || Infinity,
+        removeFingerprintOnSuccess: true,
+        overridePatchMethod: !!this.capabilities.files.tus_support.http_method_override,
+        retryDelays: [0, 3000, 5000, 10000, 20000]
+      })
+    } else {
+      uppy.use(XHRUpload, {
+        endpoint: uploadPath,
+        method: 'put',
+        headers: headers
+      })
+    }
+
+    // upload button handling (files & folders separately)
+    // doesn't recognize elements yet since they're tippy children
+    const uploadInputTarget = document.querySelectorAll('.upload-input-target')
+
+    uploadInputTarget.forEach((item) => {
+      item.addEventListener('change', (event) => {
+        const files = Array.from(event.target.files)
+
+        files.forEach((file) => {
+          try {
+            console.log('file', file)
+            uppy.addFile({
+              source: 'file input',
+              name: file.name,
+              type: file.type,
+              data: file
+            })
+          } catch (err) {
+            if (err.isRestriction) {
+              // handle restrictions
+              console.log('Restriction error:', err)
+            } else {
+              // handle other errors
+              console.error(err)
+            }
+          }
+        })
+      })
+    })
+
+    // upload via drag&drop handling
+    uppy.use(DropTarget, {
+      target: '#files-view'
+    })
+
+    uppy.on('upload-error', (file, error, response) => {
+      console.log('error with file:', file.id)
+      console.log('error message:', error)
+      this.onFileError(error.toString())
+    })
+
+    uppy.on('file-removed', () => {
+      uploadInputTarget.forEach((item) => {
+        item.value = ''
+      })
+    })
+
+    uppy.on('complete', (result) => {
+      result.successful.forEach((file) => {
+        this.onFileSuccess(file.data)
+      })
+      uploadInputTarget.forEach((item) => {
+        item.value = ''
+      })
+
+      console.log('successful files:', result.successful)
+      console.log('failed files:', result.failed)
+    })
+
+    uppy.use(StatusBar, {
+      id: 'StatusBar',
+      target: '#files-app-bar',
+      hideAfterFinish: true,
+      showProgressDetails: true,
+      hideUploadButton: false,
+      hideRetryButton: false,
+      hidePauseResumeButton: false,
+      hideCancelButton: false,
+      doneButtonHandler: null,
+      locale: {
+        // TODO: Uppy&l10n research
+      }
+    })
+  },
+
+  beforeDestroy() {
+    // maybe bad that we close uppy this early,
+    // eventually on rerender even?
+    this.uppy.close()
+  },
   methods: {
     ...mapActions('Files', [
       'loadPreview',
       'updateFileProgress',
-      'removeFilesFromTrashbin',
-      'loadIndicators'
+      'loadIndicators',
+      'setFileSelection'
     ]),
     ...mapActions(['openFile', 'showMessage', 'createModal', 'setModalInputErrorMessage']),
     ...mapMutations('Files', [
       'UPSERT_RESOURCE',
-      'SET_HIDDEN_FILES_VISIBILITY',
       'REMOVE_FILE',
       'REMOVE_FILE_FROM_SEARCHED',
       'SET_FILE_SELECTION',