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!);
}
