fix(camera): reject promise on web input cancel event

camera/src/web.ts

@@ -15,7 +15,7 @@
     // eslint-disable-next-line no-async-promise-executor
     return new Promise<Photo>(async (resolve, reject) => {
       if (options.webUseInput || options.source === CameraSource.Photos) {
-        this.fileInputExperience(options, resolve);
+        this.fileInputExperience(options, resolve, reject);
       } else if (options.source === CameraSource.Prompt) {
         let actionSheet: any = document.querySelector('pwa-action-sheet');
         if (!actionSheet) {
@@ -31,7 +31,7 @@
         actionSheet.addEventListener('onSelection', async (e: any) => {
           const selection = e.detail;
           if (selection === 0) {
-            this.fileInputExperience(options, resolve);
+            this.fileInputExperience(options, resolve, reject);
           } else {
             this.cameraExperience(options, resolve, reject);
           }
@@ -42,10 +42,10 @@
     });
   }
 
   async pickImages(_options: GalleryImageOptions): Promise<GalleryPhotos> {
     // eslint-disable-next-line no-async-promise-executor
-    return new Promise<GalleryPhotos>(async resolve => {
-      this.multipleFileInputExperience(resolve);
+    return new Promise<GalleryPhotos>(async (resolve, reject) => {
+      this.multipleFileInputExperience(resolve, reject);
     });
   }
 
@@ -78,17 +78,21 @@
 
         cameraModal.present();
       } catch (e) {
-        this.fileInputExperience(options, resolve);
+        this.fileInputExperience(options, resolve, reject);
       }
     } else {
       console.error(
         `Unable to load PWA Element 'pwa-camera-modal'. See the docs: https://capacitorjs.com/docs/web/pwa-elements.`,
       );
-      this.fileInputExperience(options, resolve);
+      this.fileInputExperience(options, resolve, reject);
     }
   }
 
-  private fileInputExperience(options: ImageOptions, resolve: any) {
+  private fileInputExperience(
+    options: ImageOptions,
+    resolve: any,
+    reject: any,
+  ) {
     let input = document.querySelector(
       '#_capacitor-camera-input',
     ) as HTMLInputElement;
@@ -103,8 +107,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') {
@@ -145,6 +149,10 @@
           cleanup();
         }
       });
+      input.addEventListener('cancel', (_e: any) => {
+        reject(new CapacitorException('User cancelled photos app'));
+        cleanup();
+      });
     }
 
     input.accept = 'image/*';
@@ -164,7 +172,7 @@
     input.click();
   }
 
-  private multipleFileInputExperience(resolve: any) {
+  private multipleFileInputExperience(resolve: any, reject: any) {
     let input = document.querySelector(
       '#_capacitor-camera-input-multiple',
     ) as HTMLInputElement;
@@ -180,11 +188,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') {
@@ -200,6 +208,10 @@
         resolve({ photos });
         cleanup();
       });
+      input.addEventListener('cancel', (_e: any) => {
+        reject(new CapacitorException('User cancelled photos app'));
+        cleanup();
+      });
     }
 
     input.accept = 'image/*';