How do I access the image gallery from a PWA

Question

I need to know how to access the image gallery from a PWA. Currently the PWA will allow me to take pics and upload those on a mobile device but it won't let me access the image gallery and select images. On an actual desktop I can access the image gallery but not from an actual device...I can only access the camera to take photos.

So far I've looked into trying to set my browser to allow access to the image gallery but I don't see a setting on my Chrome browser from my android phone.

Here's the code:

  uploadFromFile(event, photoName: string) {

    const files = event.target.files;
    console.log('Uploading', files);
    const file = new Blob([files[0]], { type: 'image/jpeg' });

    console.log('file', file);
    const { type } = file;

    this.imageService.uploadImage(file, photoName, this.currentUser.uid)
    .then((url) => {
      this.photo0 = url;
      console.log('url edit prof', url);
    }).catch((error) => {
      alert(error.message);
    });
  }

 #capture::file-selector-button {
    display: none;
  }
  
  #capture {
    color: transparent;
  }
  
  #capture::before {
    content: url("../../../assets/image/SpaghettiPlus2.png");
    padding: 140px;
    align-items: center;
  }

        <input type="file" id="capture" accept="image" capture (change)="uploadFromFile($event, 'photo0')" />

It took a while to find this method of uploading pics in a PWA. Using the input for a file picker was the only solution I could find online for allowing PWAs to access pics.

So right now I just want to be able to access the photo gallery on a device in order to upload pics.

Answer 1

The problem is the capture attribute.

According to MDN:

capture was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.

Also, the value of the accept attribute seems to be wrong (according to MDN). If it doesn't work try accept="image/*" instead.