diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx
new file mode 100644
index 000000000..2de36397c
--- /dev/null
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx
@@ -0,0 +1,29 @@
+import ShortUniqueId from "short-unique-id";
+import useFileUpload from "./use-file-upload";
+
+export const useHandleFileChange = (setFiles, currentFlowId) => {
+  const handleFileChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const uid = new ShortUniqueId({ length: 3 });
+      const id = uid();
+      const type = file.type.split("/")[0];
+      const blob = file;
+
+      setFiles((prevFiles) => [
+        ...prevFiles,
+        { file: blob, loading: true, error: false, id, type },
+      ]);
+
+      useFileUpload(blob, currentFlowId, setFiles, id);
+    }
+  };
+
+  return {
+    handleFileChange,
+  };
+};
+
+export default useHandleFileChange;