Merge pull request #655 from Hexastack/fix/update-accepted-attachments-mime-types

Fix: update accepted attachments mime types

frontend/src/app-components/inputs/FileInput.tsx

@@ -1,11 +1,12 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+
 import UploadIcon from "@mui/icons-material/Upload";
 import { Button, CircularProgress } from "@mui/material";
 import { ChangeEvent, forwardRef } from "react";
@@ -71,6 +72,7 @@ const FileUploadButton = forwardRef<HTMLLabelElement, FileUploadButtonProps>(
           value="" // to trigger an automatic reset to allow the same file to be selected multiple times
           sx={{ display: "none" }}
           onChange={handleImportChange}
+          inputProps={{ accept }}
         />
       </>
     );

frontend/src/utils/attachment.ts

@@ -6,24 +6,46 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-
 import { IAttachment } from "@/types/attachment.types";
 import { FileType, TAttachmentForeignKey } from "@/types/message.types";
 
 import { buildURL } from "./URL";
 
 export const MIME_TYPES = {
-  images: ["image/jpeg", "image/png", "image/gif", "image/webp"],
+  images: ["image/jpeg", "image/png", "image/webp", "image/bmp"],
-  videos: ["video/mp4", "video/webm", "video/ogg"],
+  videos: [
-  audios: ["audio/mpeg", "audio/ogg", "audio/wav"],
+    "video/mp4",
+    "video/webm",
+    "video/ogg",
+    "video/quicktime", // common in apple devices
+    "video/x-msvideo", // AVI
+    "video/x-matroska", // MKV
+  ],
+  audios: [
+    "audio/mpeg", // MP3
+    "audio/mp3", // Explicit MP3 type
+    "audio/ogg",
+    "audio/wav",
+    "audio/aac", // common in apple devices
+    "audio/x-wav",
+  ],
   documents: [
     "application/pdf",
-    "application/msword",
+    "application/msword", // older ms Word format
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document", // newer ms word format
     "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-    "application/vnd.ms-excel",
+    "application/vnd.ms-excel", // older excel format
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", // newer excel format
     "application/vnd.ms-powerpoint",
     "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    "text/plain",
+    "application/rtf",
+    "application/epub", // do we want to support epub?
+    "application/x-7z-compressed", // do we want to support 7z?
+    "application/zip", // do we want to support zip?
+    "application/x-rar-compressed", // do we want to support winrar?
+    "application/json",
+    "text/csv",
   ],
 };
 

widget/src/components/buttons/FileButton.tsx

@@ -1,14 +1,15 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, useMemo } from "react";
 
 import { useChat } from "../../providers/ChatProvider";
+import { MIME_TYPES } from "../../utils/attachment";
 import FileInputIcon from "../icons/FileInputIcon";
 
 import "./FileButton.scss";
@@ -23,12 +24,17 @@ const FileButton: React.FC = () => {
       setFile && setFile(e.target.files[0]);
     }
   };
+  const acceptedMimeTypes = useMemo(
+    () => Object.values(MIME_TYPES).flat().join(","),
+    [],
+  );
 
   return (
     <div className="sc-user-input--file-wrapper">
       <button className="sc-user-input--file-icon-wrapper" type="button">
         <FileInputIcon />
         <input
+          accept={acceptedMimeTypes}
           type="file"
           id="file-input"
           onChange={handleChange}

widget/src/utils/attachment.ts

@@ -1,11 +1,12 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+
 import { FileType } from "../types/message.types";
 
 export function getFileType(mimeType: string): FileType {
@@ -19,3 +20,41 @@ export function getFileType(mimeType: string): FileType {
     return FileType.file;
   }
 }
+
+export const MIME_TYPES = {
+  images: ["image/jpeg", "image/png", "image/webp", "image/bmp"],
+  videos: [
+    "video/mp4",
+    "video/webm",
+    "video/ogg",
+    "video/quicktime", // common in apple devices
+    "video/x-msvideo", // AVI
+    "video/x-matroska", // MKV
+  ],
+  audios: [
+    "audio/mpeg", // MP3
+    "audio/mp3", // Explicit MP3 type
+    "audio/ogg",
+    "audio/wav",
+    "audio/aac", // common in apple devices
+    "audio/x-wav",
+  ],
+  documents: [
+    "application/pdf",
+    "application/msword", // older ms Word format
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document", // newer ms word format
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "application/vnd.ms-excel", // older excel format
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", // newer excel format
+    "application/vnd.ms-powerpoint",
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    "text/plain",
+    "application/rtf",
+    "application/epub+zip",
+    "application/x-7z-compressed",
+    "application/zip",
+    "application/x-rar-compressed",
+    "application/json",
+    "text/csv",
+  ],
+};