React-Native 62.2 code image upload Error : network error - react-native

I am using React-Native two days back After React-Native version upgrading to 0-62.2, I encountered many problems.
Among them important one is image upload error getting [Error:Network error ]
Before upgrading the React-native my code is working fine
Below code is working fine for me for multiple image upload before upgrading to React-Native 0.62.2 but now i am getting [Error: Network error]
constructor() {
super();
this.state = {
uploadPercentage: 0,
}
}
// upload Files upload_Files = async () => {
upload_File() {
if (this.validate_Fields()) {
const { image, images, files, description, userId, size } = this.state;
console.log('AddPost Screen : upload_File:', 'userId:', userId, 'Files:', files, 'description:', description)
// this.setState({ error: '', loading: true });
if (this.state.type === 'image/jpeg') {
console.log('AddPost Screen : upload_ files :', files);
const formData = new FormData();
formData.append('user_id', userId);
formData.append('description', description);
// formData.append('files[]', files);
for (let i = 0; i < files.length; i++) {
formData.append('files[]', {
name: files[i].path.split('/').pop(),
type: files[i].mime,
uri: Platform.OS === 'android' ? files[i].path : files[i].path.replace('file://', ''),
});
}
// upload percentage progress bar ******************************************************
const options = {
onUploadProgress: (progressEvent) => {
const { loaded, total } = progressEvent;
let percent = Math.floor((loaded * 100) / total)
console.log(`${loaded}kb of ${total}kb | ${percent}%`);
if (percent < 100) {
this.setState({ uploadPercentage: percent })
}
}
}
axios.post(API_URL + '/fileuploadapi/uploadPost', formData, options, {
headers: { "Content-type": "multipart/form-data" }
}).then((response) => {
console.log(JSON.parse(JSON.stringify(response.status)));
// upload percentage progress
this.setState({ uploadPercentage: 100 }, () => {
setTimeout(() => {
this.setState({ uploadPercentage: 0 })
}, 1000);
})
this.cleanupImages();
Alert.alert('Upload Post Successfully');
}).catch((error) => {
console.log(error);
this.cleanupImages();
Alert.alert('image Upload Post Failed , Try again !');
});
}
}
}
// clear files data
cleanupImages() {
this.setState({
description: '',
image: null,
images: null,
// video: '',
files: '',
uploadPercentage: 0,
})
ImagePicker.clean().then(() => {
console.log('removed tmp images from tmp directory');
}).catch(error => {
alert(error);
});
}
If anyone know the solution please let me know ...

I just found the solution for the React-Native 62.2 upgrading error for image upload Error
[Error: network error]
Just remove the file "ReactNativeFlipper.java" from debug/java folder
File Location :
android/app/src/debug/java/com/appname/ReactNativeFlipper.java

Related

Can't upload image using react-native, GraphQL and urql

So I'm trying to send an image to our server with react native using GraphQL query and I don't know why but it always return an error : [CombinedError: [Network] Network request failed].
The query :
import { graphql } from '../../gql';
import { gql, useMutation } from 'urql';
const AddProfilePicture_Mutation = graphql(`
mutation AddPicture_Mutation ($userId: ID!, $picture: Upload!) {
uploadProfilePicture(input: {
userId: $userId
picture: $picture
}) {
id
}
}`);
export const useAddProfilePicture = () => {
const [{fetching, error}, execute] = useMutation(AddProfilePicture_Mutation);
return {
error: !!error,
fetching,
addProfilePicture: execute,
}
}
and the code :
const pictureHandler = async () => {
const options = {
mediaType: 'photo' as MediaType,
includeBase64: true,
selectionLimit: 1,
};
const profilePicture = await launchImageLibrary(options);
if (profilePicture.assets?.[0].fileSize && profilePicture.assets?.[0].fileSize > MAXFILESIZE) {
showError(t('profileScreen.PictureSize'));
}
if (profilePicture.assets?.[0].uri && profilePicture.assets[0].fileName && profilePicture.assets[0].type) {
// const myBlob = await fetch(profilePicture.assets[0].uri).then(r => r.blob());
const blob = new Blob([profilePicture.assets[0].base64 as BlobPart], {
type: profilePicture.assets[0].type,
});
const file = new File([blob], profilePicture.assets[0].fileName, { type: `${profilePicture.assets[0].type}`});
const {error} = await addProfilePicture(
{ userId: userId!, picture: file},
{ fetchOptions: { headers: { 'graphql-require-preflight': '' } } }
);
if (!error) {
showSuccess(t('profileScreen.PictureSuccessAdded'));
navigation.navigate('UserProfile');
} else {
console.log(error);
showError(t('profileScreen.PictureErrorAdded'));
}
};
};
I've been trying everything I found on the web, Formdata, react-native-blob-util and rn-fetch-blob. If I try sending anything else then a File, the server reject it and says for exemple:
Variable 'picture' has an invalid value: Expected type org.springframework.web.multipart.MultipartFile but was java.util.LinkedHashMap]
Update :
After long research and help from other programmers. We never did found the answer. We open a new access point in the backend specifically for the uploaded picture and used a regular fetch post.

Getstream.io with React Native

I suffer from uploading image to getstream service. And it doesn't upload image.
Here is my code. I get the following error.
Here is my code.
const filter = { type: 'messaging', members: { $in: [userInfo.id] } };
const sort = [{ last_message_at: -1 }];
let channels;
await chatClient.queryChannels(filter, sort, {
watch: false,
state: true,
}).then((response) => {
channels = response;
})
const file = this.state.avatar;
let avatarURI;
channels[0].sendImage(file).then((response) => {
avatarURI = response.file;
console.log(avatarURI);
})

Converting Base64 string into blob in React Native

i have been looking for a solution to convert Image from base64 string into Blob
i get my images via react-native-image-crop-picker
the image object i get is formatted in this way :
{
creationDate: "1299975445"
cropRect: null
data: "/9j...AA"
duration: null
exif: null
filename: "IMG_0001.JPG"
height: 2848
localIdentifier: "10...001"
mime: "image/jpeg"
modificationDate: "1441224147"
path: "/Users/...351F66445.jpg"
size: 1896240
sourceURL: "file:///Users/...IMG_0001.JPG"
width: 4288
}
which means i have the path and source url and image data as base64 string.
what i need is to upload the images that the user picks as blob file to the server.
so is there any way to do the conversion in react native.
ps: i have tried solutions i found online but non of them seems to work so far but none of them seems to work for me.
urlToBlob = (url) => new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onerror = reject;
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
resolve(xhr.response);
}
};
xhr.open('GET', url);
xhr.responseType = 'blob'; // convert type
xhr.send();
})
this.urlToBlob(data)
.then((blob) => {
console.log(blob);
});
i tried this peace of code and this what i got in my console :
{
_data:
blobId: "B69744A5-B8D7-4E6B-8D15-1C95069737EA"
name: "Unknown"
offset: 0
size: 1896240
type: "image/jpeg"
__collector: null
}
after a lot of search i found a solution if anyone faced this issue.
i used a package 'extract-files' it allowed me to the images as files in order to send them to the server
it worked like this:
import { ReactNativeFile } from 'extract-files';
const FormData = require('form-data');
_addImage = async () => {
const { images } = this.state;
if (images.imageData.length > 0) {
const formData = new FormData();
// converting images to files
images.imageData.forEach((element) => {
const file = new ReactNativeFile({
uri: element.sourceURL,
name: element.filename,
type: element.mime,
});
formData.append('files', file);
});
// sending files to the server
await addImages(formData).then((response) => {
console.log('response : ', response);
if (response.success) {
this.pictures = response.filesNames;
this.setState({
isLoading: true,
pictures: response.filesNames
});
return response.success;
}
}).catch((err) => {
console.error(err);
});
}
}
i hope this is helpful

Convert Image to base64 in react native

I have used react-native-image-picker and now I select image from the Photo library. To send the that image to API I have to convert it first into base64 and then into byte array. I have the filepath in response.uri. How do I do it?
When I did console.log(response) I am getting this in result
'Response = ', {
fileSize: 6581432,
longitude: -17.548928333333333,
uri: 'file:///Users/shubhamb/Library/Developer/CoreSimulator/Devices/B58314DF-F0A9-48D2-B68A-984A02271B72/data/Containers/Data/Application/63143214-8A03-4AC8-A79C-42EC9B82E841/tmp/2AACBC57-0C07-4C98-985E-154668E6A384.jpg',
fileName: 'IMG_0003.JPG',
latitude: 65.682895,
origURL: 'assets-library://asset/asset.JPG?id=9F983DBA-EC35-42B8-8773-B597CF782EDD&ext=JPG',
type: 'image/jpeg',
height: 2002,
width: 3000,
timestamp: '2012-08-08T18:52:11Z',
isVertical: false,
}
Since you're using react-native-image-picker, it already returns the Base64 value in its response
ImagePicker.showImagePicker(options, (response) => {
const base64Value = response.data;
});
Documentation for the response
I suddenly ran into this issue while updating my app. What I found is that previous react-native-image-picker used to provide base64 as response.data. But now there is an includeBase64 in the options object so that you can control whether you need the base64 data or not. So my code became something like the following
captureTradeLicenseImage() {
let options = {
maxHeight: 250,
maxWidth: 350,
includeBase64: true //add this in the option to include base64 value in the response
}
ImagePicker.launchCamera(options, (response) => {
console.log('Response = ', response)
if (response.didCancel) {
console.log('User cancelled image picker')
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error)
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton)
}
else if (response.fileSize > 5242880) {
Alert.alert(
"Nilamhut Say\'s",
"Oops! the photos are too big. Max photo size is 4MB per photo. Please reduce the resolution or file size and retry",
[
{ text: "OK", onPress: () => console.log('ok Pressed') }
],
{ cancelable: false }
)
}
else {
this.setState({tradeLicenseImageData: response.base64}) //access like this
}
})
}
The standalone expo FileSystem package makes this simple:
const base64 = await FileSystem.readAsStringAsync(photo.uri, { encoding: 'base64' });
https://docs.expo.io/versions/latest/sdk/filesystem/
https://github.com/expo/expo/tree/master/packages/expo-file-system
As 2019-09-27 this package handles both file:// and content:// uri's
I'm too late but if I can help others that is looking how to get the base64 data from an image:
In the options object you have to set the base64 option to true, like this:
const options = {
title: 'Choose an Image',
base64: true
};
ImagePicker.launchImageLibrary(options, response => {
console.log(response.data);
});
As simple as that:
import { CameraOptions, ImagePickerResponse, launchCamera } from 'react-native-image-picker';
Wrap in your component:
const [b64, setB64] = useState<string>("");
const manageImage = async (response: ImagePickerResponse) => {
if (response.didCancel) {
return;
} else if (response.assets) {
if (response.assets?.length > 0) {
setB64(response.assets[0].base64 ? response.assets[0].base64 : "");
}
}
}
launchCamera(options, (response) => {
manageImage(response);
});

How to download a file (image,gif,etc..) in react native

I have tried this code but my app is crashing without showing any error , i couldnt figure out what is the error
const {config,fs} = RNFetchBlob;
const { params } = this.props.navigation.state;
let PictureDir = fs.dirs.PictureDir // this is the pictures directory. You can check the available directories in the wiki.
let options = {
fileCache: true,
addAndroidDownloads : {
useDownloadManager : false, // setting it to true will use the device's native download manager and will be shown in the notification bar.
notification : false,
path: PictureDir + "/me_image", // this is the path where your downloaded file will live in
}
}
config(options).fetch('GET',url).then((res) => {
alert('Done');
})
saveToCameraRoll = () => {
const{selectedImage, downlaodUrl} = this.state
let url = downlaodUrl[0].url;
ToastAndroid.show("Image is Saving...", ToastAndroid.SHORT)
if (Platform.OS === 'android'){
RNFetchBlob
.config({
fileCache : true,
appendExt : 'jpg'
})
.fetch('GET', url)
.then((res) => {
console.log()
CameraRoll.saveToCameraRoll(res.path())
.then((res) => {
console.log("save", res)
ToastAndroid.show("Image saved Successfully.", ToastAndroid.SHORT)
}).catch((error) => {
ToastAndroid.show("Ops! Operation Failed", ToastAndroid.SHORT)
})
})
} else {
CameraRoll.saveToCameraRoll(url)
.then(alert('Success', 'Photo added to camera roll!'))
ToastAndroid.show("Image saved Successfully.", ToastAndroid.SHORT)
}
}