Client Uploads with Vercel Blob - Token issue - Help

I'm trying to upload a json file to Vercel Blob form server.

On the client:

import { upload } from '@vercel/blob/client';
await upload(file.name, file, {
        access: 'public',
        handleUploadUrl: '/api/upload',
        clientPayload: fileId,
 });

Server handler:

import { handleUpload, type HandleUploadBody } from '@vercel/blob/client';

export async function POST(request: NextRequest) {
  const session = await auth();

  const userId = session?.user?.id;

  if (!session || !session.user || !userId) {
    return new Response('Unauthorized', { status: 401 });
  }

  const body = (await request.json()) as HandleUploadBody;

  const token = process.env.BLOB_READ_WRITE_TOKEN;
  console.log('BLOB_READ_WRITE_TOKEN ', { token });

  try {
    const jsonResponse = await handleUpload({
      token,
      request,
      body,
      onBeforeGenerateToken: async (
        pathname: string,
        clientPayload: string | null
      ) => {
        if (!clientPayload) {
          throw new Error('Missing fileId');
        }

        await createImportData({
          id: clientPayload,
          userId,
          createdAt: new Date(),
        });

        console.log('File import data created: ', { clientPayload });

        const validUntil = Math.floor(Date.now() / 1000) + 10 * 60; // 10 minutes
        return {
          allowedContentTypes: ['application/json'],
          validUntil,
          tokenPayload: JSON.stringify({
            fileId: clientPayload,
          }),
        };
      },
      onUploadCompleted: async ({ blob, tokenPayload }) => {
        console.log('Blob upload completed');
        const { fileId } = JSON.parse(tokenPayload || '{}');

        try {
          processFileFromBlob(blob.downloadUrl, userId, fileId);
        } catch (error) {
          console.log('Error Processing the file: ', { fileId });
          updateImportDataStatus({ id: fileId, status: 'error' });
          throw error;
        }
      },
    });

    return NextResponse.json(jsonResponse);
  } catch (error) {
    console.error('Error processing file:', error);
    return NextResponse.json(
      { message: 'Error processing file' },
      { status: 500 }
    );
  }
}

The problem is that on the client i get wrong token and get 403 error. Also, if i try to return my token from env manually like so: return NextResponse.json({ ...jsonResponse, clientToken: token }); Then file uploads to Vercel Blob storage - i could even go and see it by returned url. But then, method onUploadCompleted at the server doesn't evoke after file upload. What i'm doing wrong? Why handleUpload method from vercel returning wrong token and why my onUploadCompleted method doesn't work?>

Vercel Staff

Thank you for reporting this. We're investigating now.

Please follow the status page for the latest updates: https://www.vercel-status.com/incidents/krt5zyy2fmqx

Vercel Staff

The incident has been resolved. Please let me know if you have any more trouble with it

I'm sory, but what exactly did you resolve? I'm still facing the same issues. Token, returned from method import { handleUpload } from '@vercel/blob/client'; on the server is invalid. Method onUploadCompleted Still not resolving after file upload

Vercel Staff

It sounds like you an issue unrelated to the incident mentioned above.

Can you verify that the value for BLOB_READ_WRITE_TOKEN is correct and available in the environment used? For example, if you're running this in a preview deployment then you would need to make sure that the blob store is available to Preview.

Note that you may run into issues with this in your local development environment if the token is missing or invalid in your local repo. You can pull in the BLOB_READ_WRITE_TOKEN value by running vercel env pull. But there may also be some other issues with localhost:

When your local website is served on http://localhost:3000 , then the onUploadCompleted step won't succeed as Vercel Blob cannot contact your localhost. Instead, we recommend you run your local application through a tunneling service like ngrok, so you can experience the full Vercel Blob development flow locally.

Yep, probably the issue with onUploadCompleted is that i'm running app at local.

But issue with Token is still not resolved. BLOB_READ_WRITE_TOKEN is configured in Vercel account & pulled to local environment via VercelCLI. If i pass my token directly from server env to client like so return NextResponse.json({ ...jsonResponse, clientToken: process.env.BLOB_READ_WRITE_TOKEN }); Then token is valid, uploading to Vercel Blob successful. I then could go to my Vercel account & see uploaded file. But when i return token via method import { handleUpload } from '@vercel/blob/client'; from server - it has some prefix vercel_blob_client_ then goes my token, and then some random string. So token looks like so vercel_blob_client_(MY_ACTUAL_TOKEN)dGNJbVpwYkdWSlpGd2lPbHdpTWpCak1XVmhNR0l.... And this token is invalid, and i got "Vercel Blob: Access denied, please provide a valid token for this resource." When i try to upload my file to Vercel Blob then.

Vercel Staff

Sorry you're facing issues with this, a few notes:

BLOB_READ_WRITE_TOKEN should never be used on the client (browser), do not pass it to the browser. This is your "admin token" and as such should remain only on the server
vercel_blob_client is a "client token" to be used by clients/browsers

When using Vercel Blob, you have two ways to do it:

server uploads: your web app sends a POST /api/upload to one of your server route and the server route call put() which uses BLOB_READ_WRITE_TOKEN by default
client uploads: your web app uses upload() which itself calls a route on your server on which you use handleUpload. Then handleUpload generates a client token for you and upload() on the browser will use that to call our APIs.

Make sure to check our documentation on these two patterns:

And if something is still not working please write back to me with details on which method you're using and your findings. Thanks!

Thank you for your reply! Yep, i read carefully thru documentation. I'm trying to make client side upload. For this i'm using upload() method on client, which before going to Blob api - going to my API first for token (i'm provide code at my question above). And the problem is, that the token which is generated by method handleUpload() and returning back to client is not valid. Why? I'm using basically i'm using the code from example from ducumentation https://vercel.com/docs/vercel-blob/client-upload So again - why the token, generated by method handleUpload() is not valid at client? Maybe i miss some steps of authentication or something?

Vercel Staff

The problem is that on the client i get wrong token and get 403 error.

Can you inspect in Google Chome and see if there are more details in console or network?

Can you make sure you're using the latest version of the Blob package?

What's your store id? (find it in the settings tab of your store). Thanks!

This topic is closed. It no longer accepts new replies.

import { handleUpload, type HandleUploadBody } from '@vercel/blob/client'; export async function POST(request: NextRequest) { const session = await auth(); const userId = session?.user?.id; if (!session || !session.user || !userId) { return new Response('Unauthorized', { status: 401 }); } const body = (await request.json()) as HandleUploadBody; const token = process.env.BLOB_READ_WRITE_TOKEN; console.log('BLOB_READ_WRITE_TOKEN ', { token }); try { const jsonResponse = await handleUpload({ token, request, body, onBeforeGenerateToken: async ( pathname: string, clientPayload: string | null ) => { if (!clientPayload) { throw new Error('Missing fileId'); } await createImportData({ id: clientPayload, userId, createdAt: new Date(), }); console.log('File import data created: ', { clientPayload }); const validUntil = Math.floor(Date.now() / 1000) + 10 * 60; // 10 minutes return { allowedContentTypes: ['application/json'], validUntil, tokenPayload: JSON.stringify({ fileId: clientPayload, }), }; }, onUploadCompleted: async ({ blob, tokenPayload }) => { console.log('Blob upload completed'); const { fileId } = JSON.parse(tokenPayload || '{}'); try { processFileFromBlob(blob.downloadUrl, userId, fileId); } catch (error) { console.log('Error Processing the file: ', { fileId }); updateImportDataStatus({ id: fileId, status: 'error' }); throw error; } }, }); return NextResponse.json(jsonResponse); } catch (error) { console.error('Error processing file:', error); return NextResponse.json( { message: 'Error processing file' }, { status: 500 } ); } }

It sounds like you an issue unrelated to the incident mentioned above.

When your local website is served on http://localhost:3000 , then the onUploadCompleted step won't succeed as Vercel Blob cannot contact your localhost. Instead, we recommend you run your local application through a tunneling service like ngrok, so you can experience the full Vercel Blob development flow locally.