CODEWITHSUNDEEP
ionic-frameworkionic3cordova-plugins
poimsm2
poimsm2

Reputation: 562

Erro when using File Transfer Plugin - Ionic 3

I am trying to upload images to my server using 

"cordova-plugin-file-transfer": "^1.7.1",

"@ionic-native/file-transfer": "^5.0.0",

component.ts

takePicture() {
  const options: CameraOptions = {
    quality: 50,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    targetWidth: 500,
    targetHeight: 500,
    saveToPhotoAlbum: false
  };

  this.camera.getPicture(options)
  .then((imageData) => this._img.uploadImage(imageData))
  .catch(err => console.log(err));
}

imageProvider.ts

import { FileTransfer, FileUploadOptions, FileTransferObject } from "@ionic-native/file-transfer/ngx";

   ...

uploadImage(img) {

  const url = `${this.apiURL}/images/upload`;

  // File for Upload
  var targetPath = img;

  var options: FileUploadOptions = {
    fileKey: 'image',
    chunkedMode: false,
    mimeType: 'multipart/form-data'
  };

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

  fileTransfer.upload(targetPath, url, options)
    .then(() => {
      console.log('good');
    }, (err) => {
      console.log('bad');
    })
}

I get this error in logcat Android Studio:

"TypeError: Cannot read property 'constructor' of undefined"

I have found that the code works well till it reaches this line

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

Upvotes: 3

Views: 2884

Answers (2)

Rathnakara S
Rathnakara S

Reputation: 1466

You are using the wrong native plugin version, For Ionic 3, you should use version 4.

ionic cordova plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/file-transfer@4

And also, don't append ngx at the end of the import.

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

For your future reference, If you are using Ionic 3, follow Ionic v3 docs instead of latest docs.

V3 docs: https://ionicframework.com/docs/v3/native/file-transfer/

Upvotes: 8

Martin Zeitler
Martin Zeitler

Reputation: 76569

you might be missing this line after the imports:

constructor(private transfer: FileTransfer, private file: File) { }

that's at least what the documentation suggests.

Upvotes: 0

Related Questions