Blob Storage: No Token Found Error

Help
1

Hey guys,

I am working on a recorder-app for a master’s thesis and I am struggling to use the vercel blob storage.

I want to use the Blob Storage to hold a user’s recordings. I am using client side since vercel recommends that for higher file sizes and I expect the recordings to be bigger than 4.5mb Currently I’ve not really built out the API and just scaffolded it just to the point where I can test the upload.

When the recording should be stored, an error is thrown: chunk-PCUSB4KF.js:39 Uncaught (in promise) BlobError: Vercel Blob: No token found. Either configure the BLOB_READ_WRITE_TOKEN environment variable, or pass a token option to your calls.

I’ve assumed that, since the blob storage is in the same project, I do not need to explicitly state the token. However, even manually getting it from the .env file and adding it to the options object, results in the same error.

Some help here would be much appreciated, since the web is still pretty empty surrounding vercel’s Blob store.

Here is my current method:

'use client'

import { put } from "@vercel/blob";

interface recordingsInterface {
    run: number;
    blob: Blob;
}

// Store a blob 
export const storeRecording = async ({run, blob} : recordingsInterface) => {

    const path = `recordings/userXY/${run}.webm`;

    const options  = {
        access: 'public',
        contentType: "video/webm",
    }

    const storedBlob = await put (path, blob, options);
};
2

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: Client Uploads with Vercel Blob

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.

2 Likes
3

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 :thinking: 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!

4

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) :+1:

1 Like
7

@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 :thinking:

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

import { handleUpload, type HandleUploadBody } from '@vercel/blob/client';
import { NextResponse } from 'next/server';
 
export async function POST(request: Request): Promise<NextResponse> {
  const body = (await request.json()) as HandleUploadBody;
 
  try {
    const jsonResponse = await handleUpload({
      body,
      request,
      onBeforeGenerateToken: async (
        pathname,
      ) => {
        // Todo: Authenticate the user here
 
        return {
          allowedContentTypes: ['video/webm'],
        };
      },
      onUploadCompleted: async ({ blob }) => {
        // Get notified of client upload completion
        console.log('blob upload completed', blob );

        // Hier callbacks nach dem erfolgreichen Upload einfügen
      },
    });
 
    return NextResponse.json(jsonResponse);

  } catch (error) {
    return NextResponse.json(
      { error: (error as Error).message },
      { status: 400 }, // The webhook will retry 5 times waiting for a 200
    );
  }
}
8

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.

1 Like
9

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!

2 Likes
10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

11

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!