# Vercel Blob now supports file upload progress

**Published:** November 20, 2024 | **Authors:** Vincent Voyer, Luis Meyer

---

Vercel Blob can now track file upload progress, enabling for a better user experience when uploading files.

With the latest [`@vercel/blob`](https://vercel.com/docs/storage/vercel-blob/using-blob-sdk) 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.

```jsx
"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>
  );
}
```

[Try it out](https://vercel.com/dashboard/stores) or [learn more about Vercel Blob](https://vercel.com/docs/storage/vercel-blob).

---

📚 **More updates:** [View all changelog entries](/changelog/sitemap.md) | [Blog](/blog/sitemap.md)