From b190846b7f0f04ed6d3ed3ee2e87ee5760aa21f3 Mon Sep 17 00:00:00 2001
From: Jessie Wei <jessieweiyi@gmail.com>
Date: Fri, 23 Feb 2024 11:57:01 +1100
Subject: [PATCH] feat: Support other image formats for architecture diagrams
 and dataflow diagrams. Close #84

---
 .../components/generic/ImageEdit/index.tsx    | 31 +++++++++++++------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/threat-composer/src/components/generic/ImageEdit/index.tsx b/packages/threat-composer/src/components/generic/ImageEdit/index.tsx
index 6db5c68b..6478fc48 100644
--- a/packages/threat-composer/src/components/generic/ImageEdit/index.tsx
+++ b/packages/threat-composer/src/components/generic/ImageEdit/index.tsx
@@ -32,6 +32,18 @@ export interface ImageUploadProps {
   onChange: (value: string) => void;
 }
 
+const IMAGE_COMPRESSION_OPTIONS = {
+  maxSizeMB: 0.5,
+  maxWidthOrHeight: 1024,
+  useWebWorker: true,
+};
+
+const IMAGE_COMPRESSION_TYPES = [
+  'image/png',
+  'image/gif',
+  'image/jpeg',
+];
+
 const ImageEdit: FC<ImageUploadProps> = ({
   value,
   onChange,
@@ -54,16 +66,15 @@ const ImageEdit: FC<ImageUploadProps> = ({
   }, [onChange, imageSource, image, inputValue]);
 
   const handleImageUpload = useCallback(async (imageFile: File) => {
-    const options = {
-      maxSizeMB: 0.5,
-      maxWidthOrHeight: 1024,
-      useWebWorker: true,
-    };
-
     try {
-      const compressedFile = await imageCompression(imageFile, options);
-      const base64String = await getBase64(compressedFile);
-      return base64String;
+      // Compress the image if it is supported by browser-image-compression
+      if (IMAGE_COMPRESSION_TYPES.includes(imageFile.type)) {
+        const compressedFile = await imageCompression(imageFile, IMAGE_COMPRESSION_OPTIONS);
+        const base64String = await getBase64(compressedFile);
+        return base64String;
+      }
+
+      return await getBase64(imageFile);
     } catch (error) {
       console.log(error);
       return '';
@@ -106,7 +117,7 @@ const ImageEdit: FC<ImageUploadProps> = ({
       <FileUpload
         key='fileUpload'
         label='Image Upload'
-        accept='image/png, image/gif, image/jpeg'
+        accept='image/*'
         errorText={errorText}
         files={selectedFiles}
         onChange={handleChange} />