Reputation: 10631
I'm trying to implement a download function in Ionic 3 using File Transfer plugin file as per the explanation here, https://ionicframework.com/docs/native/file-transfer/. And here's the code,
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform, AlertController } from 'ionic-angular';
import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer';
@IonicPage()
@Component({
selector: 'page-details',
templateUrl: 'details.html',
providers: [FileTransfer, FileTransferObject],
})
export class DetailsPage {
storageDirectory: string = '';
constructor(public navCtrl: NavController, public navParams: NavParams, public platform: Platform, private transfer: FileTransfer, public alertCtrl: AlertController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad DetailsPage');
}
downloadImage(imageURL) {
this.platform.ready().then(() => {
imageURL = 'https://res.cloudinary.com/beinspired/image/upload/fl_attachment/v1514410469/l98gddyf9uoj7k9bljqi.jpg';
const fileTransfer: FileTransferObject = this.transfer.create();
const imageName = imageURL.split('/').pop();
fileTransfer.download(imageURL, this.storageDirectory + imageName).then((entry) => {
const alertSuccess = this.alertCtrl.create({
title: `Download Succeeded!`,
subTitle: `${imageURL} was successfully downloaded to: ${entry.toURL()}`,
buttons: ['Ok']
});
alertSuccess.present();
}, (error) => {
const alertFailure = this.alertCtrl.create({
title: `Download Failed!`,
subTitle: `${imageURL} was not successfully downloaded. Error code: ${error.code}`,
buttons: ['Ok']
});
alertFailure.present();
});
});
}
}
It is throwing error code 1. As per documentation, it is FILE_NOT_FOUND_ERR: 1
. But as you can see, there's a file present in the specified URL.
I tried with different URL, URL with encodeURI()
, but noting works. Any help on this would be greatly helpful and much appreciated.
Upvotes: 1
Views: 1618
Reputation: 10631
For whomever getting this error, I suggest to print the error in console and view it through chrome debugger. In my case it printed,
{
body: null
code: 1
exception: "/l98gddyf9uoj7k9bljqi.jpg (Read-only file system)"
http_status: 200
source: "https://res.cloudinary.com/beinspired/image/upload/v1514410469/l98gddyf9uoj7k9bljqi.jpg"
target: "l98gddyf9uoj7k9bljqi.jpg"
}
So, it is due to the reason that, I missed to initialise storageDirectory
, so it was trying to store it in the root folder of the filesystem which was only having read only access. So, after adding,
this.platform.ready().then(() => {
if(!this.platform.is('cordova')) {
return false;
}
if (this.platform.is('ios')) {
this.storageDirectory = this.file.externalDataDirectory;
}
else if(this.platform.is('android')) {
this.storageDirectory = this.file.externalDataDirectory;
}
else {
return false;
}
});
to the constructor, it’s all fine.
Upvotes: 2