File Upload Progress Tracker

Use toast.loading() and toast.update() to display live percent uploads.

export function uploadFileWithProgress(file: File) { const toastId = toast.loading(Uploading ${file.name}..., { duration: 0 });

const xhr = new XMLHttpRequest(); xhr.open('POST', '/api/upload');

xhr.upload.onprogress = (event) => { if (event.lengthComputable) { const percent = Math.round((event.loaded / event.total) * 100); toast.update(toastId, { title: Uploading ${file.name} (${percent}%), description: ${(event.loaded / 1048576).toFixed(1)} MB of ${(event.total / 1048576).toFixed(1)} MB, }); } };

xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { toast.update(toastId, { type: 'success', title: 'Upload complete!', description: ${file.name} has been processed., duration: 4000, }); } else { toast.update(toastId, { type: 'error', title: 'Upload failed', description: 'Server returned error ' + xhr.status, duration: 5000, }); } };

const formData = new FormData(); formData.append('file', file); xhr.send(formData); } `