Convert image to base64 and send to graphQl in React Native

user_16465140 0
Viewed 155

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>
react-native reactjs base64 javascript
2 Answers
ImageEditor.cropImage(imageUrl, imageSize, (imageURI) => {
      ImageStore.getBase64ForTag(imageURI, (base64Data) => {
          // base64Data contains the base64string of the image
      }, (reason) => console.error(reason));
 }, (reason) => console.error(reason));
user_109999290

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);
        
    };
user_164651400
Related