diff --git a/src/utils/files.tsx b/src/utils/files.tsx index df989b5..da921f2 100644 --- a/src/utils/files.tsx +++ b/src/utils/files.tsx @@ -1,5 +1,7 @@ import { auth } from "@/stores/auth"; import type { UploadedFile } from "@/types/api"; +import { createSignal } from "solid-js"; +import toast from "solid-toast"; export const createFileImporter = (onFileUploaded: (files: FileList) => unknown) => { const input = document.createElement("input"); @@ -78,6 +80,8 @@ export const getUploadedFileURL = (file: UploadedFile) => { return url; }; +const [downloadProgress, setDownloadProgress] = createSignal(0); + export const downloadUploadedFile = (file: UploadedFile) => { const xhr = new XMLHttpRequest(); xhr.open("GET", "/api/file/" + file.id, true); @@ -85,6 +89,16 @@ export const downloadUploadedFile = (file: UploadedFile) => { xhr.responseType = "blob"; + toast.custom(() => ( +
+ Downloading... {downloadProgress()}% + +
+ ), { + unmountDelay: 0 + }); + xhr.onload = () => { if (xhr.status === 200) { const blob = xhr.response; @@ -107,6 +121,11 @@ export const downloadUploadedFile = (file: UploadedFile) => { xhr.onprogress = (event) => { if (event.lengthComputable) { console.info(file.name, `${event.loaded}/${event.total} (${event.loaded * 100 / event.total}%)`); + setDownloadProgress(Math.floor(event.loaded * 100 / event.total)); + + if (event.loaded === 1) { + toast.dismiss(); + } } };