Vercel Blob can now track file upload progress, enabling for a better user experience when uploading files.
With the latest @vercel/blob package, you can use the new onUploadProgress callback to display progress during file uploads. In the Dashboard, you'll also see the upload progress for your files.
"use client";import { upload } from '@vercel/blob/client';import { useState } from 'react';
export function Uploader() { const [progress, setProgress] = useState(0);
return ( <form onSubmit={(e) => { e.preventDefault(); const file = e.currentTarget.files[0]; await upload(file.name, file, { access: 'public', handleUploadUrl: '/api/upload', onUploadProgress(e) { setProgress(e.percentage); } }); }}> <input type="file" required /> Upload progress: <progress value={progress} max={100} /> </form> );}