Merge pull request #982 from traPtitech/fix/image-uploader-append

fix(client): append new images instead of replacing them in ImageUploader

Author: reiroop

client/src/views/shared/ImageUploader.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-file-input
-      v-model="images"
+      v-model="inputImages"
       label="画像"
       filled
       multiple
@@ -18,25 +18,32 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, nextTick } from "vue";
 
 const images = defineModel<File[]>({ default: () => [] });
+const inputImages = ref<File[]>([]);
 const uploadImageUrl = ref<string[]>([]);
-const uploadImageBlob = ref<File[]>([]);
 
 const imageChange = (files: File | File[]) => {
-  uploadImageUrl.value = [];
-  uploadImageBlob.value = [];
   if (!files) return;
   const fileList = Array.isArray(files) ? files : [files];
+  if (fileList.length === 0) return;
+
+  const newImages = [...images.value];
+
   fileList.forEach((file: File) => {
     const fr = new FileReader();
     fr.readAsDataURL(file);
-    uploadImageBlob.value.push(file);
-    images.value = uploadImageBlob.value;
+    newImages.push(file);
     fr.addEventListener("load", () => {
       uploadImageUrl.value.push(fr.result as string);
     });
   });
+
+  images.value = newImages;
+
+  nextTick(() => {
+    inputImages.value = [];
+  });
 };
 </script>

client/tests/views/shared/ImageUploader.test.ts

@@ -2,6 +2,7 @@ import ImageUploader from "@/views/shared/ImageUploader.vue";
 import { mount } from "@vue/test-utils";
 import { describe, expect, it, vi } from "vitest";
 import * as components from "vuetify/components";
+
 describe("ImageUploader.vue", () => {
   it("emits update:modelValue when images are selected", async () => {
     const wrapper = mount(ImageUploader);
@@ -19,30 +20,61 @@ describe("ImageUploader.vue", () => {
       });
     }
 
-    // Stub global FileReader
     const originalFileReader = global.FileReader;
     vi.stubGlobal("FileReader", MockFileReader);
 
-    // Trigger image change
-    // We can't easily trigger v-file-input change event directly in unit test without full mount
-    // But we can call the handler if we could access it.
-    // Since it's <script setup>, we can't access `imageChange` directly.
-    // We will simulate the event on the component if possible, or verify structure.
-
-    // Ideally we should find the v-file-input and trigger update:modelValue
     const fileInput = wrapper.findComponent(components.VFileInput);
     expect(fileInput.exists()).toBe(true);
 
-    // Trigger the event that VFileInput would emit
     await fileInput.vm.$emit("update:modelValue", [file]);
 
-    // Wait for any async operations
     await new Promise(resolve => setTimeout(resolve, 0));
 
     expect(wrapper.emitted("update:modelValue")).toBeTruthy();
     expect(wrapper.emitted("update:modelValue")![0][0]).toEqual([file]);
 
-    // Restore
+    vi.stubGlobal("FileReader", originalFileReader);
+  });
+
+  it("appends new images instead of replacing them", async () => {
+    const wrapper = mount(ImageUploader);
+
+    const file1 = new File(["content1"], "test1.png", { type: "image/png" });
+    const file2 = new File(["content2"], "test2.png", { type: "image/png" });
+
+    // Mock FileReader
+    class MockFileReader {
+      result = "data:image/png;base64,test";
+      readAsDataURL = vi.fn();
+      addEventListener = vi.fn((event, callback) => {
+        if (event === "load") {
+          callback();
+        }
+      });
+    }
+
+    const originalFileReader = global.FileReader;
+    vi.stubGlobal("FileReader", MockFileReader);
+
+    const fileInput = wrapper.findComponent(components.VFileInput);
+
+    // Simulate first upload
+    await fileInput.vm.$emit("update:modelValue", [file1]);
+
+    let emitted = wrapper.emitted("update:modelValue");
+    expect(emitted).toBeTruthy();
+    expect(emitted!.slice(-1)[0][0]).toEqual([file1]);
+
+    // Simulate second upload
+    await fileInput.vm.$emit("update:modelValue", [file2]);
+
+    emitted = wrapper.emitted("update:modelValue");
+    const lastEmit = emitted!.slice(-1)[0][0] as File[];
+
+    expect(lastEmit).toHaveLength(2);
+    expect(lastEmit).toContain(file1);
+    expect(lastEmit).toContain(file2);
+
     vi.stubGlobal("FileReader", originalFileReader);
   });
 });