CODEWITHSUNDEEP
javascriptreactjsexpressaxioscloudinary
lastpeony4
lastpeony4

Reputation: 577

Uploading Image to Cloudinary Express.js React Axios post request

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 ?

Upvotes: 0

Views: 1851

Answers (3)

Saurabh Joshi
Saurabh Joshi

Reputation: 267

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

});

Upvotes: 1

lastpeony4
lastpeony4

Reputation: 577

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

Upvotes: 0

U Rogel
U Rogel

Reputation: 1941

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.

Upvotes: 1

Related Questions