Hey Max, this is Luis from the Vercel Blob Team.

The put method you are using is supposed to be called from the server because typically you don't want to expose your BLOB_READ_WRITE_TOKEN to your users. This has some security risks because with this token, anyone can read or write to your store as they want.

For client uploads, there is a specific section in our Docs here: https://vercel.com/docs/storage/vercel-blob/client-upload

These docs explain how to expose an endpoint that issues short-lived Client Tokens. Because Client Tokens expire and add some other restrictions, they are safe to use on the client directly.

I hope this explanation helps. Let me know if I can help you any further.

Hey @luimey !

Thank's for getting back to me. So I chose to go with the client upload, since i expect the files i upload to exceed the 4.5mb file size limit that the docs mention 🤔 Is this outdated info?

So you say: IF i go with client side upload, I should refactor my method to use client tokes. that's a good hint!

Nope, that limitation is correct. This is given by the Vercel Function Payload Limit.

And yes if you want to upload from the client it's best to follow the Docs I linked (the Client-Token is really an implementation Detail. You won't actually use the Tokens we have helper functions for that) 👍

@luimey scrap that, I was able to refactor my code, so that I am now able to perform the action as intended using async and the API route. However, retrieveClientToken now throws an error "BlobError: Vercel Blob: Failed to retrieve the client token 🤔

I've created an implementation similar to what you recommended, following the docu. But I don't quite understand the part where I have to retrieve the client token

1import { handleUpload, type HandleUploadBody } from '@vercel/blob/client';2import { NextResponse } from 'next/server';3 4export async function POST(request: Request): Promise<NextResponse> {5  const body = (await request.json()) as HandleUploadBody;6 7  try {8    const jsonResponse = await handleUpload({9      body,10      request,11      onBeforeGenerateToken: async (12        pathname,13      ) => {14        // Todo: Authenticate the user here15 16        return {17          allowedContentTypes: ['video/webm'],18        };19      },20      onUploadCompleted: async ({ blob }) => {21        // Get notified of client upload completion22        console.log('blob upload completed', blob );2324        // Hier callbacks nach dem erfolgreichen Upload einfügen25      },26    });27 28    return NextResponse.json(jsonResponse);2930  } catch (error) {31    return NextResponse.json(32      { error: (error as Error).message },33      { status: 400 }, // The webhook will retry 5 times waiting for a 20034    );35  }36}

It's hard to diagnose this issue without access to the code. You should be able to see a more detailed error in your browser's Network tab.

If I had to guess, this is happening because either your route handler is missing access to BLOB_READ_WRITE_TOKEN, or you specified the wrong handleUploadUrl in the client.

Either way, the Network tab should provide clarification on this.

Hey Mate, thank's alot! I was able to debug it with your help. I had updated the Blob token, prefixing it with NEXT_PUBLIC_ somewhere earlier when I tried to debug my first attempt at blob upload.

Anyway, that helped. Thank you very much!

Hey, @maxfriedmann!

Since you're a Blob storage user, I wanted to share this post with you in case it's helpful. Would love your feedback! https://community.vercel.com/t/we-want-your-feedback-on-the-vercel-blob-sdk/1920