File Picker for IOS in Ionic

Ionic Framework ionic-v3
11

Here you go:

  <!-- The "Upload File" button in Android. The File Input element is jus hidden and the button calls the its .click() method -->
  <div *ngIf="!isIOS">
    <ion-row class="buttons-row">
      <ion-col class="buttons-col">
        <button ion-button full small icon-left class="top-button" (click)="fileInput.click()">
          <ion-icon name="folder"></ion-icon>
          Upload File
        </button>
      </ion-col>
    </ion-row>
    <div hidden><input type="file" id="fileUpload" #fileInput (change)="onFileFromStorageChosen($event)" /></div>
  </div>

  <!-- The "Upload File" button in iOS. The File Input element displayed as transparent and overlayed on top of the button -->
  <div *ngIf="isIOS">
    <ion-row class="buttons-row">
      <ion-col class="buttons-col">
        <input type="file" id="fileUpload" class="ios-file-input" (change)="onFileFromStorageChosen($event)" />
        <button ion-button full small icon-left class="top-button">
          <ion-icon name="folder"></ion-icon>
          Upload File
        </button>
      </ion-col>
    </ion-row>
  </div>

The .scss entries to make the File input element overlay the button.

  .buttons-row,
  .buttons-col {
    margin: 0;
    padding: 0;
  }

  /* This class here overlays the file input above the "Upload Document" button in iOS
  * Otherwise is not possible to trigger an File input element programmatically in iOS.
  */
  .ios-file-input{
    position: absolute;
    opacity: 0;
    z-index: 1;
    width: 100%;
    min-height: 155px;  /*Height must be a bit less than the height of the "Upload Document" button.*/
  }

And the typescript code to handle the inputs:

  public onFileFromStorageChosen(filesEvent: any) {
    this.processFileFromStorage(filesEvent);
  }

  public processFileFromStorage(event: any) {
    let file = event.target.files[0];
    //you can read various properties of the file (like mimetype and size) from the file object.
    console.log(file);
    readfile(file);
 }

//this one reads the contents of the file as a URL that contains its data:

  public readfile(file: any): void {
    let reader = new FileReader();
    reader.onload = (e) => {
      let dataUrl = reader.result;
      //and do something with the reader.
    };
    reader.readAsDataURL(file);
  }

It’s not my whole code, but an extracted portion to demonstrate how it works.
I hope this helps.

Regards