Capacitor Camera Plugin PWA

I’m trying to use the Capacitor Camera plugin in a PWA to either take a photo or select an image to upload as a user’s profile picture. Currently only implementing on the web, testing in Firefox. When using the pickImages() API I find that the resulting GalleryPhotos promise Photos array doesn’t contain the ‘path’ or ‘exif’ key values, it only contains the ‘format’ and ‘webPath’ key values.

The docs state:

  // You can access the original file using image.path, which can be
  // passed to the Filesystem API to read the raw data of the image,
  // if desired (or pass resultType: CameraResultType.Base64 to getPhoto)

But without the ‘path’ I can’t access the image properly for the Filesystem API. Is the web implementation meant to be done differently or is this a bug?

Regards,
Trent

On Web you can’t get the real paths of the files, camera gives you a blob url and the Filesystem doesn’t access the computer filesystem, it’s a “fake” filesystem that stores the files in an IndexedDB.

Thanks, Julio. How does the Filesystem API then read the blob? When using readFile() it says no file exists.

It doesn’t, the Blob is returned from the Camera plugin and doesn’t exist on Filesystem plugin since they are different plugins. If you want the image to be saved on web Filesystem you have to save it yourself.

Yes I understand that the blob is returned by the Camera plugin. I was asking how to then pass it to the Filesystem plugin to save the file, as that is what the documentation of Camera plugin says to do.

To save the file yourself I’m guessing you use the javascript File constructor?

It would be great if the Camera plugin docs explained all this.

Use blob

resultType: CameraResultType.Uri,
.
.
.
this.imageSource=this.domSanitizer.bypassSecurityTrustUrl(image.webPath ? image.webPath : "")

Check detail demo at ///Take pictures with the phone’s camera using Ionic 6 & capacitor camera plugin - YouTube