diff --git a/package-lock.json b/package-lock.json
index e2db3148e..2c3c4dcce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -83,7 +83,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",
@@ -7168,6 +7168,17 @@
         "react": ">=16.12.0"
       }
     },
+    "node_modules/@opengovsg/design-system-react/node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/@opengovsg/design-system-react/node_modules/nanoid": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.3.tgz",
@@ -7185,6 +7196,22 @@
         "node": "^18 || >=20"
       }
     },
+    "node_modules/@opengovsg/design-system-react/node_modules/react-dropzone": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "dependencies": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/@opengovsg/design-system-react/node_modules/react-input-mask": {
       "version": "3.0.0-alpha.2",
       "license": "MIT",
@@ -19177,14 +19204,14 @@
       }
     },
     "node_modules/file-selector": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
-      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.4.0.tgz",
+      "integrity": "sha512-iACCiXeMYOvZqlF1kTiYINzgepRBymz1wwjiuup9u9nayhb6g4fSwiyJ/6adli+EPwrWtpgQAh2PoS7HukEGEg==",
       "dependencies": {
-        "tslib": "^2.4.0"
+        "tslib": "^2.0.3"
       },
       "engines": {
-        "node": ">= 12"
+        "node": ">= 10"
       }
     },
     "node_modules/file-system-cache": {
@@ -31921,19 +31948,19 @@
       }
     },
     "node_modules/react-dropzone": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
-      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.7.1.tgz",
+      "integrity": "sha512-zxCMwhfPy1olUEbw3FLNPLhAm/HnaYH5aELIEglRbqabizKAdHs0h+WuyOpmA+v1JXn0++fpQDdNfUagWt5hJQ==",
       "dependencies": {
         "attr-accept": "^2.2.2",
-        "file-selector": "^0.6.0",
+        "file-selector": "^0.4.0",
         "prop-types": "^15.8.1"
       },
       "engines": {
         "node": ">= 10.13"
       },
       "peerDependencies": {
-        "react": ">= 16.8 || 18.0.0"
+        "react": ">= 16.8"
       }
     },
     "node_modules/react-element-to-jsx-string": {
diff --git a/package.json b/package.json
index 43e1a09f3..ea981c21d 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Attachment/Attachment.tsx b/src/components/Attachment/Attachment.tsx
index 860f23ec8..3e39da708 100644
--- a/src/components/Attachment/Attachment.tsx
+++ b/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]
diff --git a/src/components/MediaCreationModal/MediaCreationModal.tsx b/src/components/MediaCreationModal/MediaCreationModal.tsx
index 0eaa97df8..03e8fde48 100644
--- a/src/components/MediaCreationModal/MediaCreationModal.tsx
+++ b/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[]