Upload/Download Progress on Vercel Blob

[fahidsarker]

I am currently using vercel blob to store large files and not showing the progress results in a very bad user experience. Can we have this feature soon?

[luismeyer]

hey @fahidsarker,
this is on our roadmap and we are planning to implement this.

Are you using the multipart upload or the plain put method?

[xavimb]

We're having the same issue. We're using the multipart upload, typically with large files.

[patrickdevivo]

We're also using Vercel Blob and taking the client-side upload approach (in our Next.js app) and would love to show an upload progress bar, especially for larger file uploads.

[jonathantcrawford]

If you are using @vercel/blob/client package in a NetxtJs app router, I think I have a temp solution.

util.ts

"use server"
import { upload, generateClientTokenFromReadWriteToken } from "@vercel/blob/client";

import { ORIGIN } from "@/lib/constants";




export const secureGenerateClientTokenFromReadWriteToken = async ({
  userId,
  pathname,
}: {
  userId: string;
  pathname: string;
}) => {

  return generateClientTokenFromReadWriteToken({
    token: process.env.BLOB_READ_WRITE_TOKEN,
    pathname: pathname,
    onUploadCompleted: {
      callbackUrl: `${ORIGIN}/api/user/upload`,
      tokenPayload: JSON.stringify({
        userId,
      }),
    }
  })
}

Then from inside your client component.

        const pathname = `${user.id}/${file.name}`;
        const token = await secureGenerateClientTokenFromReadWriteToken({
          userId: user.id,
          pathname,
        });
        await axios.put(
          `https://blob.vercel-storage.com/${pathname}`,
          file,
          {
            headers: {
              "Authorization": `Bearer ${token}`,
            },
            onUploadProgress: (progressEvent) => {
              console.log(progressEvent);
            }
          }
        )
       ```