RNFetchblob Fetch API call, Formdata works in Android and works only sometimes in IOS React native - react-native

I'm using RnfechBlob for uploading images in blob format, it's properly working in Android and only works sometimes in ios, I'm getting a error as : cannot parse response in IOS.
return await RNFetchBlob.fetch(
"POST",
`${urlToUpload}`,
{
Authorization: "Basic ZGF2aXM6c2U3ZW5zZTdlbg==",
"Content-Type": "multipart/form-data",
otherHeader: "foo",
},
[
{
name: "filedata",
filename: `image.png`,
type: "image/png",
data: RNFetchBlob.wrap(imgpath),
},
]
)
.uploadProgress({ interval: 5 }, (written, total) => {
total = written / total;
console.log("uploaded", total * 1);
})
.then((response) => response.json())
.then(async (d) => {
console.log("dddd", d);
return d.url;
})
.catch((err) => {
console.log("Error in adding a comment", err, err.message);
});

I had the same issue I found that url is coming late in response. so I did some modifications in code and that worked. Let me know if that works for you!.
const data = await RNFetchBlob.fetch(
"POST",
`${urlToUpload}`,
{
Authorization: "Basic ZGF2aXM6c2U3ZW5zZTdlbg==",
"Content-Type": "multipart/form-data",
otherHeader: "foo",
},
[
{
name: "filedata",
filename: `image.png`,
type: "image/png",
data: RNFetchBlob.wrap(imgpath),
},
]
)
.uploadProgress({ interval: 5 }, (written, total) => {
total = written / total;
console.log("uploaded", total * 1);
})
if(data.url ){
return data.url
}
else{
console.log("error",data)
return "error"
}

Related

How to get response with axios api with "GET" method in react native

Here is my code:
axios({
method: "GET",
url: "http://112.196.108.244:9002/api/survey/question/get-question/not-answered/?surveyId=",
headers: {
"content-type": "application/json",
Authorization: `Bearer token-key`,
},
body: {
id: "68367859",
isMandatory: "false",
paginationFilter: { limit: 10, offset: 0, order: "DESC" },
filterInput: {
locationIds: ["1", "4011403", "4012144"],
categoryIds: [
"twoSubCategories/7898496",
"domains/7895290",
"subCategories/7896491",
],
},
},
})
.then((response) => {
console.log("response", response);
})
.catch((error) => {
console.log("error", error.response.data);
});
this code gives me error:
The error in console is-
details: "uri=/api/survey/question/get-question/not-answered/"
message: "document key is not valid."
status: 400
You're passing the id in the body. There are two problems at play here:
GET requests shouldn't use a body as part of the request. Check this answer.
What you want to do is pass the id (Which I assume is the survey id) as a query parameter. Something like this should work:
axios({
method: 'GET',
url: 'http://112.196.108.244:9002/api/survey/question/get-question/not-answered/',
headers: {
'content-type': 'application/json',
Authorization: "Bearer token-key"
},
params: {
surveyId: "68367859"
}
})
Add other params as necessary.

How to add header in new Onesignal React-native

Error: {"errors": ["Please include a case-sensitive header of Authorization: Basic <YOUR-REST-API-KEY-HERE> with a valid REST API key."], "reference": ["https://documentation.onesignal.com/docs/accounts-and-keys#section-keys-ids"]}
I tried as below but error as given above
sendNotification = async (data) => {
const { userId } = await OneSignal.getDeviceState();
const notificationObj = {
contents: { en: "Message Body" },
include_player_ids: [userId],
Authorization: "Basic APIKEY",
headings: { en: 'You have new notification' },
android_channel_id: 'id',
template_id: 'id',
buttons: [{ "id": "open_flat", "text": "OPEN HOSTING", "icon": "ic_menu_share" }],
include_external_user_ids: ["13245-123455"],
};
const jsonString = JSON.stringify(notificationObj);
OneSignal.postNotification(jsonString, (success) => {
console.log("Success:", success);
}, (error) => {
console.log("Error:", error);
});
};
//Sending demo
useEffect(() => {
sendNotification()
})
I am getting the error :
Error: {"errors": ["Please include a case-sensitive header of Authorization: Basic with a valid REST API key."], "reference": ["https://documentation.onesignal.com/docs/accounts-and-keys#section-keys-ids"]}
Few months i tried to send notification with fetch with contenttype and Auth header
You need to replace APIKEY with your actual API key, e.g. your API key is "MY_API_KEY123456", then the header should be Authorization: "Basic MY_API_KEY123456"
FOR ANY ONE HAS THIS ERROR
let headers = {
'Content-Type': 'application/json; charset=utf-8',
Authorization: `Basic '<API-KEY-HERE>'`,
};
let endpoint = 'https://onesignal.com/api/v1/notifications';
let params = {
method: 'POST',
headers: headers,
body: JSON.stringify({
app_id: 'App Id',
include_external_user_ids: [{'userid'},{'userid2'}], --> Optional
headings: { en: 'DATA'},
contents: { en: 'DATA'},
buttons: [{ "id": 'id', "text": 'OPEN', "icon": "ic_baseline_open_in_new_24" }], --> OPTIONAL
data: 'Extra data as json'
}),
};
fetch(endpoint, params).then(res => { console.log('sucess NotiButton') }).catch(error => console.log('error' + error));

How to migrate using request library for a POST request to Axios?

I've been grinding this out for awhile but am definitely hard blocked. I want to migrate my program from a deprecated request library to a different one. I chose axios but can't get it to work. All I need to be able to do is make the post request in a similar way that lets me access the response body.
Here is my working deprecated library request code:
const getPage = (apiUrl, size, stagedDateAfter) => {
let options = {
json: true,
body: {
"summary": false,
"sort": [{"stagedDate": "asc"}],
"search_after": [stagedDateAfter],
"queries": [],
"page": {"max": size}
}
};
request.post(apiUrl, options, (error, res, body) => {
if (error) {
return console.log(error)
}
if (!error && res.statusCode === 200 && keepGoing == true) {
if(body.meta.total == 0 || (!body)){
throw("error");
}
/*
Code works from this point, can access body, data, etc
*/
}
}
My failing axios library code:
function checkResponseStatus(res) {
if(res.statusCode === 200 && keepGoing == true) {
return res
} else {
throw new Error(`The HTTP status of the reponse: ${res.status} (${res.statusText})`);
}
}
const headers = {
'Content-Type': 'application/json'
}
const getPage = (apiUrl, size, stagedDateAfter) => {
let options = {
json: true,
body: {
"summary": false,
"sort": [{"stagedDate": "asc"}],
"search_after": [stagedDateAfter],
"queries": [],
"page": {"max": size}
}
};
axios.post(apiUrl, options, headers)
.then(response => {
console.log(response);
if(!response){
checkResponseStatus(response);
}
return response;
})
.catch(error => {
console.log(error.res)
})
.then(data => { //This code doesn't work since response not defined here
if(response.data.status == 200){
console.log(data);
}
});
All I need is to be able to access the response body using axios similarly to how I did with the request library but I'm reading the documentation, api, etc and I just cant seem to get the exact format right.
Solved it! Correct format that lets me access body properly.
let options = {
url: stringURL,
method: 'POST',
json: true,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
data: {
"summary": false,
"sort": [{"stagedDate": "asc"}],
"search_after": [stagedDateAfter],
"queries": [],
"page": {"max": size}
}
};
axios(options)
.then((response)=>{
//rest of code

Issue in uploading files with react native with axios

I am trying to upload files to server in react-native application with axios as http handler.
My code stands as:
let promises = [];
const body = new FormData();
console.log(body);
body.append('device_name', this.state.deviceInfo.DeviceName);
body.append('device_id', this.state.deviceInfo.DeviceID);
body.append('device_ip', this.state.deviceInfo.DeviceIP);
body.append('device_os', this.state.deviceInfo.DeviceOS);
body.append('upload_type', 'user');
body.append('user_name', user.Email);
body.append('file1', {
uri: this.state.newImageUrl.uri,
name: 'test.jpg',
type: 'image/jpg',
});
promises.push(
apiUploadDocs(body)
.then(res => {
profileImageName = res[0].NewFileName;
})
.catch(err => {
console.log('this error', err);
}),
);
My apiUploadDocs is as :
export const apiUploadDocs = body => {
return new Promise((resolve, reject) => {
axios
.post(ApiRoutes.uploadDocs, body,{headers:{'content-Type': `multipart/form-data`}})
.then(res => {
console.log('upload success');
console.log(res);
})
.catch(err => {
console.log('upload error', err);
if (err.response) {
}
reject(Constant.network.networkError);
});
});
};
Every assigned variable has correct values upon logging and the api is working good when I try to upload from Postman.
But this snippet here results in an error which is undefined when logged.
I have tried trimming the 'file://' from the uri, as suggested by some answers here in stackoverflow.
I cant figure it out. Can you help me finding whats wrong here??
PS: The body when logged is:
{
"_parts":[
[
"device_name",
"sdk_gphone_x86"
],
[
"device_id",
"xxxxxxxxxxxxx"
],
[
"device_ip",
"10.0.2.xx"
],
[
"device_os",
"goldfish_x86"
],
[
"upload_type",
"user"
],
[
"user_name",
"xxxxx#gmail.com"
],
[
"file1",
[
"Object"
]
]
]
}
if it is of any reference.
I've found a link to uploading image in react-native.
https://aboutreact.com/file-uploading-in-react-native/
This might be of some help to you.
let uploadImage = async () => {
//Check if any file is selected or not
if (singleFile != null) {
//If file selected then create FormData
const fileToUpload = singleFile;
const data = new FormData();
data.append('name', 'Image Upload');
data.append('file_attachment', fileToUpload);
let res = await fetch(
'http://localhost//webservice/user/uploadImage',
{
method: 'post',
body: data,
headers: {
'Content-Type': 'multipart/form-data; ',
},
}
);
let responseJson = await res.json();
if (responseJson.status == 1) {
alert('Upload Successful');
}
} else {
//if no file selected the show alert
alert('Please Select File first');
}
};

How do I format an array passed to params of an axios get to this specific format: [0].mfr=mfr0&[0].mpn=mpn0&[1].mfr=mfr1&[1].mpn=mpn1

I'm making a axios get call to a web api that is looking to have the query string parameters in this specific format which seems uncommon: [0].mfr=mfr0&[0].mpn=mpn0&[1].mfr=mfr1&[1].mpn=mpn1
I've been trying to use the Qs library to stringify the params in the paramsSerializer option.
parts = [{ mfr: "mfr0", mpn: "mpn0" }, { mfr: "mfr1", mpn: "mpn1" }]
findParts(parts, token) {
return axios
.request({
url: "https://<serveraddress>/api/v1/parts/findparts",
method: "get",
params: parts,
headers: {
Authorization: "Bearer " + token,
"Content-Type": "text/plain"
}
})
.catch(error => {
console.log(error);
Vue.notify({
type: "error",
title: "Unable to find parts",
text: "Unable to find parts"
});
});
}
result
0={"mfr":"mfr0","mpn":"mpn0"}&1={"mfr":"mfr1","mpn":"mp1"}
paramsSerializer: function(params) {
return qs.stringify(params);
},
or
paramsSerializer: function(params) {
return qs.stringify(params, { arrayFormat: "brackets" });
},
or
paramsSerializer: function(params) {
return qs.stringify(params, { arrayFormat: "indices" });
},
result
0[mfr]=mfr0&0[mpn]=mpn0[mfr]=mfr1&1[mpn]=mpn1
paramsSerializer: function(params) {
return qs.stringify(params, { allowDots: true });
},
result
0.mfr=mf0&0.mpn=mpn0&1.mfr=mfr1&1.mpn=mpn1
I can create a custom paramsSerializer but I was wonder if there a way to manipulate qs or the passed parts array to get the correct query string results without having to manually create the query string and url encode the values?