diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx
index ff93a9f7b..52a3ff4dc 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx
@@ -1,14 +1,25 @@
 import IconComponent from "../../../../../../../components/genericIconComponent";
 import { Case } from "../../../../../../../shared/components/caseComponent";
+import { FilePreviewType } from "../../../../../../../types/components";
 import { classNames } from "../../../../../../../utils/utils";
 
+type ButtonSendWrapperProps = {
+  send: () => void;
+  lockChat: boolean;
+  noInput: boolean;
+  saveLoading: boolean;
+  chatValue: string;
+  files: FilePreviewType[];
+};
+
 const ButtonSendWrapper = ({
   send,
   lockChat,
   noInput,
   saveLoading,
   chatValue,
-}) => {
+  files,
+}: ButtonSendWrapperProps) => {
   return (
     <button
       className={classNames(
@@ -22,7 +33,11 @@ const ButtonSendWrapper = ({
       disabled={lockChat || saveLoading}
       onClick={(): void => send()}
     >
-      <Case condition={lockChat || saveLoading}>
+      <Case
+        condition={
+          lockChat || saveLoading || files.some((file) => file.loading)
+        }
+      >
         <IconComponent
           name="Lock"
           className="form-modal-lock-icon"
@@ -38,7 +53,12 @@ const ButtonSendWrapper = ({
         />
       </Case>
 
-      <Case condition={!(lockChat || saveLoading) && !noInput}>
+      <Case
+        condition={
+          !(lockChat || saveLoading || files.some((file) => file.loading)) &&
+          !noInput
+        }
+      >
         <IconComponent
           name="LucideSend"
           className="form-modal-send-icon "
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
index c374cf550..b9f1e2635 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
@@ -1,7 +1,17 @@
 import ShortUniqueId from "short-unique-id";
 import useFileUpload from "./use-file-upload";
+import useAlertStore from "../../../../../../stores/alertStore";
 
-const useDragAndDrop = (setIsDragging, setFiles, currentFlowId) => {
+const fsErrorText =
+  "Please ensure your file has one of the following extensions:";
+const snErrorTxt = "png, jpg, jpeg, gif, bmp, webp";
+
+const useDragAndDrop = (
+  setIsDragging,
+  setFiles,
+  currentFlowId,
+  setErrorData,
+) => {
   const dragOver = (e) => {
     e.preventDefault();
     if (e.dataTransfer.types.some((type) => type === "Files")) {
@@ -24,7 +34,7 @@ const useDragAndDrop = (setIsDragging, setFiles, currentFlowId) => {
   const onDrop = (e) => {
     e.preventDefault();
     if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      handleFiles(e.dataTransfer.files, setFiles, currentFlowId);
+      handleFiles(e.dataTransfer.files, setFiles, currentFlowId, setErrorData);
       e.dataTransfer.clearData();
     }
     setIsDragging(false);
@@ -37,8 +47,19 @@ const useDragAndDrop = (setIsDragging, setFiles, currentFlowId) => {
   };
 };
 
-const handleFiles = (files, setFiles, currentFlowId) => {
+const handleFiles = (files, setFiles, currentFlowId, setErrorData) => {
   if (files) {
+    const allowedExtensions = ["png", "jpg", "jpeg", "gif", "bmp", "webp"];
+    const file = files?.[0];
+    const fileExtension = file.name.split(".").pop()?.toLowerCase();
+    if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+      console.log("Error uploading file");
+      setErrorData({
+        title: "Error uploading file",
+        list: [fsErrorText, snErrorTxt],
+      });
+      return;
+    }
     const uid = new ShortUniqueId({ length: 3 });
     const id = uid();
     const type = files[0].type.split("/")[0];
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
index 22d8d4ea3..8af591df9 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
@@ -89,6 +89,7 @@ export default function ChatInput({
             noInput={noInput}
             saveLoading={saveLoading}
             chatValue={chatValue}
+            files={files}
           />
         </div>
 
diff --git a/src/frontend/src/modals/IOModal/components/chatView/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
index f183c830e..067cf525c 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
@@ -25,7 +25,7 @@ export default function ChatView({
   setLockChat,
 }: chatViewProps): JSX.Element {
   const { flowPool, outputs, inputs, CleanFlowPool } = useFlowStore();
-  const { setNoticeData } = useAlertStore();
+  const { setErrorData } = useAlertStore();
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const messagesRef = useRef<HTMLDivElement | null>(null);
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
@@ -161,6 +161,7 @@ export default function ChatView({
     setIsDragging,
     setFiles,
     currentFlowId,
+    setErrorData,
   );
 
   return (