Camera plugin pickImages

Capacitor
1

Hi,
Our app currently allows selecting one image at a time with the getPhoto API function in the Capacitor Camera plugin (which returns DataURLs). I am trying to pick more than one image at a time so I am trying the pickImages API function which returns an array of images (in the webPath property) prefixed with ‘blob:’. How can I convert these paths to DataURLs as the getPhoto function does?
Thanks!

2

Hi all,
This still has me stumped. Is there a better way for me to be able to select multiple images and present to our API which takes a form containing an array of dataurls?
Thanks!

3

This seems to be the same as my issue, but the answer does not make sense. Can someone help me? javascript - Ionic Capacitor: How can I change the type of ImagePicker to Base64? - Stack Overflow

4

I am facing exactly same issue. I was expecting GalleryImageOptions to have a property like resultType but it doesn’t have any option like that. There is only one question related to this with a ridiculous answer as mentioned above. Anybody has a solution?

5

You can either convert the blob to a DataURL (see this SO answer) or use the Capacitor File Picker plugin:

import { FilePicker } from '@capawesome/capacitor-file-picker';

const pickImages = async () => {
  const result = await FilePicker.pickImages({
    readData: true,
  });
  const firstImage = result[0];
  return firstImage.data;
};

But I don’t recommend to use DataUrl/Base64, but instead the webPath (see convertFileSrc) if possible. This is more efficient.
The webPath is also returned by the Capacitor Camera plugin.