HELP! Ionic 4

I have got the native camera all setup or so I thought…
When trying to navigate to the page to take and upload and image, it’s not directing to the page and also within the console I can see the following error;

Here;s the full code for it.

import { Component, OnInit } from '@angular/core';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx';
import { File } from '@ionic-native/file';
import { HttpClient } from '@angular/common/http';
import { Toast } from '@ionic-native/toast/ngx';
import { Service } from '../../../settings/Laravel';
import { AuthService } from '../../services/auth.Service';
import { LoadingController, NavController } from '@ionic/angular';

  selector: 'app-property',
  templateUrl: './',
  styleUrls: ['./'],

export class PropertyPage implements OnInit {

  captureDataUrl: string;
  imageURI: any;
  user: any;
  imageFileName: any;
  loading: boolean = false;

    public camera: Camera,
    public http: HttpClient,
    private transfer: FileTransfer, 
    private file: File,
    public toast: Toast,
    public loadingCtrl: LoadingController,
    public navCtrl: NavController,
    public auth: AuthService,
    { }
  ngOnInit() {

  takePhoto() {
    const cameraOptions: CameraOptions = {
      quality: 50,
    }; => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      this.captureDataUrl = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
      // Handle error

  uploadFile() {
    const fileTransfer: FileTransferObject = this.transfer.create();

    let options: FileUploadOptions = {
      fileKey: 'ionicfile',
      fileName: 'ionicfile',
      chunkedMode: false,
      mimeType: "image/jpeg",
      headers: {
        authorization: this.auth.user

    fileTransfer.upload(this.captureDataUrl, `${Service.apiUrl}/users/upload/` +, options) 
      .then((data) => {
        console.log(data + " Uploaded Successfully");
        this.imageFileName = `${Service.apiUrl}` + "/images/ionicfile.jpg"
        this.presentToast("Great! We will update your records and notify your Landlord");

      }, (err) => {
        this.presentToast('There was an error uploading your file. Please try again!');

  presentToast(msg: string) {, '5000', 'center').subscribe(
        toast => {


Any help would be greatly appreciated. Thanks Lee

Are you running this on a device or in a browser?

Seems like it is the 4th parameter to your constructor – the File parameter. I wonder if you shouldn’t add ‘/ngx’ to the end of the import for File.

On the other hand, it seems like you aren’t actually using that module in the code. A quick search for ‘file.’ found no match in what you posted…


So If I remove the /ngx from the file import and also I’ve been using both the device and browser.

I removed the /ngx and also removed all code from the template and the Angular file to bar bones and still the error persists

I think @VictorNorman meant to add /ngx to this import

1 Like

Ah I see, but File isn’t be used, anyhow I managed to fix that, but no a new error.

Which I’m guessing is some import and something I have missed off.

Yes, looks like you need to declare FileTransfer in your provider’s array in app.module.ts. And ensure the import at the top of that file also ends in /ngx

Just added this on the app.module but stil the same error :frowning:

Thanks chaps, I just need to import to add.module and its working now.