import { handleUpload, type HandleUploadBody } from '@vercel/blob/client'; import { NextResponse } from 'next/server'; /* * This route is used to upload files to Vercel's Blob Storage. * Example from https://vercel.com/docs/storage/vercel-blob/client-upload#create-a-client-upload-route */ export async function POST(request: Request): Promise { const body = (await request.json()) as HandleUploadBody; try { const jsonResponse = await handleUpload({ body, request, onBeforeGenerateToken: async ( pathname, /* clientPayload */ ) => { // Generate a client token for the browser to upload the file // ⚠️ Authenticate and authorize users before generating the token. // Otherwise, you're allowing anonymous uploads. return { allowedContentTypes: [ 'image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'text/plain', ], tokenPayload: JSON.stringify({ // optional, sent to your server on upload completion // you could pass a user id from auth, or a value from clientPayload }), }; }, onUploadCompleted: async ({ blob, tokenPayload }) => { // Get notified of client upload completion // ⚠️ This will not work on `localhost` websites, // Use ngrok or similar to get the full upload flow console.log('file upload completed', blob, tokenPayload); try { // Run any logic after the file upload completed // const { userId } = JSON.parse(tokenPayload); // await db.update({ avatar: blob.url, userId }); } catch (error) { throw new Error('Could not complete operation'); } }, }); return NextResponse.json(jsonResponse); } catch (error) { return NextResponse.json( { error: (error as Error).message }, { status: 400 }, // The webhook will retry 5 times waiting for a 200 ); } }