Convert Image FILE_URI into Base64 string?

Question

I need to convert File Uri response from Image picker into base64 string.

I have tried file reader for converting the file uri into base64 but it is not working.

const options: ImagePickerOptions = {
      maximumImagesCount: 1,
      width: 1200,
      height: 1200,
      quality: 80
    };

    this.imagePicker.getPictures(options).then(async (results) => {
      const fileData: string = results[0];
            const path: string = fileData.substring(0, fileData.lastIndexOf('/') + 1);
            const fileName: string = fileData.split('/').pop();

            console.log(fileName, "fileName");
            console.log(path, "Path");

            this.file.readAsDataURL(path, fileName)
              .then((base64File) => {
                console.log("here is encoded image ", base64File)
              })
              .catch((err) => {
                console.log('Error reading file', err);
              })
});

Please let me know where I am going wrong.Any suggestion or solution is appreciated. Thanks in advance.

Yannick Beauchamp-H · Accepted Answer · 2021-10-28 08:41:57Z

1

You can set the outputType in ImagePickerOptions to window.imagePicker.OutputType.BASE64_STRING, then results should be an array of base64 string. But you won't be able to get the file name the way you did.

const options: ImagePickerOptions = {
  maximumImagesCount: 1,
  width: 1200,
  height: 1200,
  quality: 80,
  outputType: window.imagePicker.OutputType.BASE64_STRING
};

this.imagePicker.getPictures(options).then(async (results) => {
  const base64File: string = results[0];
  console.log("here is encoded image ", base64File);
});

You might have to cast window as any.

edited Oct 28, 2021 at 8:41

answered Oct 28, 2021 at 7:56

Yannick Beauchamp-H

1,70111 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mobile Development Team Over a year ago

Hey! Thanks for your quick response! But I am not getting blob in response. I am getting FILE_URI staring with file:/// . How to convert that result in base64? If you can help it will be highly appreciated. Thanks.

Yannick Beauchamp-H Over a year ago

I'm not familiar enough with Ionic, it seems to work fine in the browser. I'm going to update my answer with an alternative way.

Collectives™ on Stack Overflow

Convert Image FILE_URI into Base64 string?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related