CODEWITHSUNDEEP
react-native
Ajith
Ajith

Reputation: 845

Always throws "network error" while do formdata post in react-native

in my react-native application i want to upload the image via api,Its working in postman but not in the app,Always gives me "network error" Postman image

TypeError: Network request failed at XMLHttpRequest.xhr.onerror (whatwg-fetch.js:504) at XMLHttpRequest.dispatchEvent (event-target.js:172) at XMLHttpRequest.setReadyState (XMLHttpRequest.js:580) at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:394) at XMLHttpRequest.js:507 at RCTDeviceEventEmitter.emit (EventEmitter.js:181) at MessageQueue.__callFunction (MessageQueue.js:366) at MessageQueue.js:106 at MessageQueue.__guard (MessageQueue.js:314) at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:105)

profile.js

let formData = new FormData();
 formData.append("file", {
      name: response.fileName,
      uri: response.uri,
      type: response.type
    });

    formData.append("inputString", {
      appversion: "2.0.0",
      mobile: "456456456",
      token: "1ba12dyrty452c4d6cb04544f52fccfc92748f"
    });

    var xhr = new XMLHttpRequest();

    xhr.upload.onprogress = function(e) {
      var percentComplete = Math.ceil((e.loaded / e.total) * 100);
      // here you will get the percentage of upload completed.
    };

    xhr.open("POST", "https://findmysalon.appspot.com/customer/uploadfile");

    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        let resp = xhr.response;
        var response = JSON.parse(resp);
        console.log(response);
      } else {
        console.log(xhr.response);
        console.log("error1");
        //Response error
      }
    };

    xhr.onerror = function() {
      //ERROR
      console.log("error2");
    };

    xhr.setRequestHeader("Authorization", "Basic dfgdfgdgddfg"); //eg: `Bearer ${token}`
    xhr.send(formData);

Upvotes: 3

Views: 1550

Answers (2)

Vinil Prabhu
Vinil Prabhu

Reputation: 1289

try writing header as

  headers: {
    "Authorization", "dfg dfgdfgdfgdfgdfg";
    "content-type", "multipart/form-data";
  },

Upvotes: 1

Jebin Benny
Jebin Benny

Reputation: 951

You can use XMLHttpRequest()

eg:

let formData = new FormData();
let fileName = "image1.png";

formData.append("file", {
  name: fileName,
  uri: img.uri,
  type: "image/png"
});

form.append("inputString", {
  appversion: this.state.appversion,
  mobile: this.state.mobile,
  token: this.state.token
});

var xhr = new XMLHttpRequest();

xhr.upload.onprogress = function(e) {
  var percentComplete = Math.ceil((e.loaded / e.total) * 100);
  // here you will get the percentage of upload completed.
};

xhr.open("POST", "https://fhy.appspot.com/customer/uploadfile");

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    let resp = xhr.response;
    var response = JSON.parse(resp);
    //Response success
  } else {
    //Response error
  }
};

xhr.onerror = function() {
  //ERROR
};

xhr.setRequestHeader("Authorization", "dfg dfgdfgdfgdfgdfg"); //eg: `Bearer ${token}`
xhr.send(formData);

Upvotes: 1

Related Questions