Uploading Image to Cloudinary Express.js React Axios post request

Question

I am trying to upload images to cloudinary using react front-end and express server. The problem is i cant properly post request image to my express server.

This is how i prepare image to send it later:

          var data = new FormData();
          console.log(event.target.files[0]) // this prints FileObject succesfully
          data.append('image', event.target.files[0]);
         console.log(data) // this prints {} but i guess its natural since its FormData ??
          this.imageToUpload = data;

This is how i post request:

 axios.post('/api/courses/uploadImage',this.imageToUpload, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }

    })
    .then( (response) => {
      alert(JSON.stringify(response));


    })
    .catch(function (error) {
      console.log(error);
    });

Now in server side,req.body is empty.

router.post("/courses/uploadImage",(req,res,next)=>{

    console.log(req.body) // empty
    var image = req.body;
   cloudinary.uploader.upload(image, function(error, result) { console.log(result) });


  })

Also what should i really put to first parameter of(image in this case) uploader.upload ?

Did you try using req.file.path in uploader.upload? Using body-parser might also help: https://stackoverflow.com/questions/9177049/express-js-req-body-undefined — Aditi Madan, Jan 31 '19 at 23:19

score 1 · Answer 1 · answered Jan 31 '19 at 22:17

1

Not a direct answer but if you want Cloudinary also offers a way to directly upload images from your front-end so it saves you some work. You can read here further.

I've worked with their widget and it is very simple to integrate into almost any app.

answered Jan 31 '19 at 22:17

U Rogel

1,893
15
30

score 1 · Answer 2 · answered Apr 07 '19 at 18:01

You can do like this. I have successfully tried in my project.

function upload(){
  var data = new FormData();
  data.append('image', event.target.files[0]);
  data.append('username', 'Saurabh'); //if you have other fields

  axios.post('/api/courses/uploadImage', data,
   headers: {
    //your headers
   })
  .then( (response) => {
   alert(JSON.stringify(response));
  })
  .catch(function (error) {
   console.log(error);
  });
}

In your express route you can simply get values like this

router.post('/api/courses/uploadImage', upload.single('image'), async(req,res, next) => {

 const result = await cloudinary.v2.uploader.upload(req.file.path);
 console.log(req.body.username); //Saurabh

 //your logic

});

score 0 · Accepted Answer · answered Feb 01 '19 at 09:23

0

I solved my problem by directly uploading images to cloudinary from client with their html5 codepen example.

answered Feb 01 '19 at 09:23

lastpeony4

549
1
9
22

1

please share the link – chirag prajapati Mar 10 '22 at 14:00

Uploading Image to Cloudinary Express.js React Axios post request

3 Answers3