diff --git a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx index a99006242..413f75e23 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx @@ -8,6 +8,7 @@ import useFlowsManagerStore from "../../../../../stores/flowsManagerStore"; import { BACKEND_URL, BASE_URL_API } from "../../../../../constants/constants"; import formatFileName from "../filePreviewChat/utils/format-file-name"; import DownloadButton from "./components/downloadButton/downloadButton"; +import handleDownload from "./utils/handle-download"; const imgTypes = new Set(["png", "jpg"]); @@ -17,26 +18,6 @@ export default function FileCard({ fileType, showFile = true, }: fileCardPropsType): JSX.Element | undefined { - const handleDownload = async (): Promise => { - try { - const response = await fetch( - `${BACKEND_URL.slice(0, BACKEND_URL.length - 1)}${BASE_URL_API}files/download/${content}`, - ); - const blob = await response.blob(); - const url = URL.createObjectURL(blob); - - const link = document.createElement("a"); - link.href = url; - link.setAttribute("download", fileName); // Set the filename - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - - URL.revokeObjectURL(url); // Clean up the URL object - } catch (error) { - console.error("Failed to download file:", error); - } - }; const [isHovered, setIsHovered] = useState(false); const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId); function handleMouseEnter(): void { @@ -65,7 +46,7 @@ export default function FileCard({ /> handleDownload({ fileName, content })} /> @@ -77,7 +58,7 @@ export default function FileCard({ className={`relative ${false ? "h-20 w-20" : "h-20 w-80"} cursor-pointer rounded-lg border border-ring bg-muted shadow transition duration-300 hover:drop-shadow-lg ${ isHovered ? "shadow-md" : "" }`} - onClick={handleDownload} + onClick={() => handleDownload({ fileName, content })} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > @@ -88,7 +69,10 @@ export default function FileCard({ File - + handleDownload({ fileName, content })} + /> ); } diff --git a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/handle-download.tsx b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/handle-download.tsx new file mode 100644 index 000000000..c907316c5 --- /dev/null +++ b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/handle-download.tsx @@ -0,0 +1,31 @@ +import { + BACKEND_URL, + BASE_URL_API, +} from "../../../../../../constants/constants"; + +export default async function handleDownload({ + fileName, + content, +}: { + fileName: string; + content: string; +}): Promise { + try { + const response = await fetch( + `${BACKEND_URL.slice(0, BACKEND_URL.length - 1)}${BASE_URL_API}files/download/${content}`, + ); + const blob = await response.blob(); + const url = URL.createObjectURL(blob); + + const link = document.createElement("a"); + link.href = url; + link.setAttribute("download", fileName); // Set the filename + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + + URL.revokeObjectURL(url); // Clean up the URL object + } catch (error) { + console.error("Failed to download file:", error); + } +}