Use 'uploadDataDuringCreation' option when uploading via tus

changelog/unreleased/bugfix-upload-meta-serialization

@@ -0,0 +1,6 @@
+Bugfix: Upload meta data serialization
+
+We've fixed a bug where meta properties of uploading resources could not be serialized, resulting in unnecessary network requests.
+
+https://github.com/owncloud/web/pull/6846
+https://github.com/owncloud/web/issues/6819

changelog/unreleased/enhancement-upload-data-during-creation

@@ -0,0 +1,6 @@
+Enhancement: Upload data during creation
+
+Uploading via tus now uses the `uploadDataDuringCreation` option which saves up one request.
+
+https://github.com/owncloud/web/pull/7111
+https://github.com/owncloud/web/issues/7066

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

@@ -673,11 +673,11 @@ export default defineComponent({
       const uploadSizeSpaceMapping = uppyResources.reduce((acc, uppyResource) => {
         let targetUploadSpace
 
-        if (uppyResource.meta.route.params?.storage === 'home') {
+        if (uppyResource.meta.routeName === 'files-spaces-personal') {
           targetUploadSpace = this.spaces.find((space) => space.driveType === 'personal')
         } else {
           targetUploadSpace = this.spaces.find(
-            (space) => space.id === uppyResource.meta.route?.params?.storageId
+            (space) => space.id === uppyResource.meta.routeStorageId
           )
         }
 

packages/web-app-files/src/composables/upload/useUploadHelpers.ts

@@ -226,11 +226,16 @@ const inputFilesToUppyFiles = ({
           currentFolder,
           relativeFolder: directory,
           relativePath: relativeFilePath, // uppy needs this property to be named relativePath
-          route: fileRoute,
           tusEndpoint,
           webDavBasePath: unref(webDavBasePath), // WebDAV base path where the files will be uploaded to
           uploadId: uuid.v4(),
-          topLevelFolderId
+          topLevelFolderId,
+          routeName: fileRoute.name,
+          routeItem: fileRoute.params?.item || '',
+          routeShareName: (fileRoute.params as any)?.shareName || '',
+          routeShareId: (fileRoute.query as any)?.shareId || '',
+          routeStorage: (fileRoute.params as any)?.storage || '',
+          routeStorageId: (fileRoute.params as any)?.storageId || ''
         }
       })
     }

packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.js

@@ -176,11 +176,7 @@ describe('CreateAndUpload component', () => {
               size: 1001
             },
             meta: {
-              route: {
-                params: {
-                  storage: 'home'
-                }
-              }
+              routeName: 'files-spaces-personal'
             }
           }
         ])

packages/web-pkg/src/composables/capability/useCapability.ts

@@ -43,3 +43,7 @@ export const useCapabilityFilesTusSupportMaxChunkSize = createCapabilityComposab
   'files.tus_support.max_chunk_size',
   0
 )
+export const useCapabilityFilesTusExtension = createCapabilityComposable<string>(
+  'files.tus_support.extension',
+  ''
+)

packages/web-runtime/src/components/UploadInfo.vue

@@ -343,7 +343,7 @@ export default {
       } else {
         this.uploads[file.meta.uploadId].path = `${file.meta.currentFolder}${file.name}`
       }
-      this.uploads[file.meta.uploadId].targetRoute = file.meta.route
+      this.uploads[file.meta.uploadId].targetRoute = this.buildRouteFromUppyResource(file)
 
       if (!file.isFolder) {
         this.uploads[file.meta.uploadId].status = 'success'
@@ -426,6 +426,24 @@ export default {
     parentFolderLink(file) {
       return this.createFolderLink(path.dirname(file.path), file.storageId, file.targetRoute)
     },
+    buildRouteFromUppyResource(resource) {
+      if (!resource.meta.routeName) {
+        return null
+      }
+
+      return {
+        name: resource.meta.routeName,
+        query: {
+          shareId: resource.meta.routeShareId
+        },
+        params: {
+          item: resource.meta.routeItem,
+          shareName: resource.meta.routeShareName,
+          storage: resource.meta.routeStorage,
+          storageId: resource.meta.routeStorageId
+        }
+      }
+    },
     defaultParentFolderName(file) {
       const { targetRoute } = file
       // FIXME: use isLocationSpacesActive(), but it currently lies in the files app

packages/web-runtime/src/composables/upload/useUpload.ts

@@ -1,5 +1,6 @@
 import { ClientService } from 'web-pkg/src/services'
 import {
+  useCapabilityFilesTusExtension,
   useCapabilityFilesTusSupportHttpMethodOverride,
   useCapabilityFilesTusSupportMaxChunkSize,
   useClientService,
@@ -9,7 +10,6 @@ import { computed, Ref, unref, watch } from '@vue/composition-api'
 import { useActiveLocation } from 'files/src/composables'
 import { isLocationPublicActive } from 'files/src/router'
 import { UppyService } from '../../services/uppyService'
-import { Location } from 'vue-router/types/router'
 import * as uuid from 'uuid'
 
 export interface UppyResource {
@@ -19,14 +19,20 @@ export interface UppyResource {
   type: string
   data: Blob
   meta: {
+    // must only contain primitive types because the properties can't be serialized otherwise!
     currentFolder: string
     relativeFolder: string
     relativePath: string
-    route: Location
     tusEndpoint: string
     webDavBasePath: string
     uploadId: string
     topLevelFolderId?: string
+    routeName?: string
+    routeItem?: string
+    routeShareName?: string
+    routeShareId?: string
+    routeStorage?: string
+    routeStorageId?: string
   }
 }
 
@@ -48,6 +54,7 @@ export function useUpload(options: UploadOptions): UploadResult {
 
   const tusHttpMethodOverride = useCapabilityFilesTusSupportHttpMethodOverride()
   const tusMaxChunkSize = useCapabilityFilesTusSupportMaxChunkSize()
+  const tusExtension = useCapabilityFilesTusExtension()
   const uploadChunkSize = computed((): number => store.getters.configuration.uploadChunkSize)
 
   const headers = computed((): { [key: string]: string } => {
@@ -73,6 +80,7 @@ export function useUpload(options: UploadOptions): UploadResult {
         tusMaxChunkSize: unref(tusMaxChunkSize),
         uploadChunkSize: unref(uploadChunkSize),
         tusHttpMethodOverride: unref(tusHttpMethodOverride),
+        tusExtension: unref(tusExtension),
         headers: unref(headers)
       }
     }
@@ -152,9 +160,13 @@ const createDirectoryTree = ({
           type: 'folder',
           meta: {
             relativeFolder: createdSubFolders,
-            route: file.meta.route,
             currentFolder: file.meta.currentFolder,
-            uploadId
+            uploadId,
+            routeName: file.meta.routeName,
+            routeItem: file.meta.routeItem,
+            routeShareName: file.meta.routeShareName,
+            routeStorage: file.meta.routeStorage,
+            routeStorageId: file.meta.routeStorageId
           }
         }
 

packages/web-runtime/src/services/uppyService.ts

@@ -34,24 +34,29 @@ export class UppyService {
     tusMaxChunkSize,
     uploadChunkSize,
     tusHttpMethodOverride,
+    tusExtension,
     headers
   }: {
     tusMaxChunkSize: number
     uploadChunkSize: number
     tusHttpMethodOverride: boolean
+    tusExtension: string
     headers: { [key: string]: string }
   }) {
     const chunkSize =
       tusMaxChunkSize > 0 && uploadChunkSize !== Infinity
         ? Math.max(tusMaxChunkSize, uploadChunkSize)
         : uploadChunkSize
 
+    const uploadDataDuringCreation = tusExtension.includes('creation-with-upload')
+
     const tusPluginOptions = {
       headers: headers,
       chunkSize: chunkSize,
       removeFingerprintOnSuccess: true,
       overridePatchMethod: !!tusHttpMethodOverride,
-      retryDelays: [0, 500, 1000]
+      retryDelays: [0, 500, 1000],
+      uploadDataDuringCreation
     }
 
     const xhrPlugin = this.uppy.getPlugin('XHRUpload')