Error: Vercel Blob: Access denied, please provide a valid token for this resource

[eibelsalil]

Im trying to upload an image file using client upload method using pages route code given in vercel documentation. Client token is being generated successfully but the upload fails with 403.

Im using:

"next": "^13.5.2", "@vercel/blob": "^0.14.1",

[luismeyer]

Hey @eibelsalil,

is this maybe a duplicate of https://github.com/vercel/storage/issues/443.

tl;dr of this issue: when your upload takes longer than 30 seconds the temporary clientToken expires and the authentication fails. To fix this you can pass the validUntil field in your upload route to handle longer upload times.

[vvo]

@eibelsalil just in case, are you perhaps using allowedContentTypes? When a content type does not match then it will send a 403 error. I'll close this issue and if you have more feedback/details let us know.

[ej020586]

@vvo i'm having the same issue with the client upload even through I've verified the validUntil and allowedContentTypes.

[vvo]

@ej020586 can you create a private repository demonstrating the issue and share it with us? That would be very helpful, my email: vincent.voyer@vercel.com

[zeekrey]

I just received the same error and solved it for now by not using the allowedContentTypes option. What is the correct content type for a PDF? I tried allowedContentTypes: ["image/jpeg", "image/png", "application/pdf"], but I still received the error mentioned above.

If this error is related to the content type, perhaps the error message could be enhanced.

[luismeyer]

@zeekrey application/pdf is correct. Does your filepath contain the .pdf extname? Otherwise we can't infer the contentType. You're right we could enhance the error message here 👍

Could you share an example to reproduce this issue?

[zeekrey]

Hey @luismeyer, I took some time to figure it out: The issue appears to be with special characters such as '#'. I utilized the file name within the path, like this:

const path = `${organization}/${member}/${filename}`;

When users attempt to upload a file with a name like this (as an example, the actual file name was "Fathom Invoice #890396-0030.pdf"), they will encounter the following error message:

Error: Vercel Blob: Access denied, please provide a valid token for this resource

[luismeyer]

ah i see. I will create a bug ticket for this in our backlog, thanks for investigating @zeekrey

[zeekrey]

@luismeyer, would it be alright with you if I create a bug ticket here on GitHub? That way, you can close it once it's resolved and I'll receive a notification. 😇

[ironbunny-ib]

Hi, I am trying to client upload in svelte.. I am getting the error "Failed to retrieve client token"..

import { handleUpload } from '@vercel/blob/client';
import { BLOB_READ_WRITE_TOKEN } from '$env/static/private'
import { kv } from "@vercel/kv";
export  async function POST(
  request
) {
  let body = request.request.body
  const response = new Response();
  try {
    const jsonResponse = await handleUpload({
      BLOB_READ_WRITE_TOKEN,
      body,
      request,
      onUploadCompleted: async ({ blob }) => {
        // Get notified of client upload completion
        // ⚠️ This will not work on `localhost` websites,
        // Use ngrok or similar to get the full upload flow

        console.log('blob upload completed', blob);

        try {
          // Run any logic after the file upload completed
          // const { userId } = JSON.parse(tokenPayload);
          // await db.update({ avatar: blob.url, userId });

        let user = await kv.get(`inko3_${email}`)
        user["video_url"] = blob.url
        await kv.set(`inko3_${email}`,user);
        // cookies.set('user', JSON.stringify(user),{ path: '/mycode' });

        } catch (error) {
          throw new Error('Could not update user');
        }
      },
    });
    console.log("I am terrified")
    return response.json(jsonResponse)
  } catch (error) {
    // The webhook will retry 5 times waiting for a 200

    console.log("I am terrified too")
    return response.json({ error: error.message }, { status: 400 }, )
  }
}

[luismeyer]

hi @ironbunny-ib,

Line 11 of your code should be:

token: BLOB_READ_WRITE_TOKEN,

since handleUpload options don't accept a BLOB_READ_WRITE_TOKEN prop.

[ironbunny-ib]

I am not using the this code now, sorry!