React/Node/Mongodb/Multer error on image upload

Backend Development
1

Hello guys, i’m trying to upload an image from react, to my node server with multer, but i get always errors…

here my mongoose model:

const WeddingSchema = new mongoose.Schema(
    {
        name: {
            type: String,
            required: true,
        },

        // ...other stuff here

        images: {
            type: String,
            required: false
        }
    },
    { timestamps: true, strict: true }
)

my multer options:

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './uploads/')
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + file.originalname)
    }
})
const fileFilter = (req, file, cb) => {
    if (file.mimeType === 'image/jpeg' || file.mimeType === 'image/png') {
        cb(null,true)
    } else {
        cb(null, false)
    }
}
const upload = multer({
    storage: storage,
    limits: {
        fileSize: 1024 * 1024 * 15
    },
    fileFilter: fileFilter
})

my endpoint:

router.post('/weddings', verified, upload.single('weddingImage'), async (req, res, next) => {
    const wedding = new Weddings({
        name: req.body.name,
        location: req.body.location,
        weddingDate: moment(req.body.weddingDate),
        numberOfCustomers: req.body.numberOfCustomers,
        email: req.body.email,
        cellPhone: req.body.cellPhone,
        advancePayment: req.body.advancePayment,
        images: req.file.filename
    })
 
    try {
        const saveWedding = await wedding.save()
        res.status(200).send({
            message: ok',
            payload: saveWedding,
        })
    } catch (error) {
        res.status(404)
        next({
            statusCode: 404,
            message: 'error',
            error: error.message,
        })
    }
})

my form in react:

<form
                onSubmit={handleSubmitWedding}
                encType="multipart/form-data"
                className="flex flex-col justify-center items-center mt-4 px-6"
            >

          // ********** other input fields here

                <div className="flex flex-col">
                    <div className="mb-1">
                       Upload image
                    </div>
                    <input
                        name="weddingImage"
                        placeholder="immagine"
                        className="p-2 bg-zinc-100 rounded-md mb-3 text-black w-full"
                        type="file"
                        onChange={(e) => setWeddingForm({
                            ...weddingForm,
                            images: e.target.files[0]
                        })}
                    />
                </div>
                <button
                    className="p-2 bg-violet-500 hover:bg-violet-700 text-white rounded-md mt-4"
                    type="submit"
                >
                    Aggiungi
                </button>
            </form>

what i’m doing wrong?