fix(deps): downgrade react-dropzone to fix media uploading on GSIB (#…

…1775)

* fix(deps): downgrade react-dropzone to fix media uploading on GSIB

* fix(media): prevent jfif files from being uploaded

* docs(media): add note about restriction of JFIF file format

package.json

@@ -80,7 +80,7 @@
     "react-color": "^2.19.3",
     "react-diff-viewer": "^3.1.1",
     "react-dom": "^18.2.0",
-    "react-dropzone": "^14.2.3",
+    "react-dropzone": "^11.7.1",
     "react-hook-form": "^7.32.0",
     "react-icons": "^4.4.0",
     "react-input-mask": "^2.0.4",

src/components/Attachment/Attachment.tsx

@@ -147,6 +147,16 @@ export const Attachment = forwardRef<AttachmentProps, "div">(
             message: `File is too big (${getReadableFileSize(file.size)})`,
           }
         }
+
+        // Note: We do not current support this right now on the backend, but
+        // once we add support for it, we can remove this restriction.
+        if (file.name.endsWith(".jfif")) {
+          return {
+            code: "jfif-file-not-supported",
+            message:
+              "The JFIF file format is not supported, please convert to JPEG instead",
+          }
+        }
         return null
       },
       [maxSize]

src/components/MediaCreationModal/MediaCreationModal.tsx

@@ -36,18 +36,16 @@ import { Dropzone } from "./components/Dropzone"
 
 type MediaSteps = "upload" | "progressing" | "success" | "failed"
 
-const IMAGE_UPLOAD_ACCEPTED_MIME_TYPES = {
-  "image/jpeg": [".jpg", ".jpeg"],
-  "image/png": [".png"],
-  "image/gif": [".gif"],
-  "image/svg+xml": [".svg"],
-  "image/tiff": [".tiff", ".tif"],
-  "image/bmp": [".bmp"],
-}
+const IMAGE_UPLOAD_ACCEPTED_MIME_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/svg+xml",
+  "image/tiff",
+  "image/bmp",
+]
 
-const FILE_UPLOAD_ACCEPTED_MIME_TYPES = {
-  "application/pdf": [".pdf"],
-}
+const FILE_UPLOAD_ACCEPTED_MIME_TYPES = ["application/pdf"]
 
 interface MediaDropzoneProps {
   fileRejections: FileRejection[]