Transforming image accepted type to enum

Author: leo95oliveira

src/lib/ImageUpload/ImageUpload.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 import { ImageUpload } from "./ImageUpload"
+import { ImageType } from "./ImageUpload.types";
 
 const meta: Meta<typeof ImageUpload> = {
     component: ImageUpload,
@@ -24,6 +25,6 @@ SampleComponent.parameters = {
 };
 SampleComponent.args = {
     id: "c4_img_uploader",
-    accept: "image/png, image/jpeg",
+    accept: [ImageType.png, ImageType.jpeg],
     maxSize: 2
 }

src/lib/ImageUpload/ImageUpload.test.tsx

@@ -4,12 +4,13 @@ import { act, fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import MockDataTransfer from "./_MockDataTransfer";
 import "@testing-library/jest-dom";
+import { ImageType } from "./ImageUpload.types";
 
 
 const defaultAltText = "Image uploader input";
 const defaultArgs = {
     id: 'test-uploader',
-    accept: 'image/jpeg',
+    accept: [ImageType.jpeg],
     multiSelect: false,
     maxSize: 2
 };
@@ -25,13 +26,13 @@ describe("========== C4 IMAGE UPLOAD - RUNNING TESTS ==========", () => {
         render(<ImageUpload {...defaultArgs} />);
         const input: HTMLInputElement = screen.getByAltText(defaultAltText);
         expect(input).toHaveAttribute('id', defaultArgs.id);
-        expect(input).toHaveAttribute('accept', defaultArgs.accept);
+        expect(input).toHaveAttribute('accept', defaultArgs.accept.join(", "));
     });
 
     test("Triggers correct onChange event logic on valid uploads", async () => {
         const fileCache = new WeakMap();
         const user = userEvent.setup();
-        render(<ImageUpload {...defaultArgs} accept="image/jpeg" />);
+        render(<ImageUpload {...defaultArgs} accept={[ImageType.jpeg]} />);
         const input: HTMLInputElement = screen.getByAltText(defaultAltText);
         const file = new File(['(⌐□_□)'], "test.jpeg", { type: "image/jpeg" });
 
@@ -118,7 +119,7 @@ describe("========== C4 IMAGE UPLOAD - RUNNING TESTS ==========", () => {
     test("Triggers correct drag and drop event logic on invalid uploads", async () => {
         const fileCache = new WeakMap();
         // Set accepted type to png only but provide a jpeg to make it invalid
-        render(<ImageUpload {...defaultArgs} accept="image/png" />);
+        render(<ImageUpload {...defaultArgs} accept={[ImageType.png]} />);
         const input: HTMLInputElement = screen.getByAltText(defaultAltText);
         const file = new File(['(⌐□_□)'], "test.jpeg", { type: "image/jpeg" });
 

src/lib/ImageUpload/ImageUpload.tsx

@@ -3,37 +3,34 @@ import React, { ChangeEvent, DragEvent, useEffect, useRef, useState } from "reac
 import "./ImageUpload.scss";
 import { Icon } from "../Icon";
 import clsx from "clsx";
-import { ImageUploadProps } from "./ImageUpload.types";
+import { ImageType, ImageUploadProps } from "./ImageUpload.types";
 
 /**
- * A custom image upload input component with support for drag & drop
- * as well as multi-file upload by providing the `multiSelect` prop.
+ * A custom image upload input component with support for drag & drop.
  * 
  * By default, this component can be used as an uncontrolled input and all uploaded files
  * can be retrieved on form submission. For further control however, you can pass an optional function
  * to the `onImageSelected` prop.
  * 
- * @param accept - String value indicating all the accepted file types (separated by a comma). Options include:
- *  - image/apng
- *  - image/avif
+ * @param accept - List of image types as provided by the `ImageType` enum. Available options include:
  *  - image/gif
  *  - image/jpeg
  *  - image/png
- *  - image/svg+xml
  *  - image/webp
  * @param id - String HTML identifier for the input field.
  * @param maxSize - The max allowed size for file uploads (in Megabytes).
  * @param onImageSelected - Optional function for controlled handling of uploads. Triggered on every change to uploader.
  * @param hasUploaded - Boolean indicator to trigger image upload cleanup once the upload process has finalized on the frontend.
  */
 export const ImageUpload = ({
-    accept = "image/png, image/jpeg",
+    accept = [ImageType.png, ImageType.jpeg],
     id,
     maxSize = 2,
     onImageSelected,
     hasUploaded = false
 }: ImageUploadProps) => {
     const inputRef = useRef<HTMLInputElement>(null);
+    const acceptToStr = accept.join(", ")
     const maxSizeInBytes = maxSize * 1024 * 1024;
     const [dragActive, setDragActive] = useState(false);
     const [uploadedImages, setUploadedImages] = useState<File[]>([]);
@@ -71,9 +68,10 @@ export const ImageUpload = ({
      * @param acceptedPreviews - Array of previously generated preview urls for each accepted file.
      */
     const isValidFile = (file: File | null, acceptedFiles: File[], declinedFiles: File[], acceptedPreviews: string[]) => {
+        const acceptedTypes = new Set(accept);
         if (file == null) return false;
 
-        if (!accept.includes(file.type) || file.size > maxSizeInBytes) {
+        if (!acceptedTypes.has(file.type as ImageType) || file.size > maxSizeInBytes) {
             declinedFiles.push(file);
             return false;
         } else {
@@ -243,7 +241,7 @@ export const ImageUpload = ({
                     className='c4imgupload--input'
                     multiple={false}
                     type="file"
-                    accept={accept}
+                    accept={acceptToStr}
                     onClick={() => setError(undefined)}
                     onChange={onImageChanged}
                 />

src/lib/ImageUpload/ImageUpload.types.ts

@@ -1,15 +1,12 @@
 export interface ImageUploadProps {
     /**
-     * String value indicating all the accepted file types (separated by a comma). Options include:
-     *  - image/apng
-     *  - image/avif
+     * List of image types as provided by the `ImageType` enum. Available options include:
      *  - image/gif
      *  - image/jpeg
      *  - image/png
-     *  - image/svg+xml
      *  - image/webp
      */
-    accept?: string;
+    accept?: ImageType[];
     /** String HTML identifier for the input field. */
     id: string;
     /** The max allowed size for file uploads (in Megabytes). */
@@ -18,4 +15,11 @@ export interface ImageUploadProps {
     onImageSelected?: (data: File | undefined) => void;
     /** Boolean indicator to trigger image upload cleanup once the upload process has finalized on the frontend. */
     hasUploaded?: boolean;
+}
+
+export enum ImageType {
+    gif = "image/gif",
+    jpeg = "image/jpeg",
+    png = "image/png",
+    webp = "image/webp"
 }