fix: add mime type check for file types (#4981)

web/package.json

@@ -40,6 +40,7 @@
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.486.0",
     "mermaid": "^11.9.0",
+    "mime": "^4.0.7",
     "mobx": "^6.13.7",
     "mobx-react-lite": "^4.1.0",
     "react": "^18.3.1",

web/pnpm-lock.yaml

@@ -104,6 +104,9 @@ importers:
       mermaid:
         specifier: ^11.9.0
         version: 11.9.0
+      mime:
+        specifier: ^4.0.7
+        version: 4.0.7
       mobx:
         specifier: ^6.13.7
         version: 6.13.7
@@ -2723,6 +2726,11 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  mime@4.0.7:
+    resolution: {integrity: sha512-2OfDPL+e03E0LrXaGYOtTFIYhiuzep94NSsuhrNULq+stylcJedcHdzHtz0atMUuGwJfFYs0YL5xeC/Ca2x0eQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -6210,6 +6218,8 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  mime@4.0.7: {}
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.12

web/src/components/MemoEditor/ActionButton/UploadAttachmentButton.tsx

@@ -1,5 +1,6 @@
 import { t } from "i18next";
 import { LoaderIcon, PaperclipIcon } from "lucide-react";
+import mime from "mime";
 import { observer } from "mobx-react-lite";
 import { useContext, useRef, useState } from "react";
 import toast from "react-hot-toast";
@@ -51,7 +52,7 @@ const UploadAttachmentButton = observer((props: Props) => {
           attachment: Attachment.fromPartial({
             filename,
             size,
-            type,
+            type: type || mime.getType(filename) || "",
             content: buffer,
           }),
           attachmentId: "",