Выводится пустой 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, да и нейросеть мне тут помогает как может, но она уже не справляется и не может подсказать решение проблемы.


Ответы (0 шт):