Merge pull request #520 from zendesk/gianluca/GG-3798-attachments-fix

fix: support more uncommon file types for attachments

package.json

@@ -35,6 +35,7 @@
     "dompurify": "3.0.11",
     "eslint-plugin-check-file": "^2.6.2",
     "i18next": "^23.10.1",
+    "mime": "^4.0.4",
     "node-fetch": "2.6.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/modules/new-request-form/fields/attachments/Attachments.tsx

@@ -18,6 +18,7 @@ import type { AttachmentField } from "../../data-types";
 import { FileListItem } from "./FileListItem";
 import type { AttachedFile } from "./useAttachedFiles";
 import { useAttachedFiles } from "./useAttachedFiles";
+import mime from "mime";
 
 interface AttachmentProps {
   field: AttachmentField;
@@ -97,12 +98,18 @@ export function Attachments({ field }: AttachmentProps): JSX.Element {
         url.searchParams.append("filename", file.name);
         xhr.open("POST", url);
 
-        // Browsers are returning an empty type for some files
-        // (ref: https://developer.mozilla.org/en-US/docs/Web/API/Blob/type)
-        // if we don't get a type, we'll skip setting the Content-Type header
-        // and let the server determine the type.
+        // If the browser returns a type for the file, use it as the Content-Type header,
+        // otherwise try to determine the mime type from the file extension using the mime
+        // library. If we can't determine the mime type, we'll fall back to a generic
+        // application/octet-stream.
         if (file.type) {
           xhr.setRequestHeader("Content-Type", file.type);
+        } else {
+          const mimeType = mime.getType(file.name);
+          xhr.setRequestHeader(
+            "Content-Type",
+            mimeType || "application/octet-stream"
+          );
         }
         xhr.setRequestHeader("X-CSRF-Token", csrfToken);
         xhr.responseType = "json";

yarn.lock

@@ -9857,6 +9857,11 @@ mime@^3.0.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-3.0.0.tgz#b374550dca3a0c18443b0c950a6a58f1931cf7a7"
   integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==
 
+mime@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-4.0.4.tgz#9f851b0fc3c289d063b20a7a8055b3014b25664b"
+  integrity sha512-v8yqInVjhXyqP6+Kw4fV3ZzeMRqEW6FotRsKXjRS5VMTNIuXsdRoAvklpoRgSqXm6o9VNH4/C0mgedko9DdLsQ==
+
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"