How to upload image to server with image picker react native

Question

I want to upload image and upload to server. how can i get a file and can read in server?

const takePhotoFromLibraryProfile = () => {
    ImagePicker.openPicker({
      width: 200,
      height: 200,
      cropping: true,
    }).then(image => {
      setImageProfile(image.path);
    });
  };

and this my axios post

axios({
      crossDomain: true,
      method: 'post',
      url: 'url',
      data: {
        userId: dataProfile.id,
        pictures: imageProfile,
      },
      validateStatus: false,
    })
      .then((response, status) => {
        console.log(response);
        setSuccessModal(response.status);
      })
      .catch(function (error) {
        console.log(error);
        // need handling error
      });
  };

i got the respon and also false but in develop web can upload the image. Thank you

follow this link stackoverflow.com/questions/29489502/…

Abolfazl Roshanzamir
– Abolfazl Roshanzamir

2022-07-15 18:37:16 +00:00
Commented Jul 15, 2022 at 18:37 — Abolfazl Roshanzamir
– Abolfazl Roshanzamir, Commented Jul 15, 2022 at 18:37

Vicky Ahuja · Accepted Answer · 2022-02-12 10:21:28Z

1

To upload images to files to web servers, We cannot send it in the data property of Axios or fetch.

To Upload files or image, we have to convert the data into form data. And then we can send the form data to the webserver with the help of the Axios or fetch.

For Example:

const formData = new FormData()
formData.append('userId', dataProfile.id)
formData.append('pictures', {
    uri: user.profilePicture,
    type: 'image/jpeg',
    name: 'photo.jpg'
})

axios({
    method: 'post',
    url: 'url',
    data: formData,
  })
    .then((response, status) => {
      console.log(response);
      setSuccessModal(response.status);
    })
    .catch(function (error) {
      console.log(error);
      // need handling error
    });
};

edited Feb 12, 2022 at 10:21

answered Feb 12, 2022 at 5:39

Vicky Ahuja

1,2126 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nicholas Lindartono Over a year ago

i got an error formData.push is not a function. (In 'formData.push('userId', dataProfile.id)', 'formData.push' is undefined)

Nicholas Lindartono Over a year ago

thankyou, must use formData.append and add this on image uri: user.profilePicture, type: 'image/jpeg', name: 'photo.jpg',

Collectives™ on Stack Overflow

How to upload image to server with image picker react native

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related