how can i convert image uri to base64?

Question

I am using react-native-image-picker along with react-native-photo-editor ..

photo editor returns uri of the edited image while my api supports base64, is there a way I can convert the edited image uri to base64 encoding ?

this is my code below

const handleOnUploadFromLibrary = () => {
    launchImageLibrary(libraryOptions, (response: ImagePickerResponse) => {
    if (response.assets) {
        let assets = response.assets[0];
        let imagePathMinusExtention = assets.uri?.replace('file://', '');
        setImagePickerAsset({...assets, uri: imagePathMinusExtention});
      }
      PhotoEditor.Edit({
        path: imagePickerAsset?.uri || '',
        onDone: (path) => {
          console.log('donee::::');
          let extention = "file://";
          let imagePathPlusExtention = extention.concat(`${path}`);
          setImagePickerAsset({...imagePickerAsset, uri: imagePathPlusExtention});

          var data: UsedAttachment = {
            fileType: imagePickerAsset?.type,
            fileName: imagePickerAsset?.fileName,
            refId: visit.draftAppRequestId,
            refTypeId: '5', //draftx
            title: imagePickerAsset?.fileName,
            mimeType: imagePickerAsset?.type,
            modelMapperKey: '',
            files: [imagePickerAsset?.uri],
          };

          callUploadAttachment({data});

          hideDialog();
        },
        onCancel: () => {
          console.log('Cancel ::: ');
          hideDialog();
        },
      });
    });
 };

Answer 1

You can use react-native-fs if you are using react-native cli

documentation: https://github.com/itinance/react-native-fs#readfilefilepath-string-encoding-string-promisestring

import RNFS from 'react-native-fs';

//base64 res
var data = await RNFS.readFile( "file://path-to-file", 'base64').then(res => { return res });