파일 업로드 로직 리팩토링 2

src/lib/modules/file/upload.svelte.ts

@@ -50,7 +50,14 @@ export const clearUploadedFiles = () => {
 };
 
 const requestDuplicateFileScan = limitFunction(
-  async (file: File, hmacSecret: HmacSecret, onDuplicate: () => Promise<boolean>) => {
+  async (
+    state: FileUploadState,
+    file: File,
+    hmacSecret: HmacSecret,
+    onDuplicate: () => Promise<boolean>,
+  ) => {
+    state.status = "encryption-pending";
+
     const hmacResult = await signMessageHmac(file, hmacSecret.secret);
     const fileSigned = encodeToBase64(hmacResult);
     const files = await trpc().file.listByHash.query({
@@ -98,16 +105,18 @@ const extractExifDateTime = (fileBuffer: ArrayBuffer) => {
   return new Date(utcDate - offsetMs);
 };
 
-const requestFileUpload2 = async (
+interface FileMetadata {
-  state: FileUploadState,
-  file: Blob,
-  fileSigned: string,
-  fileMetadata: {
   parentId: "root" | number;
   name: string;
   createdAt?: Date;
   lastModifiedAt: Date;
-  },
+}
+
+const requestFileMetadataEncryption = limitFunction(
+  async (
+    state: FileUploadState,
+    file: Blob,
+    fileMetadata: FileMetadata,
     masterKey: MasterKey,
     hmacSecret: HmacSecret,
   ) => {
@@ -119,7 +128,8 @@ const requestFileUpload2 = async (
     const [nameEncrypted, createdAtEncrypted, lastModifiedAtEncrypted, thumbnailBuffer] =
       await Promise.all([
         encryptString(fileMetadata.name, dataKey),
-      fileMetadata.createdAt && encryptString(fileMetadata.createdAt.getTime().toString(), dataKey),
+        fileMetadata.createdAt &&
+          encryptString(fileMetadata.createdAt.getTime().toString(), dataKey),
         encryptString(fileMetadata.lastModifiedAt.getTime().toString(), dataKey),
         generateThumbnail(file).then((blob) => blob?.arrayBuffer()),
       ]);
@@ -140,6 +150,22 @@ const requestFileUpload2 = async (
       lastModifiedAtIv: lastModifiedAtEncrypted.iv,
     });
 
+    state.status = "upload-pending";
+    return { uploadId, thumbnailBuffer, dataKey, dataKeyVersion };
+  },
+  { concurrency: 4 },
+);
+
+const requestFileUpload = limitFunction(
+  async (
+    state: FileUploadState,
+    uploadId: string,
+    file: Blob,
+    fileSigned: string,
+    thumbnailBuffer: ArrayBuffer | undefined,
+    dataKey: CryptoKey,
+    dataKeyVersion: Date,
+  ) => {
     state.status = "uploading";
 
     await uploadBlob(uploadId, file, dataKey, {
@@ -155,6 +181,7 @@ const requestFileUpload2 = async (
     });
 
     if (thumbnailBuffer) {
+      try {
         const { uploadId } = await trpc().upload.startFileThumbnailUpload.mutate({
           file: fileId,
           dekVersion: dataKeyVersion,
@@ -163,12 +190,16 @@ const requestFileUpload2 = async (
         await uploadBlob(uploadId, new Blob([thumbnailBuffer]), dataKey);
 
         await trpc().upload.completeFileThumbnailUpload.mutate({ uploadId });
+      } catch (e) {
+        console.error(e);
+      }
     }
 
     state.status = "uploaded";
-
+    return { fileId };
-  return { fileId, thumbnailBuffer };
+  },
-};
+  { concurrency: 1 },
+);
 
 export const uploadFile = async (
   file: File,
@@ -185,51 +216,44 @@ export const uploadFile = async (
   const state = uploadingFiles.at(-1)!;
 
   return await scheduler.schedule(file.size, async () => {
-    state.status = "encryption-pending";
-
     try {
-      const { fileSigned } = await requestDuplicateFileScan(file, hmacSecret, onDuplicate);
+      const { fileSigned } = await requestDuplicateFileScan(state, file, hmacSecret, onDuplicate);
+
       if (!fileSigned) {
         state.status = "canceled";
         uploadingFiles = uploadingFiles.filter((file) => file !== state);
         return;
       }
 
+      let fileBuffer;
       const fileType = getFileType(file);
-      if (fileType.startsWith("image/")) {
+      const fileMetadata: FileMetadata = {
-        const fileBuffer = await file.arrayBuffer();
-        const fileCreatedAt = extractExifDateTime(fileBuffer);
-
-        const { fileId, thumbnailBuffer } = await requestFileUpload2(
-          state,
-          new Blob([fileBuffer], { type: fileType }),
-          fileSigned,
-          {
         parentId,
         name: file.name,
-            createdAt: fileCreatedAt,
         lastModifiedAt: new Date(file.lastModified),
-          },
+      };
-          masterKey,
+
-          hmacSecret,
+      if (fileType.startsWith("image/")) {
+        fileBuffer = await file.arrayBuffer();
+        fileMetadata.createdAt = extractExifDateTime(fileBuffer);
+      }
+
+      const blob = new Blob([file], { type: fileType });
+
+      const { uploadId, thumbnailBuffer, dataKey, dataKeyVersion } =
+        await requestFileMetadataEncryption(state, blob, fileMetadata, masterKey, hmacSecret);
+
+      const { fileId } = await requestFileUpload(
+        state,
+        uploadId,
+        blob,
+        fileSigned,
+        thumbnailBuffer,
+        dataKey,
+        dataKeyVersion,
       );
 
       return { fileId, fileBuffer, thumbnailBuffer };
-      } else {
-        const { fileId, thumbnailBuffer } = await requestFileUpload2(
-          state,
-          file,
-          fileSigned,
-          {
-            parentId,
-            name: file.name,
-            lastModifiedAt: new Date(file.lastModified),
-          },
-          masterKey,
-          hmacSecret,
-        );
-        return { fileId, thumbnailBuffer };
-      }
     } catch (e) {
       state.status = "error";
       throw e;

src/routes/(fullscreen)/settings/migration/+page.svelte

@@ -18,7 +18,7 @@
         info,
         state: getMigrationState(info.id),
       }))
-      .filter((file) => file.state?.status !== "completed"),
+      .filter((file) => file.state?.status !== "uploaded"),
   );
 
   const migrateAllFiles = () => {

src/routes/(fullscreen)/settings/migration/File.svelte

@@ -1,12 +1,9 @@
 <script module lang="ts">
   const subtexts = {
     queued: "대기 중",
-    "download-pending": "다운로드를 기다리는 중",
     downloading: "다운로드하는 중",
-    "encryption-pending": "암호화를 기다리는 중",
-    encrypting: "암호화하는 중",
     "upload-pending": "업로드를 기다리는 중",
-    completed: "완료",
+    uploaded: "",
     error: "실패",
   } as const;
 </script>

src/routes/(fullscreen)/settings/migration/service.svelte.ts

@@ -9,13 +9,10 @@ import { trpc } from "$trpc/client";
 
 export type MigrationStatus =
   | "queued"
-  | "download-pending"
   | "downloading"
-  | "encryption-pending"
-  | "encrypting"
   | "upload-pending"
   | "uploading"
-  | "completed"
+  | "uploaded"
   | "error";
 
 export interface MigrationState {
@@ -38,13 +35,13 @@ export const getMigrationState = (fileId: number) => {
 
 export const clearMigrationStates = () => {
   for (const [id, state] of states) {
-    if (state.status === "completed" || state.status === "error") {
+    if (state.status === "uploaded" || state.status === "error") {
       states.delete(id);
     }
   }
 };
 
-const uploadMigrationChunks = limitFunction(
+const requestFileUpload = limitFunction(
   async (state: MigrationState, fileId: number, fileBuffer: ArrayBuffer, dataKey: CryptoKey) => {
     state.status = "uploading";
 
@@ -61,6 +58,7 @@ const uploadMigrationChunks = limitFunction(
     });
 
     await trpc().upload.completeMigrationUpload.mutate({ uploadId });
+    state.status = "uploaded";
   },
   { concurrency: 1 },
 );
@@ -87,18 +85,11 @@ export const requestFileMigration = async (fileInfo: FileInfo) => {
 
     await scheduler.schedule(
       async () => {
-        state.status = "download-pending";
         state.status = "downloading";
         fileBuffer = await requestFileDownload(fileInfo.id, dataKey, true);
         return fileBuffer.byteLength;
       },
-      async () => {
+      () => requestFileUpload(state, fileInfo.id, fileBuffer!, dataKey),
-        state.status = "encryption-pending";
-
-        await uploadMigrationChunks(state, fileInfo.id, fileBuffer!, dataKey);
-
-        state.status = "completed";
-      },
     );
   } catch (e) {
     state.status = "error";

src/routes/(fullscreen)/settings/thumbnail/service.ts

@@ -35,7 +35,7 @@ const generateThumbnail = limitFunction(
   async (fileId: number, fileBuffer: ArrayBuffer, fileType: string, dataKey: CryptoKey) => {
     statuses.set(fileId, "generating");
 
-    const thumbnail = await doGenerateThumbnail(fileBuffer, fileType);
+    const thumbnail = await doGenerateThumbnail(new Blob([fileBuffer], { type: fileType }));
     if (!thumbnail) return null;
 
     const thumbnailBuffer = await thumbnail.arrayBuffer();