Upload image using fetch doesn't work in React Native (iOS)

Question

I am working on a mobile app using React Native and posting an image on iOS doesn't work. I have hooked up my code to requestbin, setup the info.plist to allow non-https urls and other post requests are working (e.g login). For the image, all I get is a blank body for the request. Here is the code posting the image:

uploadImage = () => {
const data = new FormData();
data.append('photo', {
  uri: this.state.logo.uri,
  name: 'logo'
});
fetch([requestbin url here], {
  method: 'post',
  body: data
}).then(res => {
  console.log(res);
});

for the image, I am using react-native-image-picker to get it and store it in state under the variable 'logo'. Here is that code as well

 handleNewImage = () => {
var options = {
  title: 'Choose new company logo',
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
};

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 {
    let source = { uri: response.uri };

    // You can also display the image using data:
    // let source = { uri: 'data:image/jpeg;base64,' + response.data };

    this.setState({
      logo: source
    });
  }
});

Ehsan Amiri · Accepted Answer · 2019-10-14 15:14:45Z

4

Remember that you also should pass a name key too, like below:

    let url     = "",
        headers = "",
        method  = "POST",
        body    = new FormData(),
        uri     = "URI of the picked image.";

    body.append("photo", {
            name: "Just a name",
            uri : Platform.OS === "android" ? uri : uri.replace("file://", "")
        }
    );

    fetch(url, method, headers, body)
        .then(function (response) {
        })
        .catch(function (error) {
        });

edited Oct 14, 2019 at 15:14

answered Oct 14, 2019 at 14:54

Ehsan Amiri

1512 silver badges6 bronze badges

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

Comments

Faysal Ahmed · Accepted Answer · 2018-03-29 12:25:46Z

1

function uploadProfilePicture(mImage) {

    var data = new FormData();
    data.append('theFile', { uri: mImage.uri, name: 'profile_photo.jpg', type: 'image/jpg' });

    fetch(AppConstant.BASE_URL + AppConstant.upload_media, {
        method: 'POST',
        body: data
    })
        .then((response) => response.json())
        .then((responseJson) => {

            var err = 'error_message' in responseJson ? true : false
            if (err) {
                alert(responseJson.error_message)

            } else {


                alert(JSON.stringify(responseJson))

            }

        })
        .catch((error) => {
            console.error(error);
            alert(error)
        });

}

edited Mar 29, 2018 at 12:25

Faysal Ahmed

7,6875 gold badges32 silver badges54 bronze badges

answered Mar 29, 2018 at 10:15

Chandra Pal

261 bronze badge

1 Comment

Bas Over a year ago

yes that is indeed code... care to actually explain?

Ikiugu · Accepted Answer · 2017-12-18 09:06:25Z

-1

If anyone has issues with using fetch in iOS, check out react-native-file-upload I have found it to be extremely helpful in both image uploading and regular posts.

answered Dec 18, 2017 at 9:06

Ikiugu

6771 gold badge9 silver badges17 bronze badges

Collectives™ on Stack Overflow

Upload image using fetch doesn't work in React Native (iOS)

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related