Bdtjtk

I have the following code for creating an event with a image and some body params. It was working fine when i was doing it without image, i am using react-native-image-crop-picker for selecting images. I am getting "Network request failed" error when posting data from react-native. The request never reach my backend as i am getting no logs there. It is working fine with postmen.

MY CODE:

const { name, date, description, location, uri, mime, time } = this.state;



    const formData = new FormData();

    formData.append('name', name)

    formData.append('date', date)

    formData.append('description', description)

    formData.append('location', location)

    formData.append('time', time)



    formData.append('image',{

      uri:uri,

      mime:'image/jpeg',

      name:`image${moment()}`

    })





    alert(JSON.stringify(formData));

    const config = {

          method: 'POST',

          headers: {

            'Accept': 'application/json',

            'Content-Type': 'multipart/form-data',

          },

          body: formData,

      };



    fetch(`http://${Config.apihost}:${Config.port}/events`,config).then((res) => res.json())

      .then((res) => {

        this.setState({ modalVisible: false, name:'', date: moment().format('YYYY-MM-DD'), description:'', Location: 'AlHedaya Masjid' })

        this.props.addEvent(res.message);



      // this.props.navigation.goBack();

      }).catch((err) => alert(err));

I have another screen which contains different number of pictures like gallery i am uploading multiple picture to the gallery, the request is working fine with code below.

 const data = new FormData();

        data.append('name', 'avatar');

        images.map((res, i) => {

          data.append('fileData', {

            uri: res.path,

            type: res.mime,

            name: `image${i}${moment()}`

          });

        })

        const config = {

          method: 'POST',

          headers: {

            'Accept': 'application/json',

            'Content-Type': 'multipart/form-data',

          },

          body: data,

        };

        fetch(`http://${Config.apihost}:${Config.port}/events/${this.state.item.id}/photos`, config)

          .then((checkStatusAndGetJSONResponse) => checkStatusAndGetJSONResponse.json())

          .then((response) => {



            if (response.status && response.message.length > 0) {

              var images = this.state.images;

              response.message.map(file => {

                images.push(`http:${Config.apihost}:${Config.port}/images/${file.id}`);

              });

              this.setState({ images });

            }

          }).catch((err) => { alert(err) });

I can't really see the difference between the two codes but the upper code giving me error.

• I am testing on android


• I am using the IP address instead of localhost (my others requests are working so thats out of equation)


• None of the solution in this link worked
  React Native fetch() Network Request Failed
  

Am I missing something?

In first code snippet you have written mime instead of type.

formData.append('image',{

      uri:uri,

      **mime:'image/jpeg**',

      name:`image${moment()}`

    })

it should be like below snippet

formData.append('image',{

          uri:uri,

          type:'image/jpeg',

          name:`image${moment()}`

        })