perf: upload preparation time

Massively improves the upload preparation time. Instead of setting file data on each file, we now accumulate all the data first and then set it in one batch via Uppy's `setState` method.
owncloud · Aug 8, 2023 · 9b73dea · 9b73dea
1 parent 56e5098
commit 9b73dea
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 44 deletions.
diff --git a/packages/web-app-files/src/HandleUpload.ts b/packages/web-app-files/src/HandleUpload.ts
@@ -93,22 +93,15 @@ export class HandleUpload extends BasePlugin {
     }
   }
 
-  /**
-   * Sets the endpoint url for a given file.
-   */
-  setEndpointUrl(fileId: string, endpoint: string) {
-    if (this._uppy.getPlugin('Tus')) {
-      this._uppy.setFileState(fileId, { tus: { endpoint } })
-      return
-    }
-    this._uppy.setFileState(fileId, { xhrUpload: { endpoint } })
+  getUploadPluginName() {
+    return this._uppy.getPlugin('Tus') ? 'tus' : 'xhrUpload'
   }
 
   /**
    * Converts the input files type UppyResources and updates the uppy upload queue
    */
   prepareFiles(files: UppyFile[]): UppyResource[] {
-    const filesToUpload = []
+    const filesToUpload: Record<string, UppyResource> = {}
 
     if (!this.currentFolder && unref(this.route)?.params?.token) {
       // public file drop
@@ -118,28 +111,31 @@ export class HandleUpload extends BasePlugin {
         if (!this._uppy.getPlugin('Tus')) {
           endpoint = urlJoin(endpoint, encodeURIComponent(file.name))
         }
-        this.setEndpointUrl(file.id, endpoint)
-        this._uppy.setFileMeta(file.id, {
+
+        file[this.getUploadPluginName()] = { endpoint }
+        file.meta = {
+          ...file.meta,
           tusEndpoint: endpoint,
           uploadId: uuid.v4()
-        })
+        }
 
-        filesToUpload.push(this._uppy.getFile(file.id))
+        filesToUpload[file.id] = file as unknown as UppyResource
       }
-      return filesToUpload
+      this._uppy.setState({ files: { ...this._uppy.getState().files, ...filesToUpload } })
+      return Object.values(filesToUpload)
     }
     const { id: currentFolderId, path: currentFolderPath } = this.currentFolder
 
     const { name, params, query } = unref(this.route)
-    const topLevelFolderIds = {}
+    const topLevelFolderIds: Record<string, string> = {}
 
     for (const file of files) {
       const relativeFilePath = file.meta.relativePath as string
       // Directory without filename
       const directory =
         !relativeFilePath || dirname(relativeFilePath) === '.' ? '' : dirname(relativeFilePath)
 
-      let topLevelFolderId
+      let topLevelFolderId: string
       if (relativeFilePath) {
         const topLevelDirectory = relativeFilePath.split('/').filter(Boolean)[0]
         if (!topLevelFolderIds[topLevelDirectory]) {
@@ -157,8 +153,9 @@ export class HandleUpload extends BasePlugin {
         endpoint = urlJoin(endpoint, encodeURIComponent(file.name))
       }
 
-      this.setEndpointUrl(file.id, endpoint)
-      this._uppy.setFileMeta(file.id, {
+      file[this.getUploadPluginName()] = { endpoint }
+      file.meta = {
+        ...file.meta,
         // file data
         name: file.name,
         mtime: (file.data as any).lastModified / 1000,
@@ -179,19 +176,20 @@ export class HandleUpload extends BasePlugin {
         routeName: name as string,
         routeDriveAliasAndItem: (params as any)?.driveAliasAndItem || '',
         routeShareId: (query as any)?.shareId || ''
-      })
+      }
 
-      filesToUpload.push(this._uppy.getFile(file.id))
+      filesToUpload[file.id] = file as unknown as UppyResource
     }
 
-    return filesToUpload
+    this._uppy.setState({ files: { ...this._uppy.getState().files, ...filesToUpload } })
+    return Object.values(filesToUpload)
   }
 
   checkQuotaExceeded(filesToUpload: UppyResource[]): boolean {
     let quotaExceeded = false
 
     const uploadSizeSpaceMapping = filesToUpload.reduce((acc, uppyResource) => {
-      let targetUploadSpace
+      let targetUploadSpace: SpaceResource
 
       if (uppyResource.meta.routeName === locationPublicLink.name) {
         return acc
@@ -338,9 +336,9 @@ export class HandleUpload extends BasePlugin {
       }
     }
 
-    let filesToRemove = []
+    let filesToRemove: string[] = []
     if (failedFolders.length) {
-      // remove file of folders that could not be created
+      // remove files of folders that could not be created
       filesToRemove = filesToUpload
         .filter((f) => failedFolders.some((r) => f.meta.relativeFolder.startsWith(r)))
         .map(({ id }) => id)
@@ -370,37 +368,26 @@ export class HandleUpload extends BasePlugin {
 
     // name conflict handling
     if (this.conflictHandlingEnabled) {
-      const confictHandler = new ResourceConflict(this.store, this.language)
-      const conflicts = confictHandler.getConflicts(filesToUpload)
+      const conflictHandler = new ResourceConflict(this.store, this.language)
+      const conflicts = conflictHandler.getConflicts(filesToUpload)
       if (conflicts.length) {
         const dashboard = document.getElementsByClassName('uppy-Dashboard')
         if (dashboard.length) {
           ;(dashboard[0] as HTMLElement).style.display = 'none'
         }
 
-        const result = await confictHandler.displayOverwriteDialog(filesToUpload, conflicts)
+        const result = await conflictHandler.displayOverwriteDialog(filesToUpload, conflicts)
         if (result.length === 0) {
           this.removeFilesFromUpload(filesToUpload)
           return this.uppyService.clearInputs()
         }
 
-        for (const file of filesToUpload) {
-          const conflictResult = result.find(({ id }) => id === file.id)
-          if (!conflictResult) {
-            this._uppy.removeFile(file.id)
-            continue
-          }
-          this._uppy.setFileMeta(file.id, conflictResult.meta)
-          this._uppy.setFileState(file.id, { name: conflictResult.name })
-          this.setEndpointUrl(
-            file.id,
-            !!this._uppy.getPlugin('Tus')
-              ? conflictResult.meta.tusEndpoint
-              : conflictResult.xhrUpload.endpoint
-          )
-        }
-
         filesToUpload = result
+        const conflictMap = result.reduce<Record<string, UppyResource>>((acc, file) => {
+          acc[file.id] = file
+          return acc
+        }, {})
+        this._uppy.setState({ files: { ...this._uppy.getState().files, ...conflictMap } })
       }
     }
 

diff --git a/packages/web-app-files/src/helpers/resource/actions/upload.ts b/packages/web-app-files/src/helpers/resource/actions/upload.ts
@@ -170,6 +170,12 @@ export class ResourceConflict extends ConflictDialog {
             `/${encodeURIComponent(newFolderName)}`
           )
         }
+        if (file.tus?.endpoint) {
+          file.tus.endpoint = file.tus.endpoint.replace(
+            new RegExp(`/${encodeURIComponent(folder)}`),
+            `/${encodeURIComponent(newFolderName)}`
+          )
+        }
       }
     }
     return files

diff --git a/packages/web-runtime/src/composables/upload/useUpload.ts b/packages/web-runtime/src/composables/upload/useUpload.ts
@@ -45,6 +45,9 @@ export interface UppyResource {
     routeDriveAliasAndItem?: string
     routeShareId?: string
   }
+  tus?: {
+    endpoint: string
+  }
   xhrUpload?: {
     endpoint: string
   }