How can I convert an image selected from imagepicker into base64 before sending it to graphql?
I set useState varaibles to set
const [image, setImage] = useState(null);
What can i do here to convert?
const choosePhotoFromLibrary = async() => {
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (permissionResult.granted === false) {
alert("Permission to access camera roll is required!");
return;
}
const pickerResult = await ImagePicker.launchImageLibraryAsync();
if(!pickerResult.cancelled) {
setImage(pickerResuls.uri);
}
then I grab the image from and set it to the useState varaible
<View style={styles.picContainer}>
<AddPicButton
onPress= {choosePhotoFromLibrary}
image= {image}
/>
<Text style={styles.bottomText}>ADD A PICTURE</Text>
</View>
ImageEditor.cropImage(imageUrl, imageSize, (imageURI) => {
ImageStore.getBase64ForTag(imageURI, (base64Data) => {
// base64Data contains the base64string of the image
}, (reason) => console.error(reason));
}, (reason) => console.error(reason));
it turns out ImagePicker has its own base64 conversion
const pickImage = async () => {
// No permissions request is necessary for launching the image library
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
quality: 0,
base64: true
});
console.log(result);
if (!result.cancelled) {
setImage(result.uri);
}
console.log(result);
};