Fix issue #6444: [Feature]: Limit 'attach image' functionality to specific supported types

frontend/__tests__/components/upload-image-input.test.tsx

@@ -2,6 +2,13 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { UploadImageInput } from "#/components/features/images/upload-image-input";
+import { toast } from "#/utils/toast";
+
+vi.mock("#/utils/toast", () => ({
+  toast: {
+    error: vi.fn(),
+  },
+}));
 
 describe("UploadImageInput", () => {
   const user = userEvent.setup();
@@ -41,17 +48,37 @@ describe("UploadImageInput", () => {
     expect(onUploadMock).toHaveBeenNthCalledWith(1, files);
   });
 
-  it("should not upload any file that is not an image", async () => {
+  it("should show error and not upload unsupported image types", async () => {
     render(<UploadImageInput onUpload={onUploadMock} />);
 
-    const file = new File(["(⌐□_□)"], "chucknorris.txt", {
-      type: "text/plain",
+    const file = new File(["(⌐□_□)"], "chucknorris.bmp", {
+      type: "image/bmp",
     });
     const input = screen.getByTestId("upload-image-input");
 
     await user.upload(input, file);
 
     expect(onUploadMock).not.toHaveBeenCalled();
+    expect(toast.error).toHaveBeenCalledWith(
+      expect.stringContaining("Only JPEG, PNG, GIF, and WebP images are supported")
+    );
+  });
+
+  it("should handle mix of supported and unsupported image types", async () => {
+    render(<UploadImageInput onUpload={onUploadMock} />);
+
+    const files = [
+      new File(["(⌐□_□)"], "valid.png", { type: "image/png" }),
+      new File(["(⌐□_□)"], "invalid.bmp", { type: "image/bmp" }),
+    ];
+    const input = screen.getByTestId("upload-image-input");
+
+    await user.upload(input, files);
+
+    expect(onUploadMock).toHaveBeenCalledWith([files[0]]);
+    expect(toast.error).toHaveBeenCalledWith(
+      expect.stringContaining("Only JPEG, PNG, GIF, and WebP images are supported")
+    );
   });
 
   it("should render custom labels", () => {

frontend/__tests__/utils/validate-image-type.test.ts

@@ -0,0 +1,46 @@
+import { validateImageType, getValidImageFiles } from '#/utils/validate-image-type';
+import { describe, expect, it } from 'vitest';
+
+describe('validateImageType', () => {
+  it('should accept supported image types', () => {
+    const supportedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+    supportedTypes.forEach((type) => {
+      const file = new File([''], 'test.jpg', { type });
+      expect(validateImageType(file)).toBe(true);
+    });
+  });
+
+  it('should reject unsupported image types', () => {
+    const unsupportedTypes = ['image/bmp', 'image/tiff', 'application/pdf', 'text/plain'];
+    unsupportedTypes.forEach((type) => {
+      const file = new File([''], 'test.jpg', { type });
+      expect(validateImageType(file)).toBe(false);
+    });
+  });
+});
+
+describe('getValidImageFiles', () => {
+  it('should separate valid and invalid files', () => {
+    const files = [
+      new File([''], 'test1.jpg', { type: 'image/jpeg' }),
+      new File([''], 'test2.bmp', { type: 'image/bmp' }),
+      new File([''], 'test3.png', { type: 'image/png' }),
+      new File([''], 'test4.pdf', { type: 'application/pdf' }),
+    ];
+
+    const { validFiles, invalidFiles } = getValidImageFiles(files);
+
+    expect(validFiles).toHaveLength(2);
+    expect(invalidFiles).toHaveLength(2);
+    expect(validFiles[0].type).toBe('image/jpeg');
+    expect(validFiles[1].type).toBe('image/png');
+    expect(invalidFiles[0].type).toBe('image/bmp');
+    expect(invalidFiles[1].type).toBe('application/pdf');
+  });
+
+  it('should handle empty array', () => {
+    const { validFiles, invalidFiles } = getValidImageFiles([]);
+    expect(validFiles).toHaveLength(0);
+    expect(invalidFiles).toHaveLength(0);
+  });
+});