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.

Pro customers can now set up to three regions for their Vercel Functions, enabling compute to run closer to distributed data sources for faster responses and improved performance. When multiple Vercel Function regions are configured, user requests that require compute will be routed to the closest specified region.

Previously, functions for Pro customers were restricted to a single region. Increasing to thee regions enables:

• Global low-latency

• Maintaining high compute density leading to higher cache hit rates and lower cold starts

• Compatibility with standard database replication like Postgres read replicas

This also adds an extra layer of redundancy, complementing the built-in multi-Availability Zone redundancy of Vercel Functions.

To configure additional regions, add a regions property to your vercel.json.

{
  "regions": ["sfo1", "lhr1", "sin1"]
}

Redeploy your project for the changes to take effect. Learn more about configuring regions.

Skew Protection eliminates version differences between web clients and servers—available for Pro and Enterprise customers. Starting today, new projects will have Skew Protection enabled by default.

Existing projects will not be changed, however you can manually enable Skew Protection in the project's settings.

Skew Protection ensures client-side code matches the server-side code for the corresponding deployment for a period of time or until a hard page refresh. This protects from version mismatch errors when creating a new deployment, such as file name changes from hashed bundles or even post backs from Server Actions.

Learn more about Skew Protection.