fixed image previews

frontend/src/services/uploadService.ts

@@ -59,13 +59,19 @@ export async function getPresignedUrl(
   return response.data;
 }
 
+interface BatchPresignResponse {
+  uploads: PresignedUrlResponse[];
+  baseKey: string;
+}
+
 /**
  * Get presigned URLs for uploading multiple files
+ * All files share the same base UUID for coordinated variant uploads
  */
 export async function getPresignedUrls(
   uploadType: UploadType,
   files: File[]
-): Promise<PresignedUrlResponse[]> {
+): Promise<BatchPresignResponse> {
   const response = await api.post("/upload/presign-batch", {
     uploadType,
     files: files.map((f) => ({
@@ -74,7 +80,7 @@ export async function getPresignedUrls(
       fileSize: f.size,
     })),
   });
-  return response.data.uploads;
+  return { uploads: response.data.uploads, baseKey: response.data.baseKey };
 }
 
 /**
@@ -223,9 +229,9 @@ export async function uploadImageWithVariants(
     throw new Error("Failed to resize image");
   }
 
-  // Get presigned URLs for all variants
+  // Get presigned URLs for all variants (all share same base UUID)
   const files = resizedImages.map((r) => r.file);
-  const presignedUrls = await getPresignedUrls(uploadType, files);
+  const { uploads: presignedUrls } = await getPresignedUrls(uploadType, files);
 
   // Upload all variants in parallel with combined progress
   const totalBytes = files.reduce((sum, f) => sum + f.size, 0);
@@ -251,15 +257,15 @@ export async function uploadImageWithVariants(
   const keys = presignedUrls.map((p) => p.key);
   await confirmUploads(keys);
 
-  // Find the original variant key (no suffix) for database storage
-  const originalIdx = resizedImages.findIndex((r) => r.variant.size === "original");
-  const baseKey = presignedUrls[originalIdx]?.key || presignedUrls[0].key;
-
   if (onProgress) onProgress(100);
 
+  // Use the baseKey returned by the backend (shared UUID for all variants)
+  // The stored key format is: items/uuid.jpg (original), and variants are items/uuid_th.jpg, items/uuid_md.jpg
+  const originalKey = keys.find((k) => !k.includes("_th") && !k.includes("_md")) || keys[0];
+
   return {
-    baseKey,
-    publicUrl: getPublicImageUrl(baseKey),
+    baseKey: originalKey,
+    publicUrl: getPublicImageUrl(originalKey),
     variants: keys,
   };
 }