Выводится пустой formData при отправке формы на сервер, Next.js
В первом отрывке кода находится клиентская часть, в которой заполняется форма и создаётся запрос
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const selectedFile = fileInputRef.current?.files?.[0];
if (!selectedFile) {
console.error('No file selected');
return;
}
const formData = new FormData();
console.log(title);
console.log(description);
console.log(selectedFile);
formData.append('file', selectedFile);
formData.append('title', title);
formData.append('description', description);
console.log(formData);
try {
const response = await fetch('/api/get-posts', {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
},
body: formData,
});
console.log(response.json());
if (!response.ok) {
throw new Error('Failed to submit form data');
}
console.log('Form submitted successfully');
} catch (error: any) {
console.error('Error submitting form:', error.message);
}
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
};
<p>
<label htmlFor='file'>Выбрать файл:</label>
<input
name='file'
ref={fileInputRef}
type='file'
/>
Запрос отправляется на сначала в middleware для обработки данных multer.ом (вот код);
import multer from 'multer';
import type { NextApiRequest, NextApiResponse } from 'next'
const storage = multer.memoryStorage();
const upload = multer({ storage });
export const uploadFile = upload.single('file');
if (upload.single('file')) {
console.log('ok');
}
export const config = {
api: {
bodyParser: false,
},
};
console.log('Running middleware...');
export function runMiddleware(
req: NextApiRequest,
res: NextApiResponse,
fn: any
) {
return new Promise((resolve, reject) => {
fn(req, res, (result: any) => {
if (result instanceof Error) {
console.log(result);
return reject(result);
}
console.log('Middleware finished');
return resolve(result);
});
});
}
А затем - на сервер Next.js, где Cloudinary создаёт удобный URL для отображения Image, а Prisma загружает данные в БД, откуда потом берутся данные для отображения на клиенте
const prisma = new PrismaClient();
export const POST = async (
req: NextApiRequest & { file?: Express.Multer.File },
res: NextApiResponse
) => {
const pathCloudinary =
'https://api.cloudinary.com/v1_1/dibep0qk1/image/upload';
try {
const { title, description } = req.body;
console.log('Before middleware');
await runMiddleware(req, res, uploadFile);
console.log('After middleware');
const file = req.file;
console.log('File:', file);
if (!file) {
throw new Error('No file uploaded');
}
const blob = new Blob([file.buffer], { type: file.mimetype });
const formDataCloudinary = new FormData();
formDataCloudinary.append('file', blob, file.originalname);
formDataCloudinary.append('upload_preset', 'z0wei8ze');
const uploadResponse = await fetch(pathCloudinary, {
method: 'POST',
body: formDataCloudinary,
});
if (!uploadResponse.ok) {
throw new Error(
`Failed to upload file to Cloudinary: ${uploadResponse.statusText}`
);
}
const uploadResult = await uploadResponse.json();
const result = await prisma.post.create({
data: {
title,
description,
content: uploadResult.secure_url,
},
});
await prisma.$disconnect();
return NextResponse.json({ result });
} catch (error: any) {
console.error(error);
await prisma.$disconnect();
return NextResponse.json({ error: error.message }, { status: 500 });
}
};
В общем, как видно, у меня срабатывает ошибка, которая обозначена в коде 'No file uploaded', т.к formData выводится в логе пустая. Если есть решение или общие рекомендации к улучшению кода, буду рад послушать. Это мой первый проект с middleware, да и нейросеть мне тут помогает как может, но она уже не справляется и не может подсказать решение проблемы.