Input File Picker not working

Ionic Framework ionic-v3
1

I using the ion-input file, but it only work on desktop browser but on ios safari, nothing happen after i click it.

<ion-input id="fileInput" type="file" accept="image/*;capture=camera" (change)="changeListener($event)" #fileInput></ion-input>

since it not working, I try using button to trigger the file input, but nothing happen again on both desktop and ios safari

2

use chrome browser on mac for test

3

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
4

Ok, I found out the issue using the <ion-input type="file"></ion-input>, the <input> is wrap inside <ion-input> which block the click.

My solution is find the input with type ‘file’ to click.

let element: HTMLElement = document.querySelector('input[type="file"]') as HTMLElement;
element.click();
1 Like
5

Thank you so much. This is what im looking for my life

1 Like