skip to Main Content

I am trying to add a pictire to the MongoDB via Multer and NodeJS.
The Multer storage is created.
The middleware based on Multer called upload is inserted into the POST request.
But when I carry out POST request, req.file is undefined.
What is the reason for that?

routes:

const express = require('express');
const Menu = require("../models/menu");
const Image = require("../models/image");
const router = express.Router();
const multer = require("multer");

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
      cb(null, "./images/");
  },
  filename: (req, file, cb) => {
      cb(null, file.originalname);
  }
});

const upload = multer({storage: storage});

const getMenu = (req, res) => {
    Menu
      .find()
      .then((menu) => res.status(200).json(menu))
      .catch((error) => console.log("Ops"));
  }


router.get('/api/menu', getMenu);

router.post("/upload", upload.single("articleImage"), (req, res) => {
  console.log("request----------------", req.file) // UNDEFINED
  // const image = new Image({
  //   articleImage: req.file.originalname
  // });
  // image
  //   .save()
  //   .then(() => res.json("Ok"))
  //   .catch((error) => console.log(error));
})

module.exports = router;

front form:

import axios from 'axios';
import React, { useState } from 'react';

const NewAdvertisement = () => {
    const [file, setFile] = useState(null);
    file && console.log(file.name);
    const onSubmit = (e) => {
        e.preventDefault();
        const fd = new FormData();
        fd.append("articleImage", file.name);
        console.log("fd", fd);
        axios
            .post("/upload", fd)
            // .then(res => console.log(res))
    }
    return (
        <form
            onSubmit = {onSubmit}
            encType="multipart/form-data"
        >
            <input type = "file" filename="articleImage" onChange = {e => setFile(e.target.files[0])}/>
            <button type = "submit">Submit</button>
        </form>     
    );
};

export default NewAdvertisement;

2

Answers


  1. You append only the file name to your form:

    fd.append("articleImage", file.name);
    

    but you must append the entire file object:

    fd.append("articleImage", file);
    
    Login or Signup to reply.
  2. it seems you are only posting file.name which is only name of file not binary data. check req.body.articleImage you will get it

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search