React-native upload Image as FormData

Question

Need to Post image as formData in React-Native

The Form Data:

------WebKitFormBoundary4df7ukBk3N8GDzOl Content-Disposition: form-data; name="selfieImage"; filename="600px-Google_Drive_logo.png" Content-Type: image/png

------WebKitFormBoundary4df7ukBk3N8GDzOl--

I need to recreate the above using react-native-image-picker, this is my code:

Image Picker Code:

ImagePicker.showImagePicker(options, (response) => {
        console.log('Response = ', response);

        if (response.didCancel) {
          console.log('User cancelled image picker');
        } else if (response.error) {
          console.log('ImagePicker Error: ', response.error);
        } else if (response.customButton) {
          console.log('User tapped custom button: ', response.customButton);
        } else {
            formData = new FormData();
            formData.append("selfieImage", {
                name: 'selfieImage', 
                filename: response.uri
            })
            console.log(formData)

        //   this.setState({
        //     photo: formData,
        //   });
        }
      });

Axios Post Code:

 await axios({
        method: 'post',
        url: `${'{url}/home-security/image/selfie/' + this.state.newId}`,
        data: formData,
        config: { headers: {
            'Content-Type': 'multipart/form-data',
        }}
        })
        .then(function (response) {
            //handle success
            console.log(response);
        })
        .catch(function (response) {
            //handle error
            console.log(response);
        });

score 3 · Accepted Answer · answered Oct 24 '18 at 05:15

3

The method i know is to convert the image to base64 string and pass it through axios. but it's better to use a cloud service like AWS S3 to upload the image and send the image URL.

answered Oct 24 '18 at 05:15

Naveed Sheriffdeen

940
6
18
37

I can't, since the backend only accept the image in a formData type. – WilTree Oct 24 '18 at 17:50
1

then the best would be to use a cloud service like s3 or try this link https://snowball.digital/Blog/Uploading-Images-in-React-Native – Naveed Sheriffdeen Oct 25 '18 at 04:07
Thanks a lot, I finally can do it with the link you gave me. Changed the code quiet a bit and works flawlessly. Thanks – WilTree Oct 25 '18 at 05:50

React-native upload Image as FormData

1 Answers1