Hello world, I need help uploading large files to Vercel blob using React JS and Node JS. I have already tried several solutions without concrete results. I would now like to use the Vercel Blob API to upload it on the client side.
import { handleUpload } from ‘@vercel/blob/client’;
export default async function BlobClient(request) {
const body = await request.json();
console.log('body', body);
try {
const jsonResponse = await handleUpload({
body,
request,
onBeforeGenerateToken: async (pathname /*, clientPayload */) => {
// Authenticate and authorize users here if needed
return {
allowedContentTypes: ['image/jpeg', 'image/png', 'image/gif'],
addRandomSuffix: true,
tokenPayload: JSON.stringify({
// Add custom payload if needed
}),
};
},
onUploadCompleted: async ({ blob, tokenPayload }) => {
// Handle post-upload logic here
console.log('blob upload completed', blob, tokenPayload);
try {
// Example: update user or database with blob.url
// const { userId } = JSON.parse(tokenPayload);
// await db.update({ avatar: blob.url, userId });
} catch (error) {
throw new Error('Could not update user');
}
},
});
return new Response(JSON.stringify(jsonResponse), {
headers: { 'Content-Type': 'application/json' },
});
} catch (error) {
return new Response(
JSON.stringify({ error: error.message }),
{
status: 400,
headers: { 'Content-Type': 'application/json' },
}
);
}
}