File upload - Ionic 3

file-upload.ts

import {Component} from '@angular/core';
import {
  ActionSheetController,
  AlertController,
  IonicPage,
  LoadingController,
  ModalController,
  NavParams,
  ToastController
} from 'ionic-angular';
import {Camera} from "@ionic-native/camera";
import {File, FileEntry} from "@ionic-native/file";
import {HttpClient} from "@angular/common/http";

@IonicPage()
@Component({
  selector: 'page-upload',
  templateUrl: 'upload.html',
})
export class UploadPage {

  userId: number = 123;
  baseUrl: string = 'http://example.com/';
  pageTitle: string = 'Loren ipsum';

  public loading;
  public myPhoto: any;

  constructor(public alertCtrl: AlertController,
              public toastCtrl: ToastController,
              public camera: Camera,
              public file: File,
              public loadingCtrl: LoadingController,
              public navParams: NavParams,
              public http: HttpClient,
              public modalCtrl: ModalController,
              public actionSheetCtrl: ActionSheetController) {
  }

  /**
   * Action called from my html
   */
  changeImage() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Change Image',
      buttons: [
        {
          text: 'From camera',
          handler: () => {
            this.fromCamera();
          }
        },
        {
          text: 'From Gallery',
          handler: () => {
            this.fromGallery();
          }
        },
        {
          text: 'Cancel'
        }
      ]
    });

    actionSheet.present();
  }

  private fromCamera() {
    this.camera.getPicture({
      quality: 50,
      targetWidth: 360,
      targetHeight: 360,
      correctOrientation: true,
      destinationType: this.camera.DestinationType.FILE_URI,
      sourceType: this.camera.PictureSourceType.CAMERA,
      mediaType: this.camera.MediaType.PICTURE,
      encodingType: this.camera.EncodingType.PNG,
      allowEdit: true
    }).then(imageData => {
      this.myPhoto = imageData;
      this.uploadPhoto(imageData);
    }, error => {
      console.log(JSON.stringify(error));
    });
  }

  private fromGallery(): void {
    this.camera.getPicture({
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: this.camera.DestinationType.FILE_URI,
      quality: 50,
      targetWidth: 360,
      targetHeight: 360,
      encodingType: this.camera.EncodingType.PNG,
      allowEdit: true
    }).then(imageData => {
      this.myPhoto = imageData;
      this.uploadPhoto(imageData);
    }, error => {
      console.log(JSON.stringify(error));
    });
  }

  private uploadPhoto(imageFileUri: any): void {
    this.showLoader('Uploading...');
    this.file.resolveLocalFilesystemUrl(imageFileUri)
      .then(entry => (<FileEntry>entry).file(file => this.readFile(file)))
      .catch(err => console.log(err));
  }

  private readFile(file: any) {
    const reader = new FileReader();
    console.log("reading file", file);
    reader.onloadend = () => {
      const formData = new FormData();
      const imgBlob = new Blob([reader.result], {type: file.type});
      formData.append('file', imgBlob, file.name);
      this.postData(formData);
    };
    reader.readAsArrayBuffer(file);
  }

  private postData(formData: FormData) {
    this.uploadImage(formData, this.userId).then((result: ApiResponse) => {
      this.dismissLoader();
      console.log('SUCCESS!')

    }, (err) => {
      this.dismissLoader();
      console.log(err);
    });
  }

  private uploadImage(formData, userId) {
    return new Promise((resolve, reject) => {
      this.post('users/upload', {
          id: userId
        }, formData
      ).subscribe(response => {
        resolve(response);
      }, err => {
        console.log(err);
        reject(err);
      });
    })
  }

  private post(endpoint: string, params: any = null, body: any = null) {
    return this.http.post<ApiResponse>(this.baseUrl + '/' + endpoint, body, {
      params: params
    });
  }

  private showLoader(message: string = 'loading') {
    this.loading = this.loadingCtrl.create({
      content: message
    });

    this.loading.present();
  }

  private dismissLoader() {
    if (this.loading) {
      this.loading.dismiss();
      this.loading = null;
    }
  }
}

export interface ApiResponse {
  success: string;
  object: any;
  message: string;
}