Ошибка при отправке данных на сервер 400

Не видит файл, который я загружаю и появляется ошибка 400 (Bad Request)

фронт

import React, { useState, useEffect } from 'react';
import "./MainPage.css";
import { Link } from "react-router-dom";
import { useSelector } from 'react-redux';

const Bjd = () => {

    const [title, setTitle] = useState('');
    const [desc, setDesc] = useState('');
    const [image, setImage] = useState(undefined);
    const [data, setData] = useState({});
    const [produc, setProduc] = useState([]);
    const role = useSelector((state) => state.auth.role);

    useEffect(() => {
        fetch("http://localhost:3000/request")
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.log("Ошибка при загрузке данных ", error));
    }, []);

    const handleFileChange = (e) => {
        setImage(e.target.file);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();

        try {
            const formData = new FormData();
            formData.append('title', title);
            formData.append('description', desc);
            formData.append('image', image);
            

            const response = await fetch('http://localhost:3000/newrequest', {
                method: 'POST',
                body: formData,
            });

            if (response.ok) {
                console.log("Данные успешно отправлены на сервер");
                setTitle('');
                setDesc('');
                setImage('');

                const responseData = await response.json();
                if (responseData.products) {
                    setProduc(responseData.products.map((elem) => (
                        <div key={elem.id}>
                            <div style={{ marginLeft: "340px" }}>{elem.title}</div>
                            <div style={{ marginLeft: "340px" }}>{elem.desc}</div>
                            <div style={{ marginLeft: "340px" }}><a href={`http://localhost:3000/uploads/${elem.image}`}>{elem.image}</a></div>
                            <input type="file" placeholder="Выбрать файлы для ответа" onChange={handleFileChange} />
                        </div>
                    )));
                }
            } else {
                console.log("Ошибка при отправке данных на сервер");
                console.error('Error:', response.status);
                console.error('Error:', response.statusText);
                console.error('Error:', await response.text());
            }
        } catch (error) {
            console.log("Ошибка при отправке данных ", error);
        }
    };

    return (
        <>
            <h2>
                Основы безопасности жизнедеятельности
            </h2>
            <p style={{ marginLeft: "350px" }}>
                Все специальности / Бурение нефтяных и газовых скважин / Основы безопасности жизнедеятельности
            </p>
            <div className="div3">
                <Link to="/bur">
                    <img src="arrow.png" height="68" width="68" alt="arrow"/>
                </Link>
            </div>
            <div>
                <h2 style={{ marginLeft: "-658px" }}>Раздел Основы безопасности жизнедеятельности</h2>
                <img style={{ marginLeft: "340px" }} src="line.png" alt="line" />
            </div>
            <div>
                {role === "ADMIN" ? (
                    <form className="fo" onSubmit={handleSubmit}>
                        <input  className='title' type="text" placeholder="Заголовок" value={title} onChange={e => setTitle(e.target.value)} required />
                        <input className='desc' type="text" placeholder="Описание" value={desc} onChange={e => setDesc(e.target.value)} required />
                        <input className='fil' type="file" placeholder="Выбрать файлы" onChange={handleFileChange} />
                        <button className="zadan" type="submit">Добавить задание</button>
                    </form>
                ) : null}
                {produc}
            </div>
        </>
    );
};

export default Bjd;

бэк

import { sql } from "../db.js"

export async function uploadFiles(req, res) {
    try {
        if (!req.file || !req.body.title || !req.body.description) {
            throw new Error("Не хватает информации для выполнения запроса");
        }

        const { title, description } = req.body;
        const filename = req.file.filename;

        const data = await sql `insert into requests (title, description, image) values (${title}, ${description}, ${filename}) RETURNING *`;
        console.log({ data });
        res.send(data);
    } catch (error) {
        console.log("Ошибка при загрузке файла ", error);
        res.status(400).send({ error: error.message });
    }
}

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