Uploading Image to server in react native. Getting Error "Network request failed"

Question

Calling function : This is where I am creating a API call.

onAddMenuApi(formData) {
    return fetch(UserManagerIns.getUserData('API_URL') + 'menu-item-add', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'multipart/form-data',
      },
      body: formData,
    })
      .then(response => {
        if (!response.ok) {
          throw new Error(response.status);
        }
        return response.json();
      })
      .then(myres => {
        console.log('Item Add API data::::: ' + JSON.stringify(myres));
        return myres;
      })
      .catch(error => {
        return error;
      });
  },

Setting Parameters : This is where I am make a API call after this and set a formData Parameter.

let params = {
      title: this.state.title,
      price: this.state.price,
      menu_cat_id: this.state.menu_cat_id,
    };

    let formData = new FormData();
    for (var k in params) {
      formData.append(k, params[k]);
      console.log('My Data :: ' + params[k]);
    }


    formData.append('image_url', {
      uri: this.state.ImageSource,
      name: this.state.filename,
      type: this.state.type,
    });

In response I am getting "Network request failed".

I have added in AndroidManifest file the line : android:usesCleartextTraffic="true"

I have added network_security_config.xml as well but it is not working.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

Check this link for the network issue https://stackoverflow.com/a/57805710/7086832 And https://stackoverflow.com/a/61405318/7086832 for file upload — Kavidu Aloka Kodikara, Nov 07 '20 at 07:31

score 0 · Answer 1 · answered Jul 31 '20 at 17:52

0

try this:

headers: { 'Accept': 'application/json', 'Content-Type': 'multipart/form-data', },

answered Jul 31 '20 at 17:52

Mayur Pawar

1
2

Already used that. Please read code provided in question. – Harsh Doshi Jul 31 '20 at 18:14
Any other solution?? – Harsh Doshi Aug 03 '20 at 06:16

Uploading Image to server in react native. Getting Error "Network request failed"

1 Answers1