vercel / vercel/storage

@vercel/blob onUploadComplete does not trigger

Open
#874 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
595
Forks
101
Avg merge
2h 24m
Merged PRs (30d)
1

Description

Hello,

I am having an issue with vercel upload, I am following the documentation for client upload and it used to work, but recently I realized even though handleUploadUrl is getting a request and the file is uploaded to vercel blob storage, it doesn't save blob url to my database. Hera are my details. I am using ngrok in localhost but its similar in staging and production as well.

Packages: "next": "14.2.23", "@vercel/blob": "^1.1.1",

Here is my code, I placed couple of console.logs to investigate

export default async function handler(request: NextApiRequest, response: NextApiResponse) {
	const { query } = request;
	const id: string = query.id as string; //fund id

	// Check if this is a Vercel Blob webhook request
	const isWebhook = request.headers['x-vercel-signature'] !== undefined;

	try {
		if (!isWebhook) {
			// some logic
		}

		if (request.method === 'DELETE') {
			// delete file logic
		} else if (request.method === 'POST') {
			const body = request.body as HandleUploadBody;
			console.log('Request body received: ', body);

			const jsonResponse = await handleUpload({
				body,
				request,
				onBeforeGenerateToken: async (pathname) => {
					return {
						allowedContentTypes: ['image/jpeg', 'image/png'],
						tokenPayload: JSON.stringify({
							fundId: id,
						}),
					};
				},
				onUploadCompleted: async ({ blob, tokenPayload }) => {
					console.log('blob upload completed', blob, tokenPayload);

					try {
						// store blob.url logic
					} catch (error) {
						console.error('Error updating fund:', error);
						throw new CustomError(400, 'Could not update fund');
					}
				},
			});

			console.log('Json response: ', jsonResponse);

			return response.status(200).json(jsonResponse);
		} else {
			return response.status(405).json({ message: 'Method not allowed' });
		}
	} catch (error) {
		// The webhook will retry 5 times waiting for a 200
		customErrorHandler(error, response);
	}
}

And here is the logs I received, I get isWebhook, request body received, and even jsonResponse, but console.log('blob upload completed', blob, tokenPayload); does not hit.

✓ Compiled <my-api-handler> in 502ms (457 modules)
Is webhook: false
Request body received:  {
  type: 'blob.generate-client-token',
  payload: {
    pathname: 'fund_logos/logo_black.png',
    callbackUrl: 'http://localhost:3000/<my-api-handler>',
    clientPayload: null,
    multipart: false
  }
}
Json response:  {
  type: 'blob.generate-client-token',
  clientToken: <vercel_blob_client_token>
}
 POST <my-api-handler> 200 in 3803ms

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Next.js API handler shown in the report and trace the handleUpload POST flow, including the callbackUrl and onUploadCompleted entry point. Reproduce the client-token request and inspect the webhook callback path; done means the completion callback is invoked after upload and the blob URL can be persisted as described.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, typescript
Domain
api, backend, cloud
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.