I try to upload images on cloud storage (Firebase) which I am able to do on web but on android it not uploading it show this error:
and when I do it on web when I try to print image object it shows
the thing is it work on web without error but not on android. Here i updated my code as you said but now it not ever work android but on web too. I try to change it to data_url and it work for web but for android it show error. By the way on android it show a image path like.. enter image description here but web has a format of data:base64;
import React, { useState } from "react";
import { Image, Text, TouchableOpacity, View } from "react-native";
//Firebase Storege..
import {
ref,
getDownloadURL,
uploadString,
deleteObject,
uploadBytes,
} from "firebase/storage";
import { storage } from "../firebaseWeb";
import * as ImagePicker from "expo-image-picker";
//Loader...
import * as Progress from "react-native-progress";
//ContextAPI....
import useAuth from "../hooks/useAuth";
const UploadImage = () => {
const { userInfo, setProfileLink, profileLink } = useAuth();
const [loading, setLoading] = useState(false);
const removePicture = () => {
setLoading(true);
//Delete from Fibebase Storage...
const imageRef = ref(storage, `profiles/${userInfo.uid}/profilePic`);
deleteObject(imageRef)
.then(() => {
setProfileLink(null);
})
.catch((error) => {
alert(error);
})
.finally(() => setLoading(false));
};
const openImagePickerAsync = async () => {
const permissionResult =
await ImagePicker.requestMediaLibraryPermissionsAsync();
if (permissionResult.granted === false) {
alert("Permission to access camera roll is required!");
return;
}
const pickerResult = await ImagePicker.launchImageLibraryAsync({
base64: true,
});
if (pickerResult.cancelled === true) {
return;
}
setLoading(true);
//Upload to Fibebase Storage...
const imageRef = ref(storage, `profiles/${userInfo.uid}/profilePic`);
console.log(pickerResult.uri);
await uploadString(imageRef, pickerResult.uri, "base64url")
.then(async (snapshot) => {
const downloadURL = await getDownloadURL(imageRef);
setProfileLink(downloadURL);
})
.catch((error) => alert(error))
.finally(() => setLoading(false));
};
if (profileLink !== null) {
return (
<View>
<TouchableOpacity onPress={removePicture}>
<Image
source={{ uri: profileLink }}
className="w-80 md:w-96 h-96"
style={{
resizeMode: "contain",
}}
/>
</TouchableOpacity>
</View>
);
}
// if (loading)
// return (
// <View className="items-center justify-center">
// <Progress.Circle size={30} indeterminate={true} />
// </View>
// );
return (
<TouchableOpacity
className="w-64 md:w-96 p-3 rounded-xl bg-red-400"
onPress={openImagePickerAsync}
>
<Text className="text-center text-white text-xl">
Pick A Profile Picture.
</Text>
</TouchableOpacity>
);
};
export default UploadImage;See my openImagePickerAsync function.