(edited)
am having trouble with api route deployed on Vercel. POST request does not handle FormData and return an error: Unexpected end of JSON input. But it works locally on my machine. Request header content type is multipart/form-data; boundary=----formdata-undici-038889596180.
collecting formData:
const onSubmit = (values: z.infer<typeof SlideSchema>) => { const formData = new FormData();
if (inputFileRef.current?.files?.length) { const file = inputFileRef.current.files[0];
formData.append('files', file, inputFileRef.current.files[0].name); }
// If has new image pass formData const data = formData.get('files') ? { ...values, image: formData, } : values;
startTransition(() => { if (!imagePreview) { toast({ description: ( <ToastMessage data={{ message: 'Зображення обовязкове!', success: false }} /> ), });
return; }
if (user && imagePreview) { handleCreateUpdateMainCarouselSlide(data, user.id!, editMode) .then((data) => { if (data.success && !editMode) { mainForm.reset(defaultValues); setImagePreview(null); }
// if (data.success && editMode) mainForm.reset(data.result);
toast({ description: <ToastMessage data={data} />, }); }) .catch((e) => { console.log('error', e); }); } }); };function to upload file:
export const uploadFile = async ( formData: FormData, endpoint: string, folder: string,) => { const url = `${getOrigin()}${endpoint}`;
try { const response = await fetch(url, { method: 'POST', body: formData, headers: { 'X-Upload-Folder': folder, }, }); const data = await response.json();
return data; } catch (error) { console.log('error', error);
return { errors: [error] }; }};api route that does not work on Vercel:
export async function POST(request: NextRequest) { // const folder = request.headers.get('X-Upload-Folder'); const formData = await request.formData(); const files = formData.get('files');
return NextResponse.json({ files });
// return await uploadFile(request, folder!);}