feat(camera): Add Camera option for disabling PWA elements picker

camera/README.md

@@ -254,6 +254,7 @@ Request camera and photo album permissions
 | **`direction`**          | <code><a href="#cameradirection">CameraDirection</a></code>   | iOS and Web only: The camera direction.                                                                                                                                                                                                                                    | <code>: CameraDirection.Rear</code> | 1.0.0 |
 | **`presentationStyle`**  | <code>'fullscreen' \| 'popover'</code>                        | iOS only: The presentation style of the Camera.                                                                                                                                                                                                                            | <code>: 'fullscreen'</code>         | 1.0.0 |
 | **`webUseInput`**        | <code>boolean</code>                                          | Web only: Whether to use the PWA Element experience or file input. The default is to use PWA Elements if installed and fall back to file input. To always use file input, set this to `true`. Learn more about PWA Elements: https://capacitorjs.com/docs/web/pwa-elements |                                     | 1.0.0 |
+| **`webHidePicker`**      | <code>boolean</code>                                          | Hide the PWA elements file picker button from the camera UI. Requires PWA elements 3.3.0 or newer.                                                                                                                                                                         | <code>false</code>                  | 6.1.0 |
 | **`promptLabelHeader`**  | <code>string</code>                                           | Text value to use when displaying the prompt.                                                                                                                                                                                                                              | <code>: 'Photo'</code>              | 1.0.0 |
 | **`promptLabelCancel`**  | <code>string</code>                                           | Text value to use when displaying the prompt. iOS only: The label of the 'cancel' button.                                                                                                                                                                                  | <code>: 'Cancel'</code>             | 1.0.0 |
 | **`promptLabelPhoto`**   | <code>string</code>                                           | Text value to use when displaying the prompt. The label of the button to select a saved image.                                                                                                                                                                             | <code>: 'From Photos'</code>        | 1.0.0 |

camera/src/definitions.ts

@@ -146,6 +146,15 @@ export interface ImageOptions {
    */
   webUseInput?: boolean;
 
+  /**
+   * Hide the PWA elements file picker button from the camera UI.
+   * Requires PWA elements 3.3.0 or newer.
+   * @default false
+   *
+   * @since 6.1.0
+   */
+  webHidePicker?: boolean;
+
   /**
    * Text value to use when displaying the prompt.
    * @default: 'Photo'

camera/src/web.ts

@@ -42,7 +42,7 @@
     });
   }
 
   async pickImages(_options: GalleryImageOptions): Promise<GalleryPhotos> {
     // eslint-disable-next-line no-async-promise-executor
     return new Promise<GalleryPhotos>(async (resolve, reject) => {
       this.multipleFileInputExperience(resolve, reject);
@@ -58,6 +58,9 @@
       const cameraModal: any = document.createElement('pwa-camera-modal');
       cameraModal.facingMode =
         options.direction === CameraDirection.Front ? 'user' : 'environment';
+      if (options.webHidePicker) {
+        cameraModal.hidePicker = options.webHidePicker;
+      }
       document.body.appendChild(cameraModal);
       try {
         await cameraModal.componentOnReady();
@@ -107,8 +110,8 @@
       input.type = 'file';
       input.hidden = true;
       document.body.appendChild(input);
       input.addEventListener('change', (_e: any) => {
         const file = input.files![0];
         let format = 'jpeg';
 
         if (file.type === 'image/png') {
@@ -149,7 +152,7 @@
           cleanup();
         }
       });
       input.addEventListener('cancel', (_e: any) => {
         reject(new CapacitorException('User cancelled photos app'));
         cleanup();
       });
@@ -188,11 +191,11 @@
       input.hidden = true;
       input.multiple = true;
       document.body.appendChild(input);
       input.addEventListener('change', (_e: any) => {
         const photos = [];
         // eslint-disable-next-line @typescript-eslint/prefer-for-of
         for (let i = 0; i < input.files!.length; i++) {
           const file = input.files![i];
           let format = 'jpeg';
 
           if (file.type === 'image/png') {
@@ -208,7 +211,7 @@
         resolve({ photos });
         cleanup();
       });
       input.addEventListener('cancel', (_e: any) => {
         reject(new CapacitorException('User cancelled photos app'));
         cleanup();
       });