@vercel/blob onUploadComplete does not trigger
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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