파일을 업로드할 때 캐시에 저장하고 동영상을 스트리밍하는 과정에서도 청크 단위로 캐시에 저장하여 다음 재생에 활용하도록 개선

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/lib/client/transfer/chunkedUpload.ts

@@ -16,10 +16,6 @@ interface EncryptedChunk {
   data: ArrayBuffer;
 }
 
-const encryptChunkData = async (chunk: Blob, dataKey: CryptoKey): Promise<ArrayBuffer> => {
-  return await encryptChunk(await chunk.arrayBuffer(), dataKey);
-};
-
 const uploadEncryptedChunk = async (
   uploadId: string,
   chunkIndex: number,
@@ -40,7 +36,12 @@ export const uploadBlob = async (
   uploadId: string,
   blob: Blob,
   dataKey: CryptoKey,
-  options?: { concurrency?: number; onProgress?: (s: UploadStats) => void },
+  options?: {
+    concurrency?: number;
+    onProgress?: (s: UploadStats) => void;
+    // Receives each chunk of the plaintext before it is encrypted
+    onPlaintextChunk?: (chunkIndex: number, data: ArrayBuffer) => Promise<void>;
+  },
 ) => {
   const onProgress = options?.onProgress;
   const networkConcurrency = options?.concurrency ?? 4;
@@ -75,8 +76,9 @@ export const uploadBlob = async (
   const encryptionProducer = async () => {
     try {
       for (let i = 0; i < totalChunks; i++) {
-        const chunk = blob.slice(i * CHUNK_SIZE, (i + 1) * CHUNK_SIZE);
-        const data = await encryptChunkData(chunk, dataKey);
+        const chunk = await blob.slice(i * CHUNK_SIZE, (i + 1) * CHUNK_SIZE).arrayBuffer();
+        await options?.onPlaintextChunk?.(i, chunk);
+        const data = await encryptChunk(chunk, dataKey);
         hash.update(new Uint8Array(data));
         await queue.push({ index: i, data });
       }

src/lib/client/transfer/upload.svelte.ts

@@ -6,6 +6,7 @@ import {
   type HmacSecret,
   type MasterKey,
 } from "#lib/client/keys/index.js";
+import { createUploadFileCache } from "#lib/client/cache/index.js";
 import { readExifDateTime } from "#lib/client/media/exif.js";
 import { generateThumbnail } from "#lib/client/media/thumbnail.js";
 import { uploadBlob } from "#lib/client/transfer/chunkedUpload.js";
@@ -150,18 +151,30 @@ const requestFileUpload = limitFunction(
   ) => {
     state.status = "uploading";
 
-    const { encContentHash } = await uploadBlob(uploadId, file, dataKey, {
-      onProgress(s) {
-        state.progress = s.progress;
-        state.rate = s.rate;
-      },
-    });
+    // The file is cached while uploading, so that it doesn't have to be read again
+    const cache = createUploadFileCache(file.size);
 
-    const { file: fileId } = await trpc.upload.completeFileUpload.mutate({
-      uploadId,
-      contentHmac: fileSigned,
-      encContentHash,
-    });
+    let fileId;
+    try {
+      const { encContentHash } = await uploadBlob(uploadId, file, dataKey, {
+        onProgress(s) {
+          state.progress = s.progress;
+          state.rate = s.rate;
+        },
+        onPlaintextChunk: cache.writeChunk,
+      });
+
+      ({ file: fileId } = await trpc.upload.completeFileUpload.mutate({
+        uploadId,
+        contentHmac: fileSigned,
+        encContentHash,
+      }));
+    } catch (e) {
+      await cache.discard();
+      throw e;
+    }
+
+    await cache.commit(fileId).catch(console.error);
 
     if (thumbnailBuffer) {
       try {