In Ionic 3 I have been using the native File and FileTransfer plugin to download a file via URL. Now migrating to Ionic 4 I am trying to do the same. However I get the following error:
Native: tried calling File.dataDirectory, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
My understanding Native file is supported in Browser? For me it works fine in Ionic 3.
As per documents I have done the following:
$ ionic cordova plugin add cordova-plugin-file
$ npm install --save @ionic-native/file@beta
$ ionic cordova plugin add cordova-plugin-file-transfer
$ npm install --save @ionic-native/file-transfer@beta
I import as follows:
import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer/ngx';
import { File } from '@ionic-native/file/ngx';
Download function as follows
download(url: string, fileName: string) {
this.fileTransfer.download(url, this.file.dataDirectory + fileName).then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
// handle error
});
}
After getting this error I also added:
ionic cordova platform add browser
But I still get the error. Are there any other steps I need to do? Many thanks.
My package.json is below:
{
"name": "app",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~6.1.1",
"@angular/core": "~6.1.1",
"@angular/forms": "~6.1.1",
"@angular/http": "~6.1.1",
"@angular/platform-browser": "~6.1.1",
"@angular/platform-browser-dynamic": "~6.1.1",
"@angular/router": "~6.1.1",
"@auth0/angular-jwt": "^2.0.0",
"@ionic-native/camera": "^5.0.0-beta.20",
"@ionic-native/core": "^5.0.0-beta.21",
"@ionic-native/file": "^5.0.0-beta.20",
"@ionic-native/file-transfer": "^5.0.0-beta.20",
"@ionic-native/in-app-browser": "^5.0.0-beta.20",
"@ionic-native/splash-screen": "^5.0.0-beta.20",
"@ionic-native/sqlite": "^4.12.2",
"@ionic-native/status-bar": "^5.0.0-beta.20",
"@ionic/angular": "^4.0.0-beta.13",
"@ionic/storage": "^2.2.0",
"@types/lodash": "^4.14.116",
"@types/mime-types": "^2.1.0",
"@types/zxcvbn": "^4.4.0",
"angular-password-strength-meter": "0.0.4",
"cordova-browser": "5.0.4",
"cordova-plugin-camera": "^4.0.3",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-inappbrowser": "^3.0.0",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^2.2.0",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "^2.4.0",
"core-js": "^2.5.3",
"mime": "^2.3.1",
"ngx-autosize": "^1.2.0",
"ngx-order-pipe": "^2.0.1",
"ngx-quill-editor": "^2.2.2",
"rxjs": "6.2.2",
"rxjs-compat": "6.2.2",
"zone.js": "^0.8.26",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"@angular-devkit/architect": "0.9.0-beta.3",
"@angular-devkit/build-angular": "0.9.0-beta.3",
"@angular-devkit/core": "0.9.0-beta.3",
"@angular-devkit/schematics": "0.9.0-beta.3",
"@angular/cli": "~6.1.1",
"@angular/compiler": "~6.1.1",
"@angular/compiler-cli": "~6.1.1",
"@angular/language-service": "~6.1.1",
"@ionic/ng-toolkit": "^1.0.9",
"@ionic/schematics-angular": "^1.0.7",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.9.2",
"angular2-uuid": "^1.1.1",
"aws-sdk": "^2.314.0",
"blueimp-canvas-to-blob": "^3.14.0",
"codelyzer": "~4.4.2",
"dom-to-image": "^2.6.0",
"expr-eval": "^1.2.1",
"file-saver": "^1.3.8",
"ionic-angular": "^3.9.2",
"ionic-plugin-keyboard": "~2.2.1",
"ionicons": "3.0.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"lodash": "^4.17.11",
"mime-types": "^2.1.18",
"moment": "^2.22.1",
"ng-elastic": "^1.0.0-beta.5",
"ng2-img-max": "^2.1.15",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~2.9.2",
"uuid": "^3.2.1",
"xlsx": "^0.13.0"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-sqlite-storage": {},
"cordova-plugin-file": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-camera": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"browser"
]
}
}