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

[Vitalii-Hurieiev]

This progress functionality is important for our project as well. Displaying the download progress is essential for users, as varying file sizes or slow internet connections can make the process appear frozen.

[alan-funded]

Important for us also, we have mobile users thinking the upload did not work, and uploading a second time.

[neoromantic]

Any idea on whether it'll be implemented anytime soon?

I need to understand should I move to S3 uploads instead of Vercel Blob or not.