Develop Reference

React Native android FormData response goes to catch block after .json()

I'm trying to POST data with FormData to get a response, on iOS it works as expected, but on android, it always goes to the catch block, I found out the reason for that is response.json() with error: [SyntaxError: JSON Parse error: Unrecognized token '']
Here is my code:
const onAndroidSucks = () => {
setLoading(true);
let formData = new FormData();
formData.append("number", number.replace(/\s+/g, '').substring(4));
formData.append("id", userID);
formData.append("token", userToken);
fetch(ENDPOINT, {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data'
},
body: formData
}).then(response => response.json()).then(response => {
if (response.res === 'no') {
Alert.alert('ჰეჰე');
} else {
setData(response);
}
setLoading(false);
}).catch(err => { Alert.alert(err.message); setLoading(false); } );
};
I don't understand what the actual problem is here.

It turned out that problem was okHttp on android. Looks like okHttp appends an empty string " " without a known reason.
Here is how I solved that issue with the workaround:
}).then(response => response.text())
.then((res) => JSON.parse(res.trim())).then(response => {

Upload a file from react native image picker to server

can someone tell me what i m doing wrong i keep getting error 400 bad request, i can't seem to figure out how to send the image i tried to send the path, the filename and the mime but it's not working this is my request:
const [image,setImage]=useState(null)
const[filename,setFileName]=useState(null)
const sendpic=async ()=>{
await ImagePicker.openCamera({
mediaType:'photo',
width: 300,
height: 400,
cropping: false,
}).then(image => {
setImage(image['path']);
const paths=image['path']
const filename=paths.substring(paths.lastIndexOf('/')+1);
setFileName(filename);
console.log(filename)
console.log(image)
const data=new FormData();
data.append('image',filename)
data.append('title','3aslemajiti')
const headers={
Accept:'application/json',
'Content-Type':'multipart/form-data',
}
try{
const response= axios.post('http://192.168.1.19:8000/Sends/',data,{headers:headers})
alert('yess!!!!!');
}
catch (error) {
// handle error
alert(error.message);
}
});
};
and this is my model:
from django.db import models
# Create your models here.
class Send(models.Model):
title = models.CharField(max_length=255)
image=models.ImageField(default ='null')
def __str__(self):
return self.title
how do i write the request so it is accepted by the server?

data.append('image', {
uri: filename,
name: 'test.jpg',
type: 'image/jpeg'
});
Image upload format should be this and please check file url should be correct.
"uri": "file:///Users/user/Library/Developer/CoreSimulator/Devices/33198C8D-55D3-4555-B9B5-DC1A61761AAF/data/Containers/Data/Application/B5067299-1CD2-4000-8935-59B59ED447F6/tmp/871EB6D5-2408-4A10-8DE7-EE52B1855ECD.jpg"
this is url for image. it should be like this.

const data = new FormData();
data.append("uploadFile", {
name: filename,
type: filetype,
uri:
Platform.OS === "android"
? fileuri
: fileuri.replace("file://", "")
});
var url = uploadDoc
axios.post(url, data, {headers: {
"Content-Type": "multipart/form-data",
Accept: "application/json",
Authorization: authToken
}})
.then((res) => {
})
.catch((err) => {
})

SyntaxError: JSON Parse error: Unrecognized token '<' for React Native

I'm trying to send a fetch request using post to an api, I'm doing a search using a keyword and it should return a JSON containing users, whenever I try this on Android using expo it doesn't work however it seems to work on iOS using expo. The error I get back is a JSON parse error, I get a status code of 308.
import User from '../../Model/User';
import { BearerToken } from '../../Constants/BearerToken';
export const GETRESULTS = 'GETRESULTS';
export const getResults = (item) => {
return async dispatch => {
const response = await fetch("https://example.com",
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': BearerToken
},
body: JSON.stringify({
query: item
}),
redirect: 'follow'
}
);
console.log(response.status);
if(!response.ok) {
console.log("fack off");
const errorResData = await response.json();
console.log(errorResData);
let message = 'Something went wrong';
throw new Error(message);
}
const resData = await response.json();
const searchResultsArray = [];
for(const searchResult in resData){
searchResultsArray.push(new User(
resData[searchResult].education,
resData[searchResult].email,
resData[searchResult].full_name,
resData[searchResult].gender,
resData[searchResult].job_title,
resData[searchResult].location,
resData[searchResult].password,
resData[searchResult].phone,
resData[searchResult].preferred_name,
resData[searchResult].profile_image,
resData[searchResult].profile_type,
resData[searchResult].score,
resData[searchResult].short_bio,
resData[searchResult].story
)
);
}
dispatch({type: GETRESULTS,usersArray:searchResultsArray});
};
};

What worked for me was putting 'https://example.com/search/' basically at a slash at the end fixed it for me

React-Native multipart photo upload not working in android

I'm trying to send/upload image file to my back-end serve using fetch multipart upload in react-native, but fetch multipart form data upload is not working for android, however I tried different examples.
Image upload multipart form data API is based on php and its working for iOS react-native app.
I am using react-native-photo-upload library for taking image.
storePicture(PicturePath:string) {
console.warn(PicturePath);
if (PicturePath) {
const apiUrl = `${Constants.APIHOST}updateprofileimage.php`;
// Create the form data object
var data = new FormData();
data.append('profileimage', { uri:PicturePath, name: 'profileimage.jpg', type: 'image/jpg/jpeg' });
data.append('accesstoken', this.state.user.sAccessToken);
data.append('react-native', 1);
// Create the config object for the POST // You typically have an OAuth2 token that you use for authentication
const config = { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'multipart/form-data;' }, body: data };
fetch(apiUrl, config)
.then(responseData => { // Log the response form the server
// Here we get what we sent to Postman back
console.warn(`response:${responseData}`);
})
.catch(err => {
console.warn(err);
});
}}
Here is the example how I am calling storePicture() function.
<PhotoUpload onResizedImageUri={
avatar => {
if (avatar) {
this.storePicture(avatar.path);
}
}}
>
<Image source={{uri: this.state.user.sProfileImageUrl}} style={{resizeMode:"cover", marginTop:8.0, backgroundColor:'transparent', height:120.0, width:120, borderRadius:60.0, borderWidth:0.0, borderColor:'transparent'}}/>
</PhotoUpload>

uploadProfileImage = async (image:var) => {
this.setState({
loading: true
});
var RNFS = require('react-native-fs');
const path = Style.IS_IOS ? image.uri : image.path;
var fileName = path.split('/').pop();
var fileType = fileName.split('.').pop();
var filePath = Style.IS_IOS ? path : 'file://' + path;
const apiURL = `${Constants.APIHOST}updateprofileimage.php`;
const formData = new FormData();
formData.append('accesstoken', this.state.user.sAccessToken);
formData.append('reactnative', 1);
formData.append('profileimage', {
uri:filePath,
name: fileName,
type: `image/${fileType}`,
});
try {
const response = await fetch(apiURL, {
body: formData,
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
'Accept': 'application/json',
},
})
const json = await response.json()
this.handleUploadImageResponse(json);
} catch (err) {
this.setState({
loading: false
},console.log('catch Error: '+ err));
}
}
I am answering my own question as I haven't found any valid answer for the sake of other users, who are facing same issue.
Please let me know if I can improve my answer/post or in case any help is needed from me.

Image Upload to an API by Multipart FormData
uploadPicture = () => {
console.log(
"Image Upload urI = " + JSON.stringify(this.state.imageSourceUri.uri)
);
this.setState({ loading: true });
const form = new FormData();
form.append("fileToUpload", {
uri: this.state.imageSourceUri.uri,
type: "image/jpg",
name: "12334"
});
fetch("http://119.82.97.221/HPBSProjectApi2/api/HPBS/PostFormData", {
method: "post",
body: form
})
.then(response => response.json())
.then(response => {
console.log("response = " + response);
this.setState({
loading: false
});
});
};

the problem is the type field in the FormData, use mime to resolve it. Images must be image/jpeg.
const formData = new FormData();
formData.append("image",{..., name, uri, type: mime.getType(uri)}));

react-native android Could not retrieve file for contentUri http://192.168.108.18:8180/app/upload/storag/app_head/201610131627080535.jpg

[enter image description here][1]
When I used react-native fetch formData upload a image , in iOS it worked,but in android it console.log 'Could not retrieve file for contentUri http://192.168.108.18:8180/app/upload/storag/app_head/201610131627080535.jpg'.
Could someone please let me know how can I solve it?
It is my code:
var formData = new FormData();
formData.append('owner_id',this.state.owner_id)
formData.append('head_portraits',{uri:this.state.head_portraits,type:'image/jpeg'||'image/png',name:'headImage.jpg'});
formData.append('owner_name',this.state.owner_name)
formData.append('sex',this.state.sex)
formData.append('mobile',this.state.mobile)
fetch('http://192.168.108.18:8180/app/app/owner/guest/addOwner?', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data',
},
body:formData
}).then((response) => response.json()
).then((responseJson) => {
console.log(responseJson);
if (responseJson.status === '0000'){
Alert.alert('提示','保存个人信息成功!',[
{
text: '确定'
}
])
}
})
.catch((error) => {
console.log('错误:' + error);
})
}

formData.append('head_portraits', {
uri: this.state.head_portraits,
type:'image/jpeg'||'image/png',
name:'headImage.jpg'
});
to
formData.append('head_portraits',{
uri:'file://' + this.state.head_portraits,
type:'image/jpeg'||'image/png',
name:'headImage.jpg'
});

You need to add this file:// before the this.state.head_portraits for Android. In iOS, it works without file://.