썸네일 설정 페이지 완성

src/lib/modules/file/upload.ts

@@ -94,7 +94,6 @@ const generateThumbnail = async (file: File, fileType: string) => {
     }
     return null;
   } catch {
-    // TODO: Error handling
     return null;
   } finally {
     if (url) {

src/lib/services/file.ts

@@ -1,9 +1,22 @@
 import { callGetApi } from "$lib/hooks";
 import { decryptData } from "$lib/modules/crypto";
-import { storeFileThumbnail } from "$lib/modules/file";
+import { getFileCache, storeFileCache, downloadFile, storeFileThumbnail } from "$lib/modules/file";
 import { getThumbnailUrl } from "$lib/modules/thumbnail";
 import type { FileThumbnailInfoResponse } from "$lib/server/schemas";
 
+export const requestFileDownload = async (
+  fileId: number,
+  fileEncryptedIv: string,
+  dataKey: CryptoKey,
+) => {
+  const cache = await getFileCache(fileId);
+  if (cache) return cache;
+
+  const fileBuffer = await downloadFile(fileId, fileEncryptedIv, dataKey);
+  storeFileCache(fileId, fileBuffer); // Intended
+  return fileBuffer;
+};
+
 export const requestFileThumbnailDownload = async (fileId: number, dataKey: CryptoKey) => {
   let res = await callGetApi(`/api/file/${fileId}/thumbnail`);
   if (!res.ok) return null;

src/routes/(fullscreen)/file/[id]/service.ts

@@ -1,21 +1,8 @@
 import { callPostApi } from "$lib/hooks";
-import { getFileCache, storeFileCache, downloadFile } from "$lib/modules/file";
 import type { CategoryFileAddRequest } from "$lib/server/schemas";
 
 export { requestCategoryCreation, requestFileRemovalFromCategory } from "$lib/services/category";
-
+export { requestFileDownload } from "$lib/services/file";
-export const requestFileDownload = async (
-  fileId: number,
-  fileEncryptedIv: string,
-  dataKey: CryptoKey,
-) => {
-  const cache = await getFileCache(fileId);
-  if (cache) return cache;
-
-  const fileBuffer = await downloadFile(fileId, fileEncryptedIv, dataKey);
-  storeFileCache(fileId, fileBuffer); // Intended
-  return fileBuffer;
-};
 
 export const requestFileAdditionToCategory = async (fileId: number, categoryId: number) => {
   const res = await callPostApi<CategoryFileAddRequest>(`/api/category/${categoryId}/file/add`, {

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

@@ -1,52 +1,35 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { get, type Writable } from "svelte/store";
+  import { get } from "svelte/store";
   import { goto } from "$app/navigation";
   import { BottomDiv, Button, FullscreenDiv } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
-  import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
+  import { getFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
   import {
-    requestFileDownload,
+    persistentStates,
-    generateThumbnail as generateThumbnailInternal,
+    getGenerationStatus,
-    requestThumbnailUpload,
+    requestFileThumbnailGeneration,
-  } from "./service";
+  } from "./service.svelte";
 
   let { data } = $props();
 
-  let fileInfos: Writable<FileInfo | null>[] | undefined = $state();
-
-  const generateThumbnail = async (fileInfo: FileInfo) => {
-    // TODO: Error handling
-
-    const file = await requestFileDownload(fileInfo.id, fileInfo.contentIv!, fileInfo.dataKey!);
-    const thumbnail = await generateThumbnailInternal(file, fileInfo.contentType);
-
-    // TODO: Error handling
-    await requestThumbnailUpload(
-      fileInfo.id,
-      await thumbnail!.arrayBuffer(),
-      fileInfo.dataKey!,
-      fileInfo.dataKeyVersion!,
-    );
-  };
-
   const generateAllThumbnails = async () => {
-    if (!fileInfos) return;
+    persistentStates.files.forEach(({ info }) => {
-
+      const fileInfo = get(info);
-    await Promise.all(
+      if (fileInfo) {
-      fileInfos.map(async (fileInfoStore) => {
+        requestFileThumbnailGeneration(fileInfo);
-        const fileInfo = get(fileInfoStore);
+      }
-        if (fileInfo) {
+    });
-          await generateThumbnail(fileInfo);
-        }
-      }),
-    );
   };
 
   onMount(() => {
-    fileInfos = data.files.map((file) => getFileInfo(file, $masterKeyStore?.get(1)?.key!));
+    persistentStates.files = data.files.map((fileId) => ({
+      id: fileId,
+      info: getFileInfo(fileId, $masterKeyStore?.get(1)?.key!),
+      status: getGenerationStatus(fileId),
+    }));
   });
 </script>
 
@@ -56,19 +39,20 @@
 
 <TopBar title="썸네일" />
 <FullscreenDiv>
-  {#if fileInfos && fileInfos.length > 0}
+  {#if persistentStates.files.length > 0}
     <div class="space-y-4 pb-4">
       <div class="space-y-1 break-keep text-gray-800">
         <p>
-          {fileInfos.length}개 파일의 썸네일이 존재하지 않아요.
+          {persistentStates.files.length}개 파일의 썸네일이 존재하지 않아요.
         </p>
       </div>
       <div class="space-y-2">
-        {#each fileInfos as fileInfo}
+        {#each persistentStates.files as { info, status }}
           <File
-            info={fileInfo}
+            {info}
+            generationStatus={status}
             onclick={({ id }) => goto(`/file/${id}`)}
-            onGenerateThumbnailClick={generateThumbnail}
+            onGenerateThumbnailClick={requestFileThumbnailGeneration}
           />
         {/each}
       </div>

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

@@ -1,9 +1,20 @@
+<script module lang="ts">
+  const subtexts = {
+    "generation-pending": "준비 중",
+    generating: "생성하는 중",
+    "upload-pending": "업로드를 기다리는 중",
+    uploading: "업로드하는 중",
+    error: "실패",
+  } as const;
+</script>
+
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import { ActionEntryButton } from "$lib/components/atoms";
   import { DirectoryEntryLabel } from "$lib/components/molecules";
   import type { FileInfo } from "$lib/modules/filesystem";
   import { formatDateTime } from "$lib/modules/util";
+  import type { GenerationStatus } from "./service.svelte";
 
   import IconCamera from "~icons/material-symbols/camera";
 
@@ -11,9 +22,10 @@
     info: Writable<FileInfo | null>;
     onclick: (selectedFile: FileInfo) => void;
     onGenerateThumbnailClick: (selectedFile: FileInfo) => void;
+    generationStatus?: Writable<GenerationStatus>;
   }
 
-  let { info, onclick, onGenerateThumbnailClick }: Props = $props();
+  let { info, onclick, onGenerateThumbnailClick, generationStatus }: Props = $props();
 </script>
 
 {#if $info}
@@ -24,10 +36,10 @@
     onActionButtonClick={() => onGenerateThumbnailClick($info)}
     actionButtonClass="text-gray-800"
   >
-    <DirectoryEntryLabel
+    {@const subtext =
-      type="file"
+      $generationStatus && $generationStatus !== "uploaded"
-      name={$info.name}
+        ? subtexts[$generationStatus]
-      subtext={formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
+        : formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
-    />
+    <DirectoryEntryLabel type="file" name={$info.name} {subtext} />
   </ActionEntryButton>
 {/if}

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

@@ -0,0 +1,129 @@
+import { limitFunction } from "p-limit";
+import { get, writable, type Writable } from "svelte/store";
+import { encryptData } from "$lib/modules/crypto";
+import { storeFileThumbnail } from "$lib/modules/file";
+import type { FileInfo } from "$lib/modules/filesystem";
+import { generateImageThumbnail, generateVideoThumbnail } from "$lib/modules/thumbnail";
+import type { FileThumbnailUploadRequest } from "$lib/server/schemas";
+import { requestFileDownload } from "$lib/services/file";
+
+export type GenerationStatus =
+  | "generation-pending"
+  | "generating"
+  | "upload-pending"
+  | "uploading"
+  | "uploaded"
+  | "error";
+
+interface File {
+  id: number;
+  info: Writable<FileInfo | null>;
+  status?: Writable<GenerationStatus>;
+}
+
+const workingFiles = new Map<number, Writable<GenerationStatus>>();
+
+export const persistentStates = $state({
+  files: [] as File[],
+});
+
+export const getGenerationStatus = (fileId: number): Writable<GenerationStatus> | undefined => {
+  return workingFiles.get(fileId);
+};
+
+const generateThumbnail = limitFunction(
+  async (
+    status: Writable<GenerationStatus>,
+    fileBuffer: ArrayBuffer,
+    fileType: string,
+    dataKey: CryptoKey,
+  ) => {
+    let url, thumbnail;
+    status.set("generating");
+
+    try {
+      if (fileType === "image/heic") {
+        const { default: heic2any } = await import("heic2any");
+        url = URL.createObjectURL(
+          (await heic2any({
+            blob: new Blob([fileBuffer], { type: fileType }),
+            toType: "image/png",
+          })) as Blob,
+        );
+        thumbnail = await generateImageThumbnail(url);
+      } else if (fileType.startsWith("image/")) {
+        url = URL.createObjectURL(new Blob([fileBuffer], { type: fileType }));
+        thumbnail = await generateImageThumbnail(url);
+      } else if (fileType.startsWith("video/")) {
+        url = URL.createObjectURL(new Blob([fileBuffer], { type: fileType }));
+        thumbnail = await generateVideoThumbnail(url);
+      } else {
+        status.set("error");
+        return null;
+      }
+
+      const thumbnailBuffer = await thumbnail.arrayBuffer();
+      const thumbnailEncrypted = await encryptData(thumbnailBuffer, dataKey);
+      status.set("upload-pending");
+      return { plaintext: thumbnailBuffer, ...thumbnailEncrypted };
+    } catch {
+      status.set("error");
+      return null;
+    } finally {
+      if (url) {
+        URL.revokeObjectURL(url);
+      }
+    }
+  },
+  { concurrency: 4 },
+);
+
+const requestThumbnailUpload = limitFunction(
+  async (
+    status: Writable<GenerationStatus>,
+    fileId: number,
+    dataKeyVersion: Date,
+    thumbnail: { plaintext: ArrayBuffer; ciphertext: ArrayBuffer; iv: string },
+  ) => {
+    status.set("uploading");
+
+    const form = new FormData();
+    form.set(
+      "metadata",
+      JSON.stringify({
+        dekVersion: dataKeyVersion.toISOString(),
+        contentIv: thumbnail.iv,
+      } satisfies FileThumbnailUploadRequest),
+    );
+    form.set("content", new Blob([thumbnail.ciphertext]));
+
+    const res = await fetch(`/api/file/${fileId}/thumbnail/upload`, { method: "POST", body: form });
+    if (!res.ok) return false;
+
+    status.set("uploaded");
+    workingFiles.delete(fileId);
+    persistentStates.files = persistentStates.files.filter(({ id }) => id != fileId);
+
+    storeFileThumbnail(fileId, thumbnail.plaintext); // Intended
+    return true;
+  },
+  { concurrency: 4 },
+);
+
+export const requestFileThumbnailGeneration = async (fileInfo: FileInfo) => {
+  let status = workingFiles.get(fileInfo.id);
+  if (status && get(status) !== "error") return;
+
+  status = writable("generation-pending");
+  workingFiles.set(fileInfo.id, status);
+  persistentStates.files = persistentStates.files.map((file) =>
+    file.id === fileInfo.id ? { ...file, status } : file,
+  );
+
+  // TODO: Error Handling
+  const file = await requestFileDownload(fileInfo.id, fileInfo.contentIv!, fileInfo.dataKey!);
+  const thumbnail = await generateThumbnail(status, file, fileInfo.contentType, fileInfo.dataKey!);
+  if (!thumbnail) return;
+
+  await requestThumbnailUpload(status, fileInfo.id, fileInfo.dataKeyVersion!, thumbnail);
+};

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

@@ -1,73 +0,0 @@
-import { limitFunction } from "p-limit";
-import { encryptData } from "$lib/modules/crypto";
-import { getFileCache, storeFileCache, downloadFile, storeFileThumbnail } from "$lib/modules/file";
-import { generateImageThumbnail, generateVideoThumbnail } from "$lib/modules/thumbnail";
-import type { FileThumbnailUploadRequest } from "$lib/server/schemas";
-
-export const requestFileDownload = async (
-  fileId: number,
-  fileEncryptedIv: string,
-  dataKey: CryptoKey,
-) => {
-  const cache = await getFileCache(fileId);
-  if (cache) return cache;
-
-  const fileBuffer = await downloadFile(fileId, fileEncryptedIv, dataKey);
-  storeFileCache(fileId, fileBuffer); // Intended
-  return fileBuffer;
-};
-
-export const generateThumbnail = limitFunction(
-  async (fileBuffer: ArrayBuffer, fileType: string) => {
-    let url;
-    try {
-      if (fileType === "image/heic") {
-        const { default: heic2any } = await import("heic2any");
-        url = URL.createObjectURL(
-          (await heic2any({
-            blob: new Blob([fileBuffer], { type: fileType }),
-            toType: "image/png",
-          })) as Blob,
-        );
-        return await generateImageThumbnail(url);
-      } else if (fileType.startsWith("image/")) {
-        url = URL.createObjectURL(new Blob([fileBuffer], { type: fileType }));
-        return await generateImageThumbnail(url);
-      } else if (fileType.startsWith("video/")) {
-        url = URL.createObjectURL(new Blob([fileBuffer], { type: fileType }));
-        return await generateVideoThumbnail(url);
-      }
-      return null;
-    } catch {
-      // TODO: Error handling
-      return null;
-    } finally {
-      if (url) {
-        URL.revokeObjectURL(url);
-      }
-    }
-  },
-  { concurrency: 4 },
-);
-
-export const requestThumbnailUpload = limitFunction(
-  async (fileId: number, thumbnail: ArrayBuffer, dataKey: CryptoKey, dataKeyVersion: Date) => {
-    const thumbnailEncrypted = await encryptData(thumbnail, dataKey);
-    const form = new FormData();
-    form.set(
-      "metadata",
-      JSON.stringify({
-        dekVersion: dataKeyVersion.toISOString(),
-        contentIv: thumbnailEncrypted.iv,
-      } satisfies FileThumbnailUploadRequest),
-    );
-    form.set("content", new Blob([thumbnailEncrypted.ciphertext]));
-
-    const res = await fetch(`/api/file/${fileId}/thumbnail/upload`, { method: "POST", body: form });
-    if (!res.ok) return false;
-
-    storeFileThumbnail(fileId, thumbnail); // Intended
-    return true;
-  },
-  { concurrency: 4 },
-);