From 66e70050400c95d5ab8a53cc166bf330dfcf9b8f Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 6 Aug 2019 19:23:11 -0500
Subject: [PATCH 01/12] hacking

Reader

Move PWA Elements to be opt-in

Fix up base64 method and such
---
 core/src/core-plugin-definitions.ts  |   8 +-
 core/src/web/camera.ts               | 110 +++++++++++++++++++++------
 example/src/pages/camera/camera.html |   2 +
 example/src/pages/camera/camera.ts   |  21 +++++
 example/www/index.html               |   3 -
 5 files changed, 116 insertions(+), 28 deletions(-)

diff --git a/core/src/core-plugin-definitions.ts b/core/src/core-plugin-definitions.ts
index f14a911b62..e8e85c8d77 100644
--- a/core/src/core-plugin-definitions.ts
+++ b/core/src/core-plugin-definitions.ts
@@ -310,6 +310,12 @@ export interface CameraOptions {
    * iOS only: The presentation style of the Camera. Defaults to fullscreen.
    */
   presentationStyle?: 'fullscreen' | 'popover';
+
+  /**
+   * Web only: whether to use the PWA Element experience or file input. The default
+   * is to use file input experience. Learn more about PWA Elements: https://capacitor.ionicframework.com/docs/pwa-elements/
+   */
+  webUsePWAElements?: boolean;
 }
 
 export enum CameraSource {
@@ -347,7 +353,7 @@ export interface CameraPhoto {
    */
   exif?: any;
   /**
-   * The format of the image. Currently, only "jpeg" is supported.
+   * The format of the image, ex: jpeg, png, gif.
    */
   format: string;
 }
diff --git a/core/src/web/camera.ts b/core/src/web/camera.ts
index bb2f049f34..7c9a88990f 100644
--- a/core/src/web/camera.ts
+++ b/core/src/web/camera.ts
@@ -4,11 +4,10 @@ import {
   CameraPlugin,
   CameraPhoto,
   CameraOptions,
-  CameraResultType
+  CameraResultType,
+  CameraDirection
 } from '../core-plugin-definitions';
 
-//import '@ionic/pwa-elements';
-
 export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
   constructor() {
     super({
@@ -18,36 +17,99 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
   }
 
   async getPhoto(options: CameraOptions): Promise<CameraPhoto> {
-    options;
-
     return new Promise<CameraPhoto>(async (resolve, reject) => {
-      const cameraModal: any = document.createElement('pwa-camera-modal');
-      document.body.appendChild(cameraModal);
-      await cameraModal.componentOnReady();
-      cameraModal.addEventListener('onPhoto', async (e: any) => {
-        const photo = e.detail;
-
-        if (photo === null) {
-          reject('User cancelled photos app');
-        } else if (photo instanceof Error) {
-          reject(photo.message);
-        } else {
-          resolve(await this._getCameraPhoto(photo, options));
+      if (options.webUsePWAElements === true) {
+        const cameraModal: any = document.createElement('pwa-camera-modal');
+        document.body.appendChild(cameraModal);
+        try {
+          await cameraModal.componentOnReady();
+          cameraModal.addEventListener('onPhoto', async (e: any) => {
+            const photo = e.detail;
+
+            if (photo === null) {
+              reject('User cancelled photos app');
+            } else if (photo instanceof Error) {
+              reject(photo.message);
+            } else {
+              resolve(await this._getCameraPhoto(photo, options));
+            }
+
+            cameraModal.dismiss();
+            document.body.removeChild(cameraModal);
+          });
+
+          cameraModal.present();
+        } catch (e) {
+          this.fileInputExperience(options, resolve, reject);
         }
+      } else {
+        this.fileInputExperience(options, resolve, reject);
+      }
+    });
+  }
+
+  private fileInputExperience(options: CameraOptions, resolve: any, reject: any) {
+    let input = document.querySelector('#_capacitor-camera-input') as HTMLInputElement;
+
+    if (!input) {
+      input = document.createElement('input') as HTMLInputElement;
+      input.type = 'file';
+      input.accept = 'image/*';
+
+      if (options.direction === CameraDirection.Front) {
+        (input as any).capture = 'user';
+      } else if (options.direction === CameraDirection.Rear) {
+        (input as any).capture = 'environment';
+      }
 
-        cameraModal.dismiss();
-        document.body.removeChild(cameraModal);
+      input.addEventListener('change', (_e: any) => {
+        const file = input.files[0];
+        let format = 'jpeg';
+        if (file.type === 'image/png') {
+          format = 'png';
+        }
+        if (file.type === 'image/gif') {
+          format = 'gif';
+        }
+
+        const reader = new FileReader();
+        reader.addEventListener('load', () => {
+          if (options.resultType === CameraResultType.DataUrl) {
+            resolve({
+              dataUrl: reader.result,
+              format
+            } as CameraPhoto);
+          } else if (options.resultType === CameraResultType.Base64) {
+            const b64 = (reader.result as string).split(',')[1];
+            resolve({
+              base64String: b64,
+              format
+            } as CameraPhoto);
+          } else {
+            reject('Unsupported result type for this platform');
+          }
+          /*
+          */
+        });
+
+        if (options.resultType === CameraResultType.DataUrl || options.resultType === CameraResultType.Base64) {
+          reader.readAsDataURL(file);
+        } else {
+          reject('Camera result type not supported on this platform. Use DataUrl or Base64');
+        }
       });
 
-      cameraModal.present();
-    });
+      document.body.appendChild(input);
+    }
+
+    input.click();
   }
 
   private _getCameraPhoto(photo: Blob, options: CameraOptions) {
     return new Promise<CameraPhoto>((resolve, reject) => {
       var reader = new FileReader();
-      var format = photo.type.split('/')[1]
-      if (options.resultType == CameraResultType.Uri) {
+      var format = photo.type.split('/')[1];
+      if (options.resultType === CameraResultType.Uri) {
         resolve({
           webPath: URL.createObjectURL(photo),
           format: format
@@ -56,7 +118,7 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
         reader.readAsDataURL(photo);
         reader.onloadend = () => {
           const r = reader.result as string;
-          if (options.resultType == CameraResultType.DataUrl) {
+          if (options.resultType === CameraResultType.DataUrl) {
             resolve({
               dataUrl: r,
               format: format
diff --git a/example/src/pages/camera/camera.html b/example/src/pages/camera/camera.html
index e5f84a3847..665c660e48 100644
--- a/example/src/pages/camera/camera.html
+++ b/example/src/pages/camera/camera.html
@@ -16,8 +16,10 @@
 <ion-content padding>
   <img [src]="image" />
   <button (click)="getPhoto()" ion-button color="primary">Prompt</button>
+  <button (click)="getPhotoPWAElements()" ion-button color="primary">Prompt (PWA Elements)</button>
   <button (click)="takePicture()" ion-button color="primary">From Camera</button>
   <button (click)="getFromPhotos()" ion-button color="primary">From Photos</button>
+  <button (click)="getBase64()" ion-button color="primary">Prompt (b64)</button>
   <button (click)="takePictureScaled()" ion-button color="primary">Scaled</button>
   <button (click)="takePictureCorrected()" ion-button color="primary">Orientation Corrected</button>
   <button (click)="takePictureFile()" ion-button color="primary">File URI</button>
diff --git a/example/src/pages/camera/camera.ts b/example/src/pages/camera/camera.ts
index 904eafa587..757b977791 100644
--- a/example/src/pages/camera/camera.ts
+++ b/example/src/pages/camera/camera.ts
@@ -36,10 +36,31 @@ export class CameraPage {
   }
 
   async getPhoto() {
+    const image = await Plugins.Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      resultType: CameraResultType.DataUrl
+    })
+    console.log('Got image back', image.path, image.webPath, image.format, image.exif);
+    this.image = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
+  }
+
+  async getBase64() {
+    const image = await Plugins.Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      resultType: CameraResultType.Base64
+    })
+    console.log('Got image back', image.base64String, image.format);
+    this.image = this.sanitizer.bypassSecurityTrustResourceUrl(image && (`data:${image.format};base64,${image.base64String}`));
+  }
+
+  async getPhotoPWAElements() {
     const image = await Plugins.Camera.getPhoto({
       quality: 90,
       allowEditing: true,
       resultType: CameraResultType.DataUrl,
+      webUsePWAElements: true
     })
     console.log('Got image back', image.path, image.webPath, image.format, image.exif);
     this.image = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
diff --git a/example/www/index.html b/example/www/index.html
index d1432d63e6..02e851acf9 100644
--- a/example/www/index.html
+++ b/example/www/index.html
@@ -1,9 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
 <head>
-  <script data-ionic="inject">
-    (function(w){var i=w.Ionic=w.Ionic||{};i.version='^3.9.6';i.angular='5.0.1';i.staticDir='build/';})(window);
-  </script>
   <meta charset="UTF-8">
   <title>Ionic App</title>
   <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

From 6d1c6085adb183d15b6ecbcc4b1c217045af7c41 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 7 Aug 2019 12:19:30 -0500
Subject: [PATCH 02/12] Remove bad comment

---
 core/src/web/camera.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/core/src/web/camera.ts b/core/src/web/camera.ts
index 7c9a88990f..8a74811d21 100644
--- a/core/src/web/camera.ts
+++ b/core/src/web/camera.ts
@@ -88,8 +88,6 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
           } else {
             reject('Unsupported result type for this platform');
           }
-          /*
-          */
         });
 
         if (options.resultType === CameraResultType.DataUrl || options.resultType === CameraResultType.Base64) {

From 96d12d68f8973c15e5f74886f69e53b05ccb2ce5 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 7 Aug 2019 13:23:43 -0500
Subject: [PATCH 03/12] Camera direction and capture

---
 core/src/web/camera.ts               | 17 ++++++++++++++---
 example/src/pages/camera/camera.html |  1 +
 example/src/pages/camera/camera.ts   | 12 ++++++++++++
 example/www/index.html               |  3 +++
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/core/src/web/camera.ts b/core/src/web/camera.ts
index 8a74811d21..c9415c8616 100644
--- a/core/src/web/camera.ts
+++ b/core/src/web/camera.ts
@@ -5,7 +5,8 @@ import {
   CameraPhoto,
   CameraOptions,
   CameraResultType,
-  CameraDirection
+  CameraDirection,
+  CameraSource
 } from '../core-plugin-definitions';
 
 export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
@@ -18,7 +19,7 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
 
   async getPhoto(options: CameraOptions): Promise<CameraPhoto> {
     return new Promise<CameraPhoto>(async (resolve, reject) => {
-      if (options.webUsePWAElements === true) {
+      if (options.webUsePWAElements === true && options.source === CameraSource.Camera) {
         const cameraModal: any = document.createElement('pwa-camera-modal');
         document.body.appendChild(cameraModal);
         try {
@@ -51,12 +52,19 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
   private fileInputExperience(options: CameraOptions, resolve: any, reject: any) {
     let input = document.querySelector('#_capacitor-camera-input') as HTMLInputElement;
 
+    const cleanup = () => {
+      input.parentNode && input.parentNode.removeChild(input);
+    };
+
     if (!input) {
       input = document.createElement('input') as HTMLInputElement;
       input.type = 'file';
       input.accept = 'image/*';
+      (input as any).capture = true;
 
-      if (options.direction === CameraDirection.Front) {
+      if (options.source === CameraSource.Photos || options.source === CameraSource.Prompt) {
+        input.removeAttribute('capture');
+      } else if (options.direction === CameraDirection.Front) {
         (input as any).capture = 'user';
       } else if (options.direction === CameraDirection.Rear) {
         (input as any).capture = 'environment';
@@ -88,12 +96,15 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
           } else {
             reject('Unsupported result type for this platform');
           }
+
+          cleanup();
         });
 
         if (options.resultType === CameraResultType.DataUrl || options.resultType === CameraResultType.Base64) {
           reader.readAsDataURL(file);
         } else {
           reject('Camera result type not supported on this platform. Use DataUrl or Base64');
+          cleanup();
         }
       });
 
diff --git a/example/src/pages/camera/camera.html b/example/src/pages/camera/camera.html
index 665c660e48..539a7792a7 100644
--- a/example/src/pages/camera/camera.html
+++ b/example/src/pages/camera/camera.html
@@ -17,6 +17,7 @@
   <img [src]="image" />
   <button (click)="getPhoto()" ion-button color="primary">Prompt</button>
   <button (click)="getPhotoPWAElements()" ion-button color="primary">Prompt (PWA Elements)</button>
+  <button (click)="getPhotoFront()" ion-button color="primary">From Camera (front facing)</button>
   <button (click)="takePicture()" ion-button color="primary">From Camera</button>
   <button (click)="getFromPhotos()" ion-button color="primary">From Photos</button>
   <button (click)="getBase64()" ion-button color="primary">Prompt (b64)</button>
diff --git a/example/src/pages/camera/camera.ts b/example/src/pages/camera/camera.ts
index 757b977791..b73352a0e7 100644
--- a/example/src/pages/camera/camera.ts
+++ b/example/src/pages/camera/camera.ts
@@ -3,6 +3,7 @@ import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import {
   Plugins,
+  CameraDirection,
   CameraResultType,
   CameraSource,
   FilesystemDirectory
@@ -45,6 +46,17 @@ export class CameraPage {
     this.image = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
   }
 
+  async getPhotoFront() {
+    const image = await Plugins.Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      direction: CameraDirection.Front,
+      resultType: CameraResultType.DataUrl
+    })
+    console.log('Got image back', image.path, image.webPath, image.format, image.exif);
+    this.image = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
+  }
+
   async getBase64() {
     const image = await Plugins.Camera.getPhoto({
       quality: 90,
diff --git a/example/www/index.html b/example/www/index.html
index 02e851acf9..d1432d63e6 100644
--- a/example/www/index.html
+++ b/example/www/index.html
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
 <head>
+  <script data-ionic="inject">
+    (function(w){var i=w.Ionic=w.Ionic||{};i.version='^3.9.6';i.angular='5.0.1';i.staticDir='build/';})(window);
+  </script>
   <meta charset="UTF-8">
   <title>Ionic App</title>
   <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

From f4eee123b33d27795c6add24c066258c3215b289 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 7 Aug 2019 13:36:09 -0500
Subject: [PATCH 04/12] Camera

---
 core/src/web/camera.ts | 88 +++++++++++++++++++++---------------------
 1 file changed, 45 insertions(+), 43 deletions(-)

diff --git a/core/src/web/camera.ts b/core/src/web/camera.ts
index c9415c8616..4eef2dc649 100644
--- a/core/src/web/camera.ts
+++ b/core/src/web/camera.ts
@@ -58,58 +58,60 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
 
     if (!input) {
       input = document.createElement('input') as HTMLInputElement;
+      input.id = '_capacitor-camera-input';
       input.type = 'file';
-      input.accept = 'image/*';
-      (input as any).capture = true;
-
-      if (options.source === CameraSource.Photos || options.source === CameraSource.Prompt) {
-        input.removeAttribute('capture');
-      } else if (options.direction === CameraDirection.Front) {
-        (input as any).capture = 'user';
-      } else if (options.direction === CameraDirection.Rear) {
-        (input as any).capture = 'environment';
-      }
+      document.body.appendChild(input);
+    }
 
-      input.addEventListener('change', (_e: any) => {
-        const file = input.files[0];
-        let format = 'jpeg';
-        if (file.type === 'image/png') {
-          format = 'png';
-        }
-        if (file.type === 'image/gif') {
-          format = 'gif';
-        }
+    input.accept = 'image/*';
+    (input as any).capture = true;
 
-        const reader = new FileReader();
-        reader.addEventListener('load', () => {
-          if (options.resultType === CameraResultType.DataUrl) {
-            resolve({
-              dataUrl: reader.result,
-              format
-            } as CameraPhoto);
-          } else if (options.resultType === CameraResultType.Base64) {
-            const b64 = (reader.result as string).split(',')[1];
-            resolve({
-              base64String: b64,
-              format
-            } as CameraPhoto);
-          } else {
-            reject('Unsupported result type for this platform');
-          }
+    if (options.source === CameraSource.Photos || options.source === CameraSource.Prompt) {
+      input.removeAttribute('capture');
+    } else if (options.direction === CameraDirection.Front) {
+      (input as any).capture = 'user';
+    } else if (options.direction === CameraDirection.Rear) {
+      (input as any).capture = 'environment';
+    }
 
-          cleanup();
-        });
+    input.addEventListener('change', (_e: any) => {
+      console.log('CHANGE', _e);
+      const file = input.files[0];
+      let format = 'jpeg';
+      if (file.type === 'image/png') {
+        format = 'png';
+      }
+      if (file.type === 'image/gif') {
+        format = 'gif';
+      }
 
-        if (options.resultType === CameraResultType.DataUrl || options.resultType === CameraResultType.Base64) {
-          reader.readAsDataURL(file);
+      const reader = new FileReader();
+      reader.addEventListener('load', () => {
+        if (options.resultType === CameraResultType.DataUrl) {
+          resolve({
+            dataUrl: reader.result,
+            format
+          } as CameraPhoto);
+        } else if (options.resultType === CameraResultType.Base64) {
+          const b64 = (reader.result as string).split(',')[1];
+          resolve({
+            base64String: b64,
+            format
+          } as CameraPhoto);
         } else {
-          reject('Camera result type not supported on this platform. Use DataUrl or Base64');
-          cleanup();
+          reject('Unsupported result type for this platform');
         }
+
+        cleanup();
       });
 
-      document.body.appendChild(input);
-    }
+      if (options.resultType === CameraResultType.DataUrl || options.resultType === CameraResultType.Base64) {
+        reader.readAsDataURL(file);
+      } else {
+        reject('Camera result type not supported on this platform. Use DataUrl or Base64');
+        cleanup();
+      }
+    });
 
     input.click();
   }

From 648f225822f167da05bc2b742b2745ff618d474c Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 30 Jun 2020 19:02:42 -0500
Subject: [PATCH 05/12] Update core/src/web/camera.ts

Co-authored-by: jcesarmobile <jcesarmobile@gmail.com>
---
 core/src/web/camera.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/core/src/web/camera.ts b/core/src/web/camera.ts
index 4eef2dc649..8411e50a8a 100644
--- a/core/src/web/camera.ts
+++ b/core/src/web/camera.ts
@@ -108,7 +108,10 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
       if (options.resultType === CameraResultType.DataUrl || options.resultType === CameraResultType.Base64) {
         reader.readAsDataURL(file);
       } else {
-        reject('Camera result type not supported on this platform. Use DataUrl or Base64');
+        resolve({
+          webPath: URL.createObjectURL(file),
+          format: format
+        });
         cleanup();
       }
     });

From e867dd0c3d14eb429df8651a3d0c9dd0924dfd47 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 30 Jun 2020 19:03:33 -0500
Subject: [PATCH 06/12] Update core/src/web/camera.ts

Co-authored-by: jcesarmobile <jcesarmobile@gmail.com>
---
 core/src/web/camera.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/web/camera.ts b/core/src/web/camera.ts
index 8411e50a8a..3bd1f84798 100644
--- a/core/src/web/camera.ts
+++ b/core/src/web/camera.ts
@@ -75,7 +75,7 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
     }
 
     input.addEventListener('change', (_e: any) => {
-      console.log('CHANGE', _e);
+     
       const file = input.files[0];
       let format = 'jpeg';
       if (file.type === 'image/png') {

From 260d7c1202008d25b2c190bae2f495538350fa60 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@ionic.io>
Date: Tue, 30 Jun 2020 19:55:48 -0500
Subject: [PATCH 07/12] Update flag

---
 core/src/core-plugin-definitions.ts | 2 +-
 core/src/web/camera.ts              | 2 +-
 example/src/pages/camera/camera.ts  | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/core/src/core-plugin-definitions.ts b/core/src/core-plugin-definitions.ts
index e8e85c8d77..174d1f9b52 100644
--- a/core/src/core-plugin-definitions.ts
+++ b/core/src/core-plugin-definitions.ts
@@ -315,7 +315,7 @@ export interface CameraOptions {
    * Web only: whether to use the PWA Element experience or file input. The default
    * is to use file input experience. Learn more about PWA Elements: https://capacitor.ionicframework.com/docs/pwa-elements/
    */
-  webUsePWAElements?: boolean;
+  webUseInput?: boolean;
 }
 
 export enum CameraSource {
diff --git a/core/src/web/camera.ts b/core/src/web/camera.ts
index 3bd1f84798..c057f46be9 100644
--- a/core/src/web/camera.ts
+++ b/core/src/web/camera.ts
@@ -19,7 +19,7 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
 
   async getPhoto(options: CameraOptions): Promise<CameraPhoto> {
     return new Promise<CameraPhoto>(async (resolve, reject) => {
-      if (options.webUsePWAElements === true && options.source === CameraSource.Camera) {
+      if (options.webUseInput === false && options.source === CameraSource.Camera) {
         const cameraModal: any = document.createElement('pwa-camera-modal');
         document.body.appendChild(cameraModal);
         try {
diff --git a/example/src/pages/camera/camera.ts b/example/src/pages/camera/camera.ts
index b73352a0e7..07c0712265 100644
--- a/example/src/pages/camera/camera.ts
+++ b/example/src/pages/camera/camera.ts
@@ -72,7 +72,8 @@ export class CameraPage {
       quality: 90,
       allowEditing: true,
       resultType: CameraResultType.DataUrl,
-      webUsePWAElements: true
+      webUseInput: false,
+      source: CameraSource.Camera
     })
     console.log('Got image back', image.path, image.webPath, image.format, image.exif);
     this.image = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));

From ff0031a2472bf74a7b9013347694779e1da220ce Mon Sep 17 00:00:00 2001
From: Max Lynch <max@ionic.io>
Date: Tue, 30 Jun 2020 20:05:42 -0500
Subject: [PATCH 08/12] linter

---
 core/src/web/camera.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/core/src/web/camera.ts b/core/src/web/camera.ts
index c057f46be9..927b3f69d5 100644
--- a/core/src/web/camera.ts
+++ b/core/src/web/camera.ts
@@ -75,7 +75,6 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
     }
 
     input.addEventListener('change', (_e: any) => {
-     
       const file = input.files[0];
       let format = 'jpeg';
       if (file.type === 'image/png') {

From c782540f01c0b1dfd3df9b590b74197ac8eeb67a Mon Sep 17 00:00:00 2001
From: Daniel Imhoff <dwieeb@gmail.com>
Date: Wed, 1 Jul 2020 13:18:06 -0700
Subject: [PATCH 09/12] add message about missing pwa-camera-modal

---
 core/src/core-plugin-definitions.ts |  2 +-
 core/src/web/camera.ts              | 47 ++++++++++++++++-------------
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/core/src/core-plugin-definitions.ts b/core/src/core-plugin-definitions.ts
index 724395ee11..0260aeae50 100644
--- a/core/src/core-plugin-definitions.ts
+++ b/core/src/core-plugin-definitions.ts
@@ -346,7 +346,7 @@ export interface CameraOptions {
 
   /**
    * Web only: whether to use the PWA Element experience or file input. The default
-   * is to use file input experience. Learn more about PWA Elements: https://capacitor.ionicframework.com/docs/pwa-elements/
+   * is to use file input experience. Learn more about PWA Elements: https://capacitorjs.com/docs/pwa-elements
    */
   webUseInput?: boolean;
 
diff --git a/core/src/web/camera.ts b/core/src/web/camera.ts
index 927b3f69d5..4d7efe6ea0 100644
--- a/core/src/web/camera.ts
+++ b/core/src/web/camera.ts
@@ -20,27 +20,32 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
   async getPhoto(options: CameraOptions): Promise<CameraPhoto> {
     return new Promise<CameraPhoto>(async (resolve, reject) => {
       if (options.webUseInput === false && options.source === CameraSource.Camera) {
-        const cameraModal: any = document.createElement('pwa-camera-modal');
-        document.body.appendChild(cameraModal);
-        try {
-          await cameraModal.componentOnReady();
-          cameraModal.addEventListener('onPhoto', async (e: any) => {
-            const photo = e.detail;
-
-            if (photo === null) {
-              reject('User cancelled photos app');
-            } else if (photo instanceof Error) {
-              reject(photo.message);
-            } else {
-              resolve(await this._getCameraPhoto(photo, options));
-            }
-
-            cameraModal.dismiss();
-            document.body.removeChild(cameraModal);
-          });
-
-          cameraModal.present();
-        } catch (e) {
+        if (customElements.get('pwa-camera-modal')) {
+          const cameraModal: any = document.createElement('pwa-camera-modal');
+          document.body.appendChild(cameraModal);
+          try {
+            await cameraModal.componentOnReady();
+            cameraModal.addEventListener('onPhoto', async (e: any) => {
+              const photo = e.detail;
+
+              if (photo === null) {
+                reject('User cancelled photos app');
+              } else if (photo instanceof Error) {
+                reject(photo.message);
+              } else {
+                resolve(await this._getCameraPhoto(photo, options));
+              }
+
+              cameraModal.dismiss();
+              document.body.removeChild(cameraModal);
+            });
+
+            cameraModal.present();
+          } catch (e) {
+            this.fileInputExperience(options, resolve, reject);
+          }
+        } else {
+          console.error(`Unable to load PWA Element 'pwa-camera-modal'. See the docs: https://capacitorjs.com/docs/pwa-elements.`);
           this.fileInputExperience(options, resolve, reject);
         }
       } else {

From 2d83caa784d02f72197c76d08b81ef5323b24985 Mon Sep 17 00:00:00 2001
From: Daniel Imhoff <dwieeb@gmail.com>
Date: Mon, 6 Jul 2020 14:48:31 -0700
Subject: [PATCH 10/12] PR comments

---
 core/src/core-plugin-definitions.ts |  3 ++
 core/src/web/camera.ts              | 49 ++++++++++++++---------------
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/core/src/core-plugin-definitions.ts b/core/src/core-plugin-definitions.ts
index 0260aeae50..76cb9a16c6 100644
--- a/core/src/core-plugin-definitions.ts
+++ b/core/src/core-plugin-definitions.ts
@@ -400,6 +400,9 @@ export interface CameraPhoto {
   exif?: any;
   /**
    * The format of the image, ex: jpeg, png, gif.
+   *
+   * iOS and Android only support jpeg.
+   * Web supports jpeg and png. gif is only supported if using file input.
    */
   format: string;
 }
diff --git a/core/src/web/camera.ts b/core/src/web/camera.ts
index 4d7efe6ea0..0e73e38cde 100644
--- a/core/src/web/camera.ts
+++ b/core/src/web/camera.ts
@@ -42,19 +42,19 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
 
             cameraModal.present();
           } catch (e) {
-            this.fileInputExperience(options, resolve, reject);
+            this.fileInputExperience(options, resolve);
           }
         } else {
           console.error(`Unable to load PWA Element 'pwa-camera-modal'. See the docs: https://capacitorjs.com/docs/pwa-elements.`);
-          this.fileInputExperience(options, resolve, reject);
+          this.fileInputExperience(options, resolve);
         }
       } else {
-        this.fileInputExperience(options, resolve, reject);
+        this.fileInputExperience(options, resolve);
       }
     });
   }
 
-  private fileInputExperience(options: CameraOptions, resolve: any, reject: any) {
+  private fileInputExperience(options: CameraOptions, resolve: any) {
     let input = document.querySelector('#_capacitor-camera-input') as HTMLInputElement;
 
     const cleanup = () => {
@@ -82,34 +82,33 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
     input.addEventListener('change', (_e: any) => {
       const file = input.files[0];
       let format = 'jpeg';
+
       if (file.type === 'image/png') {
         format = 'png';
-      }
-      if (file.type === 'image/gif') {
+      } else if (file.type === 'image/gif') {
         format = 'gif';
       }
 
-      const reader = new FileReader();
-      reader.addEventListener('load', () => {
-        if (options.resultType === CameraResultType.DataUrl) {
-          resolve({
-            dataUrl: reader.result,
-            format
-          } as CameraPhoto);
-        } else if (options.resultType === CameraResultType.Base64) {
-          const b64 = (reader.result as string).split(',')[1];
-          resolve({
-            base64String: b64,
-            format
-          } as CameraPhoto);
-        } else {
-          reject('Unsupported result type for this platform');
-        }
+      if (options.resultType === CameraResultType.DataUrl || options.resultType === CameraResultType.Base64) {
+        const reader = new FileReader();
 
-        cleanup();
-      });
+        reader.addEventListener('load', () => {
+          if (options.resultType === CameraResultType.DataUrl) {
+            resolve({
+              dataUrl: reader.result,
+              format
+            } as CameraPhoto);
+          } else if (options.resultType === CameraResultType.Base64) {
+            const b64 = (reader.result as string).split(',')[1];
+            resolve({
+              base64String: b64,
+              format
+            } as CameraPhoto);
+          }
+
+          cleanup();
+        });
 
-      if (options.resultType === CameraResultType.DataUrl || options.resultType === CameraResultType.Base64) {
         reader.readAsDataURL(file);
       } else {
         resolve({

From 475fa8f54b5a58b9277c4e2ac81cc717ee8f0365 Mon Sep 17 00:00:00 2001
From: jcesarmobile <jcesarmobile@gmail.com>
Date: Tue, 7 Jul 2020 16:29:27 +0200
Subject: [PATCH 11/12] update CameraDirection information

---
 core/src/core-plugin-definitions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/core-plugin-definitions.ts b/core/src/core-plugin-definitions.ts
index 76cb9a16c6..a2db7b8b92 100644
--- a/core/src/core-plugin-definitions.ts
+++ b/core/src/core-plugin-definitions.ts
@@ -334,7 +334,7 @@ export interface CameraOptions {
    */
   source?: CameraSource;
   /**
-   * iOS only: The default camera direction. By default the rear camera.
+   * iOS and Web only: The camera direction.
    * Default: CameraDirection.Rear
    */
   direction?: CameraDirection;

From d664bce10033f17af30320ff9c696be9578aae89 Mon Sep 17 00:00:00 2001
From: Daniel Imhoff <dwieeb@gmail.com>
Date: Tue, 7 Jul 2020 10:32:34 -0700
Subject: [PATCH 12/12] swap default

---
 core/src/core-plugin-definitions.ts  | 7 +++++--
 core/src/web/camera.ts               | 6 +++---
 example/src/pages/camera/camera.html | 2 +-
 example/src/pages/camera/camera.ts   | 6 +++---
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/core/src/core-plugin-definitions.ts b/core/src/core-plugin-definitions.ts
index a2db7b8b92..24fc68b192 100644
--- a/core/src/core-plugin-definitions.ts
+++ b/core/src/core-plugin-definitions.ts
@@ -345,8 +345,11 @@ export interface CameraOptions {
   presentationStyle?: 'fullscreen' | 'popover';
 
   /**
-   * Web only: whether to use the PWA Element experience or file input. The default
-   * is to use file input experience. Learn more about PWA Elements: https://capacitorjs.com/docs/pwa-elements
+   * 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/pwa-elements
    */
   webUseInput?: boolean;
 
diff --git a/core/src/web/camera.ts b/core/src/web/camera.ts
index 0e73e38cde..9412c64850 100644
--- a/core/src/web/camera.ts
+++ b/core/src/web/camera.ts
@@ -19,7 +19,9 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
 
   async getPhoto(options: CameraOptions): Promise<CameraPhoto> {
     return new Promise<CameraPhoto>(async (resolve, reject) => {
-      if (options.webUseInput === false && options.source === CameraSource.Camera) {
+      if (options.webUseInput) {
+        this.fileInputExperience(options, resolve);
+      } else {
         if (customElements.get('pwa-camera-modal')) {
           const cameraModal: any = document.createElement('pwa-camera-modal');
           document.body.appendChild(cameraModal);
@@ -48,8 +50,6 @@ export class CameraPluginWeb extends WebPlugin implements CameraPlugin {
           console.error(`Unable to load PWA Element 'pwa-camera-modal'. See the docs: https://capacitorjs.com/docs/pwa-elements.`);
           this.fileInputExperience(options, resolve);
         }
-      } else {
-        this.fileInputExperience(options, resolve);
       }
     });
   }
diff --git a/example/src/pages/camera/camera.html b/example/src/pages/camera/camera.html
index 539a7792a7..d55138ad4b 100644
--- a/example/src/pages/camera/camera.html
+++ b/example/src/pages/camera/camera.html
@@ -15,10 +15,10 @@
 
 <ion-content padding>
   <img [src]="image" />
-  <button (click)="getPhoto()" ion-button color="primary">Prompt</button>
   <button (click)="getPhotoPWAElements()" ion-button color="primary">Prompt (PWA Elements)</button>
   <button (click)="getPhotoFront()" ion-button color="primary">From Camera (front facing)</button>
   <button (click)="takePicture()" ion-button color="primary">From Camera</button>
+  <button (click)="getFileInput()" ion-button color="primary">File Input</button>
   <button (click)="getFromPhotos()" ion-button color="primary">From Photos</button>
   <button (click)="getBase64()" ion-button color="primary">Prompt (b64)</button>
   <button (click)="takePictureScaled()" ion-button color="primary">Scaled</button>
diff --git a/example/src/pages/camera/camera.ts b/example/src/pages/camera/camera.ts
index 07c0712265..cb9b8c99eb 100644
--- a/example/src/pages/camera/camera.ts
+++ b/example/src/pages/camera/camera.ts
@@ -36,11 +36,12 @@ export class CameraPage {
     console.log('ionViewDidLoad CameraPage');
   }
 
-  async getPhoto() {
+  async getFileInput() {
     const image = await Plugins.Camera.getPhoto({
       quality: 90,
       allowEditing: true,
-      resultType: CameraResultType.DataUrl
+      resultType: CameraResultType.DataUrl,
+      webUseInput: true
     })
     console.log('Got image back', image.path, image.webPath, image.format, image.exif);
     this.image = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
@@ -72,7 +73,6 @@ export class CameraPage {
       quality: 90,
       allowEditing: true,
       resultType: CameraResultType.DataUrl,
-      webUseInput: false,
       source: CameraSource.Camera
     })
     console.log('Got image back', image.path, image.webPath, image.format, image.exif);