CODEWITHSUNDEEP
javascriptnode.jsreactjsexpressfetch-api
Programming Sam
Programming Sam

Reputation: 9

Node JS, React JS, using Fetch API to POST image as Form Data *500 error*

I am new to node js. I am trying to send an image uploaded by the user to be stored in my backend using express js, but I keep getting a 500 error. What am I missing?

This is my front end code:

const formData = new FormData();
        formData.append("myImage",this.state.fotoSelected);
        fetch("http://localhost:9000/producto", {
            method: 'post',
            body: formData,
            headers: {
                'Content-Type': 'multipart/form-data'
            },
        })
            .then(response => {
                return response
            })
            .catch(error => console.error('Error:', error))
            .then(response => console.log('Success:', response));
    }

And this is the backend

const multer = require('multer');
const upload = multer({
  limits:{fileSize: 1000000},
}).single("myImage");

router.post('/', function (req, res) {
  upload(req, res, function (err) {
      iconsole.log("Request ---", req.body);
      console.log("Request file ---", req.file)
      if(!err) {
          return res.send(200).end();
      }
  })
})

Upvotes: 0

Views: 1054

Answers (1)

Quentin
Quentin

Reputation: 943556

When you pass fetch a FormData object it will generate a suitable Content-Type header automatically.

You are overriding that with 'multipart/form-data' which is missing the mandatory boundry attribute. Don't do that.

Upvotes: 1

Related Questions