Vercel Blob now supports file upload progress - Vercel

1 / 3

Vercel Blob now supports file upload progress - Vercel

Vercel News·Vincent Voyer·2 days ago

#My6ycFOx

#vercel #upload #file #progress #blob

Reading 0:00

15s threshold

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>
  );
}

Try it out or learn more about Vercel Blob.

Menu

Vercel Blob now supports file upload progress - Vercel