react-native-fetch-blob
react-native-fetch-blob copied to clipboard
wkh237
RNFetchBlob.fetchBlobForm failed to create request body
React-Native: 0.46.3 RNFB: 0.10.6
I am trying to upload a selected image from the camera roll using react-native-image-picker. The following works fine on Android but on ios I get warning: Error: RNFetchBlob.fetchBlobForm failed to create request body. Any idea what I'm doing wrong?
ImagePicker.showImagePicker(options, (response) => {
if (response.didCancel) {
console.warn('User cancelled image picker');
}
else if (response.error) {
console.warn('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.warn('User tapped custom button: ', response.customButton);
}
else {
RNFetchBlob.fetch('POST', 'http://12.34.56.78:3000/upload',
{'Content-Type' : 'multipart/form-data'},
[
{ name : 'from_device', filename : 'from_device.png', type:'image/png', data: RNFetchBlob.wrap(response.uri)},
]
).then((resp) => {
console.warn(resp);
}).catch((err) => {
console.warn(err);
})
@jstoebel , I'd like to know how is the image's URI look like, perhaps it's caused by #287 .
@wkh237 I took a look at response.uri in the console and here's what I got:
console.warn(response.uri);
// file:///Users/user_name/Library/Developer/CoreSimulator/Devices/C360DD7C-D60…C30-D5757191483B/Documents/images/E858BC4A-2B68-4FFC-9103-8A9081EDBA08.jpg
console.warn(RNFetchBlob.wrap(response.uri));
// RNFetchBlob-file://file:///Users/stoebelj/Library/Developer/CoreSimulator/D…C30-D5757191483B/Documents/images/E858BC4A-2B68-4FFC-9103-8A9081EDBA08.jpg
Is the problem something to do with the repeated file:// in the wrapped uri? Sorry if there is something I'm missing.
@jstoebel , perhaps that's exactly what we're going to do in #387, please try to stripe file:// on IOS.
@wkh237 Were you able to track down what is the root cause of the issue? I would like to help out by making a PR to fix this issue.
Because IOS file system does not recognize the file:// URI in the native, so you will need to strip that manually, this is what React Native used to behave in 0.2x. Well, I have to say this is confusing, will fix it once I have time.
I'm having the same issue and removing file:// from the URL does nothing and I'm still getting the same error
let cleanUri = string_.ltrim(newPhoto.uri, "file:///");
console.log(cleanUri)
RNFetchBlob.fetch('POST', 'https://api.claudia.constructioncloud.io/teams/' +selectedTeam.id+ '/photos', {
Authorization : `JWT ${accessToken}`,
'Content-Type' : undefined, //'multipart/form-data',
}, [
// part file from storage
{ name : 'file', filename : 'avatar-foo.png', type:'image/jpg', data: RNFetchBlob.wrap(cleanUri)},
]).then((resp) => {
console.log(resp);
}).catch((err) => {
console.log(err);
})
I was able to debug this I had the following setting for options under image picker
// Options for photos and videos
const options = {
title: 'Select',
noData:true,
mediaType:'mixed',
storageOptions: {
skipBackup: true,
path: 'construction cloud'
}
};
path: 'construction cloud'
was casuing my issue, I just changed it to path: 'construction-cloud'
@Nealyang What issue? I see two issues above and both seem to have been addressed. Did you try what helped the others?
@AlmogRnD you replaced file:/// not file:// (3 slashes)
replacing 2 slashes I managed to read the file on iOS
FYI: for me PATCH works perfect but not POST. So I think bug is inside the package
striping the file:// fixed my issues, but I think this should be patched on library level, any news on this?
FYI: for me PATCH works perfect but not POST. So I think bug is inside the package
That works for me, Thanks.
