Develop Reference

React native android API call not happened one specific endpoint

hi I have one endpoint which is pass multipart formdata
URL : http://100.20.168.179/public/index.php/maintenances/create_ticket
Method: Post
Body request
const SelectData = {
"description": "Fff",
"room_id": "Ghh",
"maintenance_unique_id": "1662630778728",
"lang_flag": "en",
"asset_type": "2",
"longitude": "0.0",
"work_type": "69",
"user_id": "20",
"latitude": "0.0",
"area": "291",
"location": "22",
"urgency_level": "4",
"category_name": "",
"device_id": "2",
"captured_adress": "3377",
"reported_on": "2022-09-08 03:22:58",
"is_mediafile": "0"
}
My code as below
const form = new FormData();
const imageFileData = {
name: imageFilePath?.fileName,
type: `image/jpg`,
uri: imageFilePath?.uri,
};
form.append('webdata', JSON.stringify(SelectData));
if (imageFilePath?.uri || videoFilePath?.uri ) {
form.append('file_name', imageFileData );
}
else{
form.append('file_name', JSON.stringify(null));
}
addTicket(Config.BASE_URL + '/maintenances/create_ticket',form);
useAddTicket.ts
const useAddTicket = () => {
// const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(false);
const navigation = useNavigation();
const addTicket = async (url: string, data: any) => {
console.log('formDatain Hook', data);
console.log('url Hook', url);
console.log('internet', globals.GlobalVariable.isConnected);
if (globals.GlobalVariable.isConnected === true) {
try {
setIsLoading(true);
const headers = {
'Content-Type': 'multipart/form-data; boundary=V2ymHFg03ehbqgZCaKO6jy',
// Connection: 'keep-alive',
// 'Content-Disposition': 'form-data; name="webdata"',
};
const response = await axios.post(url, data, { headers: headers });
if (response.data.sStatus == 1) {
setIsLoading(false)
console.log('useAddTicket Data res -->', response);
Alert.alert(`${response.data.sData.maintenance_id}`, response.data.sMessage, [
{ text: 'OK', onPress: () => navigation.goBack() },
]);
}
} catch (error) {
console.log('useAddTicket error -->', error);
setIsLoading(false);
}
} else {
Alert.alert('No Internet!');
}
};
return {
isLoading,
// data,
addTicket,
};
};
export default useAddTicket;
Issue is Above code working in iOS emulator but in Android it is not working in emulator as well as Real device . When i try to run in android it is continuously loading API call is not happened so any idea how can I solve this ? Your all suggestions is appreciated
NOTE: I mage getting log till internet true inside addTicket function. It means my request is not reach to Endpoint

Try as below:
const oFormData = new FormData();
oFormData.append("image", {
uri: val.uri,
type: val.type,
name: val.fileName
});
return axios.post(postUrl, oFormData);

Axios showing Error:" Err_Bad_Request" while sending formdata using React native Expo

Hi There I am trying send Image (Buffer data) and Some string using formdata to node js and mongo db using expo react native.But some how I am not able to send data using front end however my code works fine with Post man.I am sharing my code below and also sharing my error.My error shows data in console in error block but doesnot post it to database here is my front end code:
frontend.js
export default class Sellnow extends Component {
constructor(props) {
super(props);
this.onChangePetName = this.onChangePetName.bind(this);
this.onChangePetTitle = this.onChangePetTitle.bind(this);
this.onChangePetContact = this.onChangePetContact.bind(this);
this.onChangePetPrice = this.onChangePetPrice.bind(this);
this.onChangePetDescription = this.onChangePetDescription.bind(this);
this.onValueChangeCat= this.onValueChangeCat.bind(this);
this.onValueChangeCity= this.onValueChangeCity.bind(this);
this.onFileChange = this.onFileChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
name: "",
title: "",
contact: "",
price: "",
description: "",
selectedcat:"",
selectedcity:"",
imgforsell:"",
category: [
{
itemName: "Select Category...."
},
{
itemName: "Pets Food"
},
{
itemName: "Pets Products"
},
{
itemName: "Pets Accessories"
}
],
cityCategory:[
{
itemName: "Select City...."
},
{
itemName: "Islamabad"
},
{
itemName: "Rawalpindi"
},
{
itemName: "Lahore"
},
{
itemName: "Peshawar"
},
{
itemName: "Karachi"
},
{
itemName: "Quetta"
}
]
};
}
onChangePetName(e) {
this.setState({ name: e.target.value });
}
onChangePetTitle(e) {
this.setState({ title: e.target.value });
}
onChangePetContact(e) {
this.setState({ contact: e.target.value });
}
onChangePetPrice(e) {
this.setState({ price: e.target.value });
}
onChangePetDescription(e) {
this.setState({ description: e.target.value });
}
// categories function
onValueChangeCat(e) {
this.setState({ selectedcat: e.targetvalue })
}
// city function
onValueChangeCity(e) {
this.setState({ selectedcity: e.targetvalue })
}
onFileChange(e) {
this.setState({ imgforsell: e.targetvalue})}
// uploading Image
_getPhotoLibrary = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
base64: true,
exif: true,
aspect: [4, 3]
});
if (!result.cancelled) {
this.setState({ imgforsell: result });
}
this.props.navigation.setParams({
imgforsell: this.state.imgforsell
});
};
async onSubmit() {
const FormData = global.FormData;
const formData = new FormData();
formData.append("name", this.state.name);
formData.append("title", this.state.title);
formData.append("contact", this.state.contact);
formData.append("price", this.state.price);
formData.append("description", this.state.description);
formData.append("selectedcat", this.state.selectedcat);
formData.append("selectedcity", this.state.selectedcity);
formData.append("imgforsell",this.state.imgforsell)
axios
.postForm(
`http://192.168.88.45:4040/pets/addpets `,
QueryString.stringify({formData}),
{
headers: {
'Content-Type': 'multipart/form-data',
'Accept': 'application/json'
},
},
)
.then(({ data }) => {
console.log(data);
})
.catch((err) => {
console.error(err.toJSON());
})
/*.finally(() => {
this.setState({
name: "",
title: "",
contact: "",
price: "",
description: "",
selectedcat: "",
selectedcity: "",
imgforsell: "",
});
});*/
}
render() {
const {imgforsell} = this.state
Here is the error:
>
> Object {
"code": "ERR_BAD_REQUEST",
"columnNumber": undefined,
"config": Object {
"adapter": [Function xhrAdapter],
"data": "formData%5B_parts%5D%5B0%5D%5B0%5D=name&formData%5B_parts%5D%5B0%5D%5B1%5D=Dummy&formData%5B_parts%5D%5B1%5D%5B0%5D=title&formData%5B_parts%5D%5B1%5D%5B1%5D=Dummy&formData%5B_parts%5D%5B2%5D%5B0%5D=contact&formData%5B_parts%5D%5B2%5D%5B1%5D=12345678900&formData%5B_parts%5D%5B3%5D%5B0%5D=price&formData%5B_parts%5D%5B3%5D%5B1%5D=1234567&formData%5B_parts%5D%5B4%5D%5B0%5D=description&formData%5B_parts%5D%5B4%5D%5B1%5D=Qwerty%20keypad&formData%5B_parts%5D%5B5%5D%5B0%5D=selectedcat&formData%5B_parts%5D%5B5%5D%5B1%5D=Pets%20Products&formData%5B_parts%5D%5B6%5D%5B0%5D=selectedcity&formData%5B_parts%5D%5B6%5D%5B1%5D=Peshawar&formData%5B_parts%5D%5B7%5D%5B0%5D=imgforsell&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bcancelled%5D=false&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bwidth%5D=2160&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bexif%5D%5BDateTime%5D=2015%3A11%3A04%2017%3A32%3A48&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bexif%5D%5BSoftware%5D=Adobe%20Photoshop%20CC%20%28Windows%29&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bexif%5D%5BXResolution%5D=72&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bexif%5D%5BImageWidth%5D=2160&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bexif%5D%5BOrientation%5D=0&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bexif%5D%5BImageLength%5D=1620&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bexif%5D%5BResolutionUnit%5D=2&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bexif%5D%5BLightSource%5D=0&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bexif%5D%5BColorSpace%5D=1&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bexif%5D%5BJPEGInterchangeFormat%5D=302&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bexif%5D%5BYResolution%5D=72&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bexif%5D%5BCompression%5D=6&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bexif%5D%5BJPEGInterchangeFormatLength%5D=5674&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bheight%5D=1620&formData%5B_parts%5D%5B7%5D%5B1%5D%5Bbase64%5D=%2F9j%2F4QG%2BRXhpZgAATU0AKgAAAAgADAESAAQAAAABAAAAAAEAAAQAAAABAAAIcAEaAAUAAAABAAAAngExAAIAAAAdAAAApgICAAQAAAABAAAWKodpAAQAAAABAAAA3wEDAAMAAAABAAYAAAEbAAUAAAABAAAAwwEBAAQAAAABAAAGVAEyAAIAAAAUAAAAywEoAAMAAAABAAIAAAIBAAQAAAABAAABLgAAAAAACvyAAAAnEEFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykAAAr8gAAAJxAyMDE1OjExOjA0IDE3OjMyOjQ4AAACkggAAwAAAAEAAAAAoAEAAwAAAAEAAQAAAAAAAAAIARoABQAAAAEAAAFjATEAAgAAAB0AAAFrAgIABAAAAAEAABYqAQMAAwAAAAEABgAAARsABQAAAAEAAAGIATIAAgAAABQAAAGQASgAAwAAAAEAAgAAAgEABAAAAAEAAAEuAAAAAAAK%2FIAAACcQQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKQAACvyAAAAnEDIwMTU6MTE6MDQgMTc6MzI6NDgAAAEANwADAAAAAQABAAAAAAAA%2F%2BAAEEpGSUYAAQEAAAEAAQAA%2F9sAQwABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB%2F9sAQwEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB%2F8AAEQgGVAhwAwEiAAIRAQMRAf%2FEAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC%2F%2FEALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29%2Fj5%2Bv%2FEAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC%2F%2FEALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5%2Bjp6vLz9PX29%2Fj5%2Bv%2FaAAwDAQACEQMRAD8A%2FMk%2FearX%2FLP%2FAD%2FeqqfvNTfO%2Fd9f%2FHv9r619Bhf%2FAJA%2FMX0%2FwosUUVYoJK9WKKKD0AqxVepLfv8A9s%2F%2FAGpQBNH97%2FP%2FAE0oP3mqxH97%2FP8A00oP3mrorHnke5fX9DVjcvr%2BhqP7Mv8Ad%2F8AHT%2FjVj7Mv93%2FAMdP%2BNcv1P8Axf1%2F26d913X3r%2FMmooorqOAh3N6%2FoKj8tv8AKD%2FCr37v%2FO6j93%2FndXP9V8vw%2FwDtSub%2B7H7v%2BCVSd3AHr3%2Bvr%2Fun%2FPWaAhOOp%2Fd5PI6Fsdj2%2FwDQucleTyNgwByep2eh9Dnt%2FkmkS38nJPTjA9eXHXORg4PQ5z1IJrfDYdJPq%2Bm%2FRy310t83dvdaNX6dOn3t%2Fj%2Flu7ss1H5Ht%2F45Rb9%2F%2B2f%2FALUqxb9%2F%2B2f%2FALUpiM%2FyPb%2FxyrA%2FcZ%2FzjGf97Ocn86kqPzvf%2FwAe%2FwDr10AWPM9v1%2F8ArUeZ7fr%2FAPWo8v3%2FAE%2F%2BvR5fv%2Bn%2FANegPa%2F3vw%2F4BcooornAjBD5B4PY8%2Bpz29FPX%2BfVqnZuGM9O%2Fp%2BdKVxkjp%2FLnHrk5%2Fz61ZHzgg9V7%2FU%2Bn0%2Bv50q2HTUu6t%2Bc7dev37K7s7NO11una%2Fyba%2FT8bphb9%2F8Atn%2F7UqSiimIKKjm%2Fi%2F4HUlAFfZ%2Fs%2FwDjv%2F1qk8z2%2FX%2F61Sb%2FAPb%2FAPHv%2Fsqk8v3%2FAE%2F%2BvXQHtf734f8AAKdWKr0UAWKsVHb9%2FwDtn%2F7UqSucAooqPzvf%2FwAe%2FwDr0AU9n%2Bz%2FAOO%2F%2FWo2f7P%2FAI7%2FAPWqxv8A9v8A8e%2F%2Byo3%2FAO3%2FAOPf%2FZV0B7X%2B9%2BH%2FAACO37%2F9s%2F8A2pUlFFBzkdv3%2FwC2f%2FtSpKjt%2B%2F8A2z%2F9qVJQdBJ5nt%2Bv%2FwBarHme36%2F%2FAFqr%2BX7%2FAKf%2FAF6seX7%2FAKf%2FAF6A9r%2Fe%2FD%2FgB5nt%2Bv8A9ajzPb9f%2FrVHv%2F2%2F%2FHv%2FALKjf%2Ft%2F%2BPf%2FAGVAe1%2Fvfh%2FwCxRVff8A7f8A49%2F9lUfl%2B%2F6f%2FXrnK%2BsS%2Fn%2F8lX%2FyJYD54A%2FX6%2Bo%2F2T%2FnqAhMgcnueR0Jx29Mf%2FrJpSue%2FwBOP%2Fr0iD5Tjjp83XPJHQnj7pH%2BPUrC4dJN21dr6u2jlvq9vvu3a60Z9Yl37aWXd635e2%2Fysr3I6sVXqTzvf%2Fx7%2FwCvXSSSUUUUAFFFFAFzyPb%2FAMcqOpPO9%2F8Ax7%2F69Hke3%2FjlBzkdWKj8j2%2F8cq5QBTghxu9eO3TlgOM9Tn8PqakqMTeRnvjHP4t29vTPfvu4koOgdsb0%2FUf41Y2N6fqP8aML%2Fe%2F8dP8AjUduF5%2Bb%2Fnn%2FAAn%2FAKae9c%2FsPP8AH%2F7Ur6xL%2Bf8A8lX%2FAMiWqKk8j2%2F8cqv5Ht%2F45QSN2N6fqP8AGjY3p%2Bo%2Fxo3N6%2FoKNzev6Cj2Hn%2BP%2FwBqA2o%2FI9v%2FAByrlR%2BR7f8Ajlc56BX8j2%2F8cqSpPI9v%2FHKuUAV6Kj8j2%2F8AHKkoAKKKKALWxvT9R%2FjRsb0%2FUf40bm9f0FG5vX9BXR7fy%2FD%2FAO2PPAwfK3H%2FAI5%2FtVHH93%2FP96SrB%2B63%2Bf4qI%2Fu%2F5%2FvSVy4vr%2FiX%2FuQ74%2FCvRf8AuQo1J5Ht%2FwCOUeR7f%2BOVcqhlPyPb%2FwAcqSrFFABRUdv3%2FwC2f%2FtSrlABRUfke3%2FjlSUAR%2BR7f%2BOVcoooAj8j2%2F8AHKPI9v8AxyrlFABUfke3%2FjlHke3%2FAI5VygCn5Ht%2F45VyiigAqPyPb%2FxyjyPb%2FwAcq5QBT8j2%2FwDHKPI9v%2FHKuUUAR%2BR7f%2BOUeR7f%2BOVcooAp%2BR7f%2BOUeR7f%2BOVcooAr1YqxRQBXqPyPb%2FwAcq5RQBXoqxRQBXqxRUnke3%2FjlAEdR%2BR7f%2BOVY8j2%2F8cqSgCvViirFAFPyPb%2FxyrHke3%2FjlA%2FfZ%2FznO76Y6H9OTgZseR7f%2BOUAR1H5Ht%2F45VyigAqPyPb%2FAMcqx5Ht%2FwCOVJQBT8j2%2FwDHKuVYqPyPb%2FxygCSo%2FI9v%2FHKseR7f%2BOVJQBH%2FAKN%2FnFHke3%2FjlXKKAI%2FI9v8AxyrHke3%2FAI5VjyPb%2FwAcqSgAqTyPb%2FxyrHke3%2FjlSV54Efke3%2FjlHke3%2FjlXKjH7jP8AnGM%2F72c5P50AUY4Pm6f%2BOf8AXSnVaj%2B9%2Fn%2FppUMEON3rx26csBxnqc%2Fh9TVL4an%2FAG5%2F6UY1vh%2Fr%2BYPI9v8AxypKueZ7fr%2F9arHme36%2F%2FWo5JdvxX%2BZ1fWX%2FAHf%2FAAGX%2FwAkU6j8j2%2F8crQ8z2%2FX%2FwCtUmz%2FAGf%2FAB3%2FAOtRyS7fiv8AMPrL%2Fu%2F%2BAy%2F%2BSKcEON3rx26csBxnqc%2Fh9TR9i%2Fzt%2FwDrVoeR7f8AjlHke3%2FjlSZlfyPb%2FwAcqx5Ht%2F45VzZ%2Fs%2F8Ajv8A9ajZ%2Fs%2F%2BO%2F8A1qrkl2%2FFf5mn1l%2F3f%2FAZf%2FJFPyPb%2FwAco%2Bxf52%2F%2FAFq1Nn%2Bz%2FwCO%2FwD1qsbP9n%2Fx3%2F61HJLt%2BK%2FzD6y%2F7v8A4DL%2FAOSMyCHG7147dOWA4z1Ofw%2Bpo8m19vzNXxD5%2Be3T%2BbD179fw6jGaseR7f%2BOVJ2FDybX2%2FM1P5Ht%2F45Wh5Ht%2F45UlAFPyPb%2FxyrH2L%2FO3%2FwCtR5Ht%2FwCOVqUAZfke3%2FjlAh8%2FPbp%2FNh69%2Bv4dRjNaHke3%2FjlSUAU%2FI9v%2FAByrH2L%2FADt%2F%2BtVjyPb%2FAMcqSgCn5Ht%2F45VypPI9v%2FHKPI9v%2FHKAK%2Fke3%2FjlHke3%2FjlaHke3%2FjlHke3%2FAI5QBB5Nr7fmafV2CHG7147dOWA4z1Ofw%2Bpp9AFTybX2%2FM0eTa%2B35mtCCHG7147dOWA4z1Ofw%2BppPI9v%2FHKAM%2F7Hben%2FAI8KPsdt6f8AjwrQ8j2%2F8cqx5Ht%2F45QBQ8m19vzNHk2vt%2BZq%2FwCR7f8AjlHke3%2FjlAGf5Ht%2F45Vj7F%2Fnb%2F8AWqx5Ht%2F45VjyPb%2FxygCh5Nr7fmaTyPb%2FAMcrZghxu9eO3TlgOM9Tn8PqaTyPb%2FxygDH8j2%2F8cpfJtfb8zWv5Ht%2F45UlAGZ5Nr7fmaTyPb%2FxytDyPb%2FxyjyPb%2FwAcoAz%2FACPb%2FwAco8j2%2FwDHK1Kj8j2%2F8coAoeTa%2B35mk8j2%2FwDHK0PI9v8AxyjyPb%2FxygCh5Nr7fmaTyPb%2FAMcrUooAzPJtfb8zVurnke3%2FAI5QIfIzznGO3u49e2Afox5OaAK%2Fke3%2FAI5R5Ht%2F45VjyPb%2FAMcqx5Ht%2FwCOUAQeTa%2B35mk8j2%2F8crUqS37%2FAPbP%2FwBqUAUIIcbvXjt05YDjPU5%2FD6mk8j2%2F8crUqPyPb%2FxygCDybX2%2FM0eTa%2B35mr4h8jPOcY7e7j17YB%2BjHk5o8j2%2F8coAz%2FI9v%2FHKseR7f%2BOVoeR7f%2BOUeR7f%2BOUAZ%2Fke3%2FjlLBDjd68dunLAcZ6nP4fU1p1H5Ht%2F45QBnyw9cf8A6%2BXzwT%2Fs9O%2BRz8uCeR7f%2BOVoCHz89un82Hr36%2Fh1GM0eR7f%2BOUAUPJtfb8zR5Nr7fma06KAKfke3%2FjlHke3%2FAI5Wh5Ht%2FwCOUeR7f%2BOUAV%2FI9v8AxyjyPb%2FxyrHke3%2FjlHke3%2FjlAFf7F%2Fnb%2FwDWpfJtfb8zWnRQBmeTa%2B35mjybX2%2FM1f8AI9v%2FABypKAMP7Hben%2Fjwo%2Bx23p%2F48K2PsX%2Bdv%2F1qr%2BR7f%2BOUAY%2Fke3%2FjlHke3%2FjlbHke3%2FjlV%2FI9v%2FHKAMfyPb%2FxyjyPb%2FxytjyPb%2Fxyq%2Fke3%2FjlAGf5Ht%2F45S%2BTa%2B35mtOo%2FI9v%2FHKAMjybX2%2FM0nke3%2FjlbHke3%2FjlV%2FI9v%2FHKAMfyPb%2FxyjyPb%2FxytjyPb%2Fxyq%2Fke3%2FjlAGP5Ht%2F45R5Ht%2F45Wx5Ht%2F45VfyPb%2FxygDLqOWHrj%2F8AXy%2BeCf8AZ6d8jn5cHQl%2FcZ7ev6465x07Zzkdc1X8j2%2F8coPPM%2FyPb%2Fxyl8m19vzNX%2FI9v%2FHKr%2BR7f%2BOV6AGf5Ht%2F45R5Ht%2F45WpVOWHrj%2F8AXy%2BeCf8AZ6d8jn5cEAz%2FACPb%2FwAcqv5Ht%2F45WgIfIzznGO3u49e2Afox5OaPI9v%2FABygDH8j732f2zjjPLDuT7E9ewyTuNV%2FI9v%2FABytjyPb%2FwAcqv5Ht%2F45QBQ8m19vzNPrQqPyPb%2FxygCh5Nr7fman8j2%2F8cq5Unke3%2FjlAGfb9%2F8Atn%2F7Uo8j2%2F8AHK0YIcbvXjt05YDjPU5%2FD6mk8j2%2F8coAz%2FI9v%2FHKWCHG7147dOWA4z1Ofw%2Bpq%2F5Ht%2F45RLD1x%2F8Ar5fPBP8As9O%2BRz8uCAZ%2Fke3%2FAI5Udanke3%2FjlHke3%2FjlAGP5Ht%2F45VfyPb%2FxytjyPb%2Fxyib%2BL%2FgdAGf5Ht%2F45R5Ht%2F45VjyPb%2FxyjyPb%2FwAcoAz%2FACPb%2FwAco%2Bxf52%2F%2FAFq1Kj8j2%2F8AHKAM%2FwAj2%2F8AHKPI9v8AxytDyPb%2FAMcqSgDL8j2%2F8cqv5Ht%2F45Wx5Ht%2F45R5Ht%2F45QBl1H9i%2FwA7f%2FrVseR7f%2BOVX8j2%2FwDHKAM%2FyPb%2FAMco8j2%2F8crUqPyPb%2FxygDP8j2%2F8co8j2%2F8AHK0PI9v%2FAByjyPb%2FAMcoAx%2FI9v8AxyrHke3%2FAI5Wh5Ht%2FwCOUeR7f%2BOUAZ8sPXH%2FAOvl88E%2F7PTvkc%2FLgn2L%2FO3%2FAOtWh5Ht%2FwCOUeR7f%2BOUAZ%2Fke3%2FjlAh8jPOcY7e7j17YB%2BjHk5rQ8j2%2F8co8j2%2F8coAp0VqeR7f%2BOUeR7f8AjlAH4%2Bn7zVNBDiNvXjt0%2BdgOM9Tn8PqahP3mrS%2F5Z%2F5%2FvUYX%2FwCQOF9P8KJKKr1Jb9%2F%2B2f8A7UroJLlV6sUUAUdjen6j%2FGrGxvT9R%2FjRub1%2FQVY3N6%2FoKPYef4%2F%2FAGoDaKKK6ANCio7fv%2F2z%2FwDalXK5wK9Sed7%2FAPj3%2FwBeo6sV0HOR%2Bd7%2FAPj3%2FwBepKj8j2%2F8cq5QBGP32f8AOc7vpjof05OBmSirFAFO37%2F9s%2F8A2pVyiigCvRVirFAFeirFV6ALFV6KKACrFV6sUAWKKr0UAWKr0UUAFFFWKAK9FFWKACiiigCxVeirFAFeirFV6ACiiigAooooAKKKkH77P%2Bc53fTHQ%2FpycDIAW%2Ff%2FALZ%2F%2B1KkoooAKKKKACox%2B%2Bz%2FAJznd9MdD%2BnJwMyVYoAj8j2%2F8cqOrFWKAK9FWKj8j2%2F8coAPI9v%2FAByiCHG7147dOWA4z1Ofw%2Bpqx5Ht%2FwCOUQQ43evHbpywHGepz%2BH1NAB5Ht%2F45VypIIcbvXjt05YDjPU5%2FD6mjyPb%2FwAcoAp1J5Ht%2FwCOVoQQ43evHbpywHGepz%2BH1NWPI9v%2FABygDH8j2%2F8AHKPI9v8AxytDyPb%2FAMco8j2%2F8coAjoqPyPb%2FAMcqSgAoqxVegCPyPb%2FxyjyPb%2FxyrlR%2BR7f%2BOUAXKp%2BR7f8AjlXKK5zoM37M393%2FAMdH%2BNH2Zv7v%2Fjo%2FxrQ8tv8AKD%2FCpNzev6Cj2Hn%2BP%2F2oGX9mb%2B7%2FAOOj%2FGpNjen6j%2FGtDc3r%2BgqOZm%2Bbn%2B%2F2FHsPP8f%2FALUBv%2FLP%2FP8AeqrH9...(truncated to the first 10000 characters)
at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:34:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:123:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:177:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:437:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:388:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue
here is the screen shot of post man:-
Blockquote

I guess you are sending a image in formData but you have to add type: 'image/jpeg', to the file attribute of the formData to fixed this
formData.append("imgforsell",this.state.imgforsell)
change with this
formData.append('imgforsell', {
uri: "file://" //Your Image File Path
type: 'image/jpeg',
name: 'imageName'
})
Visit Here your more doubts will be clear and you will find out how to do it in Ios and Android

issues with uploading image file react native {"isTrusted": false} - ANDROID

I am working with the above issue that has had me stymied for hours on Android. I am using:
XMLHTTPRequest to upload an image file to my server. I have verified using document explorer in android that the image actually exists at the given uri.
I get xhr object as:
{"DONE": 4, "HEADERS_RECEIVED": 2, "LOADING": 3, "OPENED": 1, "UNSENT": 0, "_aborted":
false, "_cachedResponse": undefined, "_hasError": true, "_headers": {"accept":
"application/json", "authorization": "Bearer **********", "content-type": "multipart/form-data", "x-tenant": "EOG"},
"_incrementalEvents": false, "_lowerCaseResponseHeaders": {}, "_method": "POST", "_requestId": null, "_response": "Unrecognized FormData part.", "_responseType": "",
"_sent": true, "_subscriptions": [], "_timedOut": false, "_trackingName": "unknown", "_url":
"*************/uploadFile", "readyState": 4, "responseHeaders": undefined, "status": 0,
"timeout": 0, "upload": {}, "withCredentials": true}
I noticed in the above object: "_response": "Unrecognized FormData part."
My code looks like:
const {pic, kyc_document, kyc_identifier, kyc_expiry_date, ssn} = data;
let xhr = new XMLHttpRequest();
xhr.open(
'POST',
'https://**********/upload',
true,
);
xhr.setRequestHeader('Authorization', `Bearer ${token}`);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.setRequestHeader('x-tenant', 'EOG');
xhr.setRequestHeader('Accept', 'application/json');
xhr.onerror = function (error) {
console.log(xhr);
console.log('ERROR -----------', error);
console.log(pic);
};
let formData = new FormData();
formData.append('kyc_type', 'identity');
formData.append('kyc_document', kyc_document);
formData.append('kyc_meta_data', {issuing_state: state});
formData.append('kyc_identifier', kyc_identifier);
formData.append('kyc_expiry_date', kyc_expiry_date);
formData.append('kyc_file', {
uri: pic.uri,
type: 'image/jpeg',
name: 'Id',
});
}
try {
xhr.send(formData);
} catch (e) {
console.log(e);
}
}
};
This is returning {"isTrusted": false}
The uri looks like "uri": "file:///data/user/0/com.mon.app/cache/Camera/e6c2ae90-a9a8-43aa-9e36-62c73a76f2ef.jpg"
my package details are:
"react": "16.11.0",
"react-native": "0.62.2",

How to fetch data from API in react-native

Hey guys i am trying to fetch data from remote server and returning in alertbox using react-native
Here's my code for fetching
_onPressButtonPOST: function(){
fetch("http://www.example.com/endpoint", {
method: "POST",
body: JSON.stringify({
key: "value",
})
})
.then((response) => response.json())
.then((responseData) => {
Alert.alert(
"POST Response",
"Response Body -> " + JSON.stringify(responseData.body)
)
})
.done();
},
Here is what i want to fetch from my endpoints.
{
"_shards": {
"total": 1,
"successful": 1,
"failed": 0
},
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "service",
"_type": "service",
"_id": "ac8c5edd-1aad-406f-b476-012c6e940c1a",
"_score": 1,
"_source": {
"service_owner_id": "2",
"service_name": "miamia",
"service_email": "mk#gmail.com",
"service_contact_name": "mukesh",
"service_landline_number": "12345",
"service_mobile_number": "1234567890",
"service_address": "vdvml",
"service_listingType": 1,
"service_avg_rating": 3.5,
"sarvice_ratingcount": 10,
"service_serviceType": 1,
"service_working_hour": [
""
],
"service_subcat_ids": "2,3",
"service_description": "hi I am mukesh kumar ",
"service_id": "ac8c5edd-1aad-406f-b476-012c6e940c1a",
"service_logo_url": "",
"service_gallery_url": "",
"service_location": {
"lat": 19.34,
"lon": 72.845
},
"service_subcategory": "CAT GER ",
"service_review": []
}
}
]
},
"took": 2,
"timed_out": false
}
But in alertbox it is showing undefined what might be the issue? can anyone help on this?
Thanks in advance.

Hey guys i found out the bug and consumed the API successfully thanks to https://www.thepolyglotdeveloper.com/2015/09/make-http-requests-in-ios-with-react-native/
I just replaced responseData.body with responseData as there was no body included in my server side code so it was returning undefined
Here is my sample code
.then((response) => response.json())
.then((responseData) => {
Alert.alert(
"POST Response",
"Response Body -> " + JSON.stringify(responseData)
)
})
.done();
Any doubts and queries are welcome.

Generally another reason is that, in PHP endpoint code they try to fetch the parameters sent by using $_POST, $_GET or $_REQUEST.
In that case, instead of Json, use FormData as body's value in your fetch operation.
An example
var FormDataToPost = new FormData();
FormDataToPost.append('userId', 12);
fetch(url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: FormDataToPost
})
.then((response) => response.json())
.then((responseData) => { do something })
.catch((error) => {
alert(error);
})
.done();

How to upload Image on server using ReactNative

I am setting headers and body , Using fetch with Post to upload image on server.I am getting the response code 200 but it is not uploading image but rest of the Data is getting uploaded.
Here is the code of body:
export default function setRequestBody(imagePath){
let boundry = "----WebKitFormBoundaryIOASRrUAgzuadr8l";
let body = new FormData();
body.append("--"+boundry+"\r\n");
body.append("Content-Disposition: form-data; name=imageCaption\r\n\r\n");
body.append("Caption"+"\r\n");
body.append("--"+boundry+"\r\n");
body.append("Content-Disposition: form-data; name=imageFormKey; filename =iimageName.pngg \r\n");
body.append("Content-Type: image/png \r\n\r\n");
body.append({uri : imagePath});
// appened image Data Here
body.append("\r\n");
body.append("--"+boundry+"--\r\n");
return body
}
Please help.What mistake I am making. :(

I've found the solution:
let body = new FormData();
body.append('photo', {uri: imagePath,name: 'photo.png',filename :'imageName.png',type: 'image/png'});
body.append('Content-Type', 'image/png');
fetch(Url,{ method: 'POST',headers:{
"Content-Type": "multipart/form-data",
"otherHeader": "foo",
} , body :body} )
.then((res) => checkStatus(res))
.then((res) => res.json())
.then((res) => { console.log("response" +JSON.stringify(res)); })
.catch((e) => console.log(e))
.done()
** filename is optional...

The problem is body.append({uri : imagePath}); because react native JSC does not support File and Blob, so you have to use libraries.
react-native-fetch-blob has very good support for this, example from its README.md
RNFetchBlob.fetch('POST', 'http://www.example.com/upload-form', {
Authorization : "Bearer access-token",
otherHeader : "foo",
'Content-Type' : 'multipart/form-data',
}, [
// element with property `filename` will be transformed into `file` in form data
{ name : 'avatar', filename : 'avatar.png', data: binaryDataInBase64},
// custom content type
{ name : 'avatar-png', filename : 'avatar-png.png', type:'image/png', data: binaryDataInBase64},
// part file from storage
{ name : 'avatar-foo', filename : 'avatar-foo.png', type:'image/foo', data: RNFetchBlob.wrap(path_to_a_file)},
// elements without property `filename` will be sent as plain text
{ name : 'name', data : 'user'},
{ name : 'info', data : JSON.stringify({
mail : 'example#example.com',
tel : '12345678'
})},
]).then((resp) => {
// ...
}).catch((err) => {
// ...
})

I've found the solution to Upload the Image on server in React Native:
const formdata = new FormData();
formdata.append('image[]', {
name: 'test.' + imageurl?.type?.substr(6),
type: imageurl?.type,
uri:
Platform.OS !== 'android'
? 'file://' + imageurl?.uri
: imageurl?.uri,
});
const res = await axios.post(url, formdata, {
headers: {
Accept: '*/*',
'Content-type': 'multipart/form-data',
},
});

//First Install and import Image-piker
//install
npm i react-native-image-picker
//import
import * as ImagePicker from 'expo-image-picker';
//then
const [image, setImage] = React.useState(null);
const [Type,setType]=React.useState('')
//Get the image
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
console.log(result);
if (!result.cancelled) {
// extract the filetype
setType(result.uri.substring(result.uri.lastIndexOf(".") + 1));
setImage(result.uri);
}
};
//show image return
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Ecolher Foto" onPress={pickImage} />
{image && <Image source={{ uri: image }} style={{ width: 150, height: 150 }} />}
</View>
//UpLoad Image
var validatinoApi ='https://seusite.com/OOP/';
var headers={
'Accept':'application/json',
"Content-Type": "multipart/form-data",
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Origin':'*',
'crossDomain': 'true',
'Host': 'https://seusite.com/OOP/',
'Origin': 'https://origem.com',
};
/*'crossDomain': 'true',*/
var Data={
image:image,
namefoto: `photo.${namefoto}`,
type: `image/${Type}`
};
fetch(validatinoApi,
{
method:'POST',
headers:headers,
body:JSON.stringify(Data)
}).then((response)=>response.json())
.then((response)=>{
if(response.statusCode==200){
//Do something
}