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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions