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.

[vvo]

Hey there, we just published a preview version of @vercel/blob which includes a way to track the progress of uploads.

If you want to try it, please upgrade to @vercel/[email protected] in your package.json. Then use it this way:

// also works with upload()
const blob = await put('file.pdf', file, {
  onUploadProgress(event) {
    console.log(event.loaded, event.total, event.percentage);
  }
});

If you're using Next.js and getting errors about undici, please upgrade to at least [email protected] or force undici to be at version 5 in your package.json using pnpm overrides for example: https://pnpm.io/package_json#pnpmoverrides.

cc @fahidsarker @xavimb @patrickdevivo @jonathantcrawford @alan-funded @neoromantic @Vitalii-Hurieiev

[alan-funded]

Thanks, this will allow our customers to know their upload is actually happening :)

…

On Fri, Oct 25, 2024 at 3:50 PM Vincent Voyer ***@***.***> wrote: Hey there, we just published a preview version of @vercel/blob which includes a way to track the progress of uploads. If you want to try it, please upgrade to @***@***.*** in your package.json. Then use it this way: // also works with upload()const blob = await put('file.pdf', file, { onUploadProgress(event) { console.log(event.loaded, event.total, event.percentage); }}); If you're using Next.js and getting errors about undici, please upgrade to at least ***@***.*** or force undici to be at version 5 in your package.json using pnpm overrides for example: https://pnpm.io/package_json#pnpmoverrides. cc @fahidsarker <https://github.com/fahidsarker> @xavimb <https://github.com/xavimb> @patrickdevivo <https://github.com/patrickdevivo> @jonathantcrawford <https://github.com/jonathantcrawford> @alan-funded <https://github.com/alan-funded> @neoromantic <https://github.com/neoromantic> @Vitalii-Hurieiev <https://github.com/Vitalii-Hurieiev> — Reply to this email directly, view it on GitHub <#642 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BDME3BVUJIGXSXGKYOP7JOLZ5LDLFAVCNFSM6AAAAABFQN2WQGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMZYHE4TANRUGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[vvo]

@alan-funded I am curious: are the uploads from your customers big enough that upload progress is needed? I think it's always a valuable info, just curious here

[alan-funded]

Tens of megabytes, but often from cell phone, and on the go. AlanOn Oct 25, 2024, at 4:26 PM, Vincent Voyer ***@***.***> wrote: @alan-funded I am curious: are the uploads from your customers big enough that upload progress is needed? I think it's always a valuable info, just curious here —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[fahidsarker]

Huge thanks to the team for the update. Will close the issue as it has been resolved.

[arazardev]

@vvo Hey, im just using Vercel Blob for the first time and this works with no problem! Thanks for this feature. In argentinian i'll say: ¡qué grande!

[vvo]

Nice @arazardev! Will publish a stable version this week then

[vvo]

This feature is now released in @vercel/[email protected], it's compatible with Node.js, browsers, client or server uploads, and most recent Next.js versions too.

[vvo]

For everyone here, since this was a well followed ticket, I wanted to raise your awareness on an upcoming change we'd like to do on Vercel Blob SDK: no more random suffixes by default. Please join the conversation here:
https://x.com/vvoyer/status/1854816275173634175