diff --git a/app/api/upload/route.ts b/app/api/upload/route.ts new file mode 100644 index 0000000..055fb31 --- /dev/null +++ b/app/api/upload/route.ts @@ -0,0 +1,48 @@ +import { handleUpload, type HandleUploadBody } from '@vercel/blob/client'; +import { NextResponse } from 'next/server'; + +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 */ + ) => { + return { + allowedContentTypes: ['image/jpeg', 'image/png', 'image/gif'], + 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('blob 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 }); + return; + } catch (error) { + throw new Error('Could not update user'); + } + }, + }); + + 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 + ); + } +} diff --git a/app/entities/common/Footer.tsx b/app/entities/common/Footer.tsx index 6d84700..4b03be1 100644 --- a/app/entities/common/Footer.tsx +++ b/app/entities/common/Footer.tsx @@ -1,28 +1,26 @@ +'use client'; import Link from 'next/link'; +import useToast from '@/app/hooks/useToast'; const Footer = () => { + const toast = useToast(); + return (