Type error when ionic serving with FilePicker-Phonegap-iOS-Plugin in ionic 3

Question

i'm developping an Ionic3 App and wants to allow user to upload files from their devices. I’ve got an issue with cordova/phonegap file picker plugin. I followed the instructions here :

https://github.com/jcesarmobile/FilePicker-Phonegap-iOS-Plugin

But even using the simplest code which is given in Ionic documentation doesn't work :

import { IOSFilePicker } from '@ionic-native/file-picker/ngx';

constructor(private filePicker: IOSFilePicker) { }

this.filePicker.pickFile()
  .then(uri => console.log(uri))
  .catch(err => console.log('Error', err));

I keep on getting this error :

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at IOSFilePicker.pickFile (index.js:27)

The plugin has been correctly installed in app.module.ts with the correct ngx path.

Here some additional info about versions :

• ionic framework : 3.9.2
• Ionic App Scripts: 3.1.8
• Angular Core: 6.0.3
• Angular Compiler CLI: 6.0.3
• Node: 8.11.3
• @ionic-native/file-picker: 5.4.0
• rxjs: 6.3.3
• typescript: 2.7.2

any idea ?

Thx

Answer 1

Install plugin :

ionic cordova plugin add cordova-plugin-filepicker

npm install --save @ionic-native/file-picker@4

Add in in your app module

import { IOSFilePicker } from '@ionic-native/file-picker';


@NgModule({
..
   providers:[
      IOSFilePicker
   ]
})

Now use in your page component

import { IOSFilePicker } from '@ionic-native/file-picker';

class ... constructor(private filePicker: IOSFilePicker) { }

getFile(){

    this.filePicker.pickFile()
      .then(uri => console.log(uri))
      .catch(err => console.log('Error', err));

}

Ref. https://ionicframework.com/docs/v3/native/ios-file-picker/