Imagepicker for browser

ionic ionic-v3
#1

Is there no way to add image picker for ionic 4 in pwa app for browsers. It shows Cordova not available…Please help

#2

Hi, you can use <input type="file" /> .
It works for both in mobile and browser. Here is small example:
html:

   <ion-button (click)="uploadFile()"> Upload & Preview </ion-button>
 <img [src]="imageURL ? imageURL : 'assets/dummy-profile-pic.png'" class="rounded mx-auto d-block img-thumbnail" alt="HA">
            <input type="file" *ngIf="!imageURL" (change)="fileChanged($event)" accept="image/*" class="filebtn" #fileButton  />

ts:

imageURL: any;
 @ViewChild('fileButton', { static: false }) fileButton;
constructor() {...}
 uploadFile() {
    this.fileButton.nativeElement.click();
  }
  fileChanged(event) {
    const files = event.target.files;
    console.log(files);
    const reader = new FileReader();
    reader.onload = () => {
      this.imageURL = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  }
2 Likes
#3

thank you very much I have searched this code for hours good contribution

1 Like
#4

@FabianChuros Glad to hear this.