iOnic 3 Image Upload Using a form

upload.html

<ion-content padding>
  <div class="wrapper">
    <img class="logo" src="assets/images/head.svg"/>
    <h1>submit a meme</h1>
    <form (ngSubmit)="uploadFile()" novalidate [formGroup]="formControl">
      <ion-grid class="Login-form">
        <ion-list>
          <ion-row>
            <ion-item>
              <ion-input type="text" placeholder="Full Name" formControlName="fullname"></ion-input>
            </ion-item>
          </ion-row>
          <ion-row>
            <ion-item>
              <ion-input type="email" placeholder="E-Mail" formControlName="email"></ion-input>
            </ion-item>
          </ion-row>
          <ion-row>
            <ion-item>
              <ion-input type="phone" placeholder="Phone Number" formControlName="phone"></ion-input>
            </ion-item>
          </ion-row>
          <ion-row>
            <ion-item>
              <a ion-button color="secondary" (click)="getImage()">Get Image</a>
              <img src="{{imageFileName}}"/>
            </ion-item>
          </ion-row>
          <ion-row>
              <ion-item>
                <ion-textarea placeholder="Message" formControlName="message"></ion-textarea>
              </ion-item>
          </ion-row>
        <ion-row>
          <ion-col class="center-content">
            <button type="submit" ion-button class="login-btn" block>SEND</button>
          </ion-col>
        </ion-row>
        </ion-list>
      </ion-grid>
    </form>
  </div>
</ion-content>

upload.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, LoadingController, ToastController} from 'ionic-angular';
import { FormControl, FormGroup, Validators } from '@angular/forms';

import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { Camera, CameraOptions } from '@ionic-native/camera';

import { Alert } from '../../providers/alert/alert';
/**
 * Generated class for the SubmitJokePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

interface formValidationErrors {
  required?: boolean,
  minlength?: {
    actualLength?: number,
    requiredLength?: number
  }
  maxlength?: {
    actualLength?: number,
    requiredLength?: number
  }
}
@IonicPage()
@Component({
  selector: 'page-submit-joke',
  templateUrl: 'submit-joke.html',
})
export class SubmitJokePage {
  
  public formControl: FormGroup;
  public imageURI:any;
  public imageFileName:any;

  constructor(public navCtrl: NavController,
    private transfer: FileTransfer,
    private camera: Camera,
    public loadingCtrl: LoadingController,
    public toastCtrl: ToastController,
    private _alert: Alert,
  ) {
    this.formControl = new FormGroup({
      fullname: new FormControl('', [Validators.required]),
      email: new FormControl('', [Validators.required]),
      phone: new FormControl('', [Validators.pattern('[0-9]*'), Validators.minLength(8), Validators.maxLength(8)]),
      subject: new FormControl('', [Validators.required]),
      message: new FormControl('', [Validators.required])
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SubmitJokePage');
  }

  public getImage() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
    }
  
    this.camera.getPicture(options).then((imageData) => {
      this.imageURI = imageData;
    }, (err) => {
      console.log(err);
      this.presentToast(err);
    });
  }  

  public uploadFile() {
    if (!this.formControl.valid) {
      let name = this.formControl.get('fullname').errors ? this.formControl.get('fullname').errors as formValidationErrors : {};
      let email = this.formControl.get('email').errors ? this.formControl.get('email').errors as formValidationErrors : {};
      let message = this.formControl.get('message').errors ? this.formControl.get('message').errors as formValidationErrors : {};
      let phone = this.formControl.get('phone').errors ? this.formControl.get('phone').errors as formValidationErrors : {};
      
      if (name.required || email.required || message.required || phone.required) {
        this._alert.showError("Please fill in all the fields!");
      }
      if (phone.minlength || phone.minlength) {
        this._alert.showError(`Phone Number must be of minimum ${phone.minlength.requiredLength} characters`)
      }else{
        let name: string = this.formControl.get('fullname').value;
        let email: string = this.formControl.get('email').value;
        let phone: string = this.formControl.get('phone').value;
        let message: string = this.formControl.get('message').value;
        let loader = this.loadingCtrl.create({
          content: "Uploading..."
        });
        loader.present();
        const fileTransfer: FileTransferObject = this.transfer.create();
        var options: FileUploadOptions;
    
        options = {
          fileKey: 'attachment',
          fileName: 'image.png',
          mimeType: 'image/png',
          chunkedMode: false,
          params: {
            name: name,
            email: email,
            phone: phone,
            message: message
          }
        }
        fileTransfer.upload(this.imageURI, 'http://192.168.0.104:8000/api/public/uploadImage', options)
          .then((data) => {
          console.log(JSON.stringify(data));
          loader.dismiss();
          this.formControl.reset();
          this.presentToast("Successfully received!");
        }, (err) => {
          console.log(err);
          loader.dismiss();
          if(err.code == 1){
            this.presentToast("No Image Attached");
          }
        });
      }
      return;
    }
    
  }

  presentToast(msg) {
    let toast = this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom'
    });
  
    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });
  
    toast.present();
  }
}