Getting error while making API call for multer to store files

Question

I created a node API using multer to store files and i'm getting error while calling it, please help. Bellow is the code and error -

Code -

const storage = multer.diskStorage({
    destination: './public/upload',
    filename: function(req, file, cb){
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

// initialize upload
const upload = multer({
    storage: storage,
    limits: {fieldSize: 100000}
}).single('myImage');

app.post('/upload', (req, res)=> {  
    upload(req, res, (err) => {
        if(err){
            res.json({
                msg: req.body,
            });
        }else {
            res.json({
                msg: 'File uploaded',
                file: `upload/${req.file.filename}`
            });
        }
    })
})

The error i'm getting while making API call is "name": "MulterError", "message": "Unexpected field", "code": "LIMIT_UNEXPECTED_FILE", "storageErrors": []

Still no luck, getting error - { "msg": { "name": "MulterError", "message": "Unexpected field", "code": "LIMIT_UNEXPECTED_FILE", "storageErrors": [] } } — Indrakant, May 25 '20 at 20:29
https://stackoverflow.com/questions/31530200/node-multer-unexpected-field — JackOfAshes - Mohit Gawande, May 25 '20 at 20:32

score 1 · Answer 1 · answered May 25 '20 at 21:50

Passing the filename works for me -

uploadFile = (e) =>{
  let file = e.target.files[0];
  let data = new FormData();
  data.append('myImage', file);
  axios.post('http://localhost:5000/upload', data, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
  }).then(res => this.setState({file: res.data.file}));
}

Adebayo Ilerioluwa · Answer 2 · 2020-05-25T23:38:47.417

0

On your Frontend code have you made sure the input name is myImage

If you are using HTML try using this code

   <input type=“file” name=“myImage” />

Suppose you are using the front end framework react

This piece of code should be in the submit/ uploadFile function

  const uploadFile = (e) =>{
       e.preventDefault();
      let file = e.target.files[0];
      let data = new FormData();
      data.append('myImage', file);
      axios.post('http://localhost:5000/upload', data, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
      }).then(res => this.setState({file: res.data.file}));
    }

I hope this helps

edited May 25 '20 at 23:38

answered May 25 '20 at 20:28

Adebayo Ilerioluwa

161
2
7

Using React in front end, and using same name {this.uploadFile(e)}} name="myImage" /> – Indrakant May 25 '20 at 20:32
Yes it works by passing name into KEY in API call. It was my bad, maybe i made it wrong. – Indrakant May 25 '20 at 21:01
Check my edited answer should help with using react – Adebayo Ilerioluwa May 25 '20 at 21:01
Try the react code and share any other issues you may be having – Adebayo Ilerioluwa May 25 '20 at 21:02
1st comment(was deleted) For debugging purpose you should try making a request on postman – Adebayo Ilerioluwa May 25 '20 at 21:07
Working code - uploadFile = (e) =>{ let file = e.target.files[0]; let data = new FormData(); data.append('fileName', file); axios.post('http://localhost:5000/upload', data, { headers: { 'Content-Type': 'multipart/form-data' } }).then(res => this.setState({file: res.data.file})); } – Indrakant May 25 '20 at 21:49

score 0 · Answer 3 · answered Aug 21 '20 at 21:37

0

limits: {fileSize: 100000}

I didn't check it but I believe it has to be fileSize not fieldSize, probably

answered Aug 21 '20 at 21:37

Magic Realism

19
2

Getting error while making API call for multer to store files

3 Answers3