allow more filetypes but only compress png/jpeg/webp

DA0-DA0 · Sep 24, 2024 · f9a5af6 · f9a5af6
1 parent 88e2a67
commit f9a5af6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/stateless/components/inputs/ImageDropInput.tsx b/packages/stateless/components/inputs/ImageDropInput.tsx
@@ -52,7 +52,13 @@ export const ImageDropInput = ({
     <FileDropInput
       Icon={CloudUploadRounded}
       IconHover={CloudDownloadRounded}
-      allowedMimetypes={['image/png', 'image/jpeg']}
+      allowedMimetypes={[
+        'image/png',
+        'image/jpeg',
+        'image/gif',
+        'image/svg',
+        'image/webp',
+      ]}
       className={clsx(className, image && '!outline-solid')}
       dragHereOrSelect={
         <Trans i18nKey="form.dragImageHereOrClick">

diff --git a/packages/stateless/components/inputs/ImageUploadInput.tsx b/packages/stateless/components/inputs/ImageUploadInput.tsx
@@ -23,8 +23,11 @@ export const ImageUploadInput = ({
     setUploading(true)
 
     try {
-      // Compress image to be below 3MB.
-      if (file.size > 3 * 1024 * 1024) {
+      // Compress png/jpeg/webp image to be below 3MB.
+      if (
+        file.size > 3 * 1024 * 1024 &&
+        ['image/png', 'image/jpeg', 'image/webp'].includes(file.type)
+      ) {
         // The image compression library actually returns a Blob, so we need to
         // wrap it in a File so that its name and file extension are preserved.
         file = new File(