Skip to content

@vercel/blob onUploadComplete does not trigger #874

@calmeart

Description

@calmeart

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions