How to set authorization header for upload.handleUploadUrl

[maxfriedmann]

I am using the upload method from @vercel/blob/client in a sveltekit app (w svelte5) and I am missing the possibility to add an authorization header on the request sent from client to my api. I need the authorization header in the server code below marked with "// HERE"

(I adopted the sample code from the next.js example in the documentation)

Client

import { upload } from "@vercel/blob/client";

const newBlob = await upload(file.name, file, {
  access: "public",
  handleUploadUrl: "/api/files/upload"
});

Server (src\routes\api\files\upload+server.ts)

import { error, json } from "@sveltejs/kit";
import { handleUpload, type HandleUploadBody } from "@vercel/blob/client"; 

export async function POST({ request }) {
	const body = (await request.json()) as HandleUploadBody;

// EITHER HERE

	try {
		const jsonResponse = await handleUpload({
			body,
			request,
			onBeforeGenerateToken: async (
				pathname
				/* clientPayload */
			) => {
				// Generate a client token for the browser to upload the file
				// ⚠️ Authenticate and authorize users before generating the token.
				// Otherwise, you're allowing anonymous uploads.
				
// OR HERE

				return {
					allowedContentTypes: ["image/jpeg", "image/png", "image/gif"],
					tokenPayload: JSON.stringify({
						// optional, sent to your server on upload completion
						// you could pass a user id from auth, or a value from clientPayload
					})
				};
			},
			onUploadCompleted: async ({ blob, tokenPayload }) => {
				// 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, tokenPayload);

				try {
					// Run any logic after the file upload completed
					// const { userId } = JSON.parse(tokenPayload);
					// await db.update({ avatar: blob.url, userId });
				} catch (error) {
					throw new Error("Could not update user");
				}
			}
 		});

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

[luismeyer]

hey @maxfriedmann,
this feature is definitely needed and we should get on it soon. I think this Issue here #420 is already describing you needs right?

If yes can you close this Issue so we only track this once

[maxfriedmann]

Hey @luismeyer,
indeed, you're right. I've seen this ticket before, but didn't look into the code deep enough. I think, if custom headers are forwarded from upload to retrieveClientToken the same way as requested by #420, it is exactly the same issue :) Closing in favor of #420.