Downloading files in Ionic using cordova-plugin-file-transfer

Ionic Framework ionic-v3
1

I have files (located inside the www/ folder) that I want the user to be able to download locally to their iOS/Android device.

I’m attempting to use the download method of the cordova-plugin-file-transfer, but as Ionic 2 is so new (and I’m v. new to Ionic/Angular in general) I’m unable to discover the correct paths etc.

I’ve managed to get it like so:

downloadFile(file) {
  this.platform.ready().then(() => {
    const fileTransfer = new FileTransfer();

    const pdfLocation = `${cordova.file.applicationDirectory}www/${file}`;
    const targetPath = cordova.file.documentsDirectory + "file.txt";

    fileTransfer.download(file, targetPath,
        (result) => {
            console.log("success");
        },
        (error) => {
            console.log("error");
        }
    );
  });
}

But I receive the “error” message each time - am I using the correct folders/approach for this?

2

Ionic2 has nothing to do with this problem. The same code is used no matter which Ionic is in the background.

Can you post an error content?

3

Ionic 2 is completely different syntax, so I mentioned it in case someone could spot a syntax issue.

I receive the console.log("error"); - when I try to display the error parameter which is mentioned in the docs I receive [Object object]. Debugging is via the command line option and I’m using an iOS emulator.

My thoughts are it’s a path issue - ${file} is pdf/example.pdf, so maybe it’s the applicationDirectory path?

4

Try this:

console.log(JSON.stringify(error))

or

console.log("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
5

I think is better like this:

console.log(JSON.stringify(error, null, 2))

This way he will get the json log properly indented and easier to read.

6

I recieve the following when logging the JSON inside the error() callback:

 {
  "code": 3,
  "source": "file:///Users/example/Library/Developer/CoreSimulator/Devices/A3ERG/data/Containers/Bundle/Application/S5D7DWTH4563/V2%20Test.app/www/pdf/example.pdf",
  "target": "file:///Users/example/Library/Developer/CoreSimulator/Devices/GDSTT3/data/Containers/Data/Application/0DSDET/Documents/list.pdf",
  "http_status": null,
  "body": null,
  "exception": null
}
7

That source has a double / in V2%20Test.app//www/pdf/example.pdf, maybe it is that.
For me second path is correct, idk a lot about downloading files but i think the error is in the path of source.

9

the /// part is fine, try opening a file in your local machine to your browser and you will see the same, that’s the file protocol that the browsers use to define that the file they are requesting is in the hard drive of the same PC, same goes for devices.

10

Can you see anything in the error output that gives a clue regarding the problem? Can’t find any mention of what error the number 3 represents, and if there’s a path error (bear in mind this is on an iOS simulator)

11

Reading somewhere that maybe is the version of the plugin, try downgrading to 0.4.8.
Cordova FileTransfer Download - always returns error 3

1 Like
12

Try logging the pdfLocation and targetPath just above the download call, also you could create an extra folder to avoid polluting the www folder, though the last part shouldn’t be an issue.

13

Installing the older version and changing a few require names now have the success function firing!

Thanks for all the help, luchillo17!

14

Try filling a issue so that this get fixed soon, if you don’t it won’t get fixed and more people will fall in unknown error hell.

15

Hello !
I’m new to ionic2 and I’ve got a problem loading the plugin, maybe you can help me ?
When I do this :

  upload() {
    this.platform.ready().then(() => {
        // Upload the file
        this.ft = new FileTransfer();

I’ve got an error like this :
Unhandled Promise rejection: FileTransfer is not defined ; Zone: angular ; Task: Promise.then ; Value:
ReferenceError: FileTransfer is not defined

Of I’ve added the plugin with “ionic plugin add cordova-plugin-file-transfer” but I think I missed something else…

I’m running ionic 2.0.0-beta.4, thanks for your help.

16

I created a simple example here: https://github.com/dsgriffin/Ionic-2-File-Transfer-Example, hope it helps

3 Likes
17

thanks a lot dsgriffin ! but it’s seems “webpack.config.js” is missing so I can’t build your app.

18

Oh - I think Ionic have removed Webpack from Ionic 2 in favour of Browersify. I updated to beta.4 and did the standard ‘ionic new … --ts’ initialisation to create the project.

19

hi!@dsgriffin!
I have a question,I’m copying your project(GitHub - dsgriffin/ionic-3-file-transfer-example: 📁 File Transfer in Ionic 3 using Ionic Native's File and Transfer modules),but

EXCEPTION: Uncaught (in promise): ReferenceError: FileTransfer is not defined
I don’t have the answer,it used ionic2+angularjs2.
Thank for your help!

20

hi @pengzong,

I have made a huge update to the project recently, make sure you’ve got the latest version!

I am now using Ionic Native with it, so to install it’s (so ionic plugin add cordova-plugin-file-transfer to install and const fileTransfer = new Transfer(); to use rather than new FileTransfer which I think you have?)

If you are still having problems after this, feel free to open an issue on Github with more details here: https://github.com/dsgriffin/ionic-2-file-transfer-example/issues

Thanks

1 Like
21

This is my code.I run in the Simulator,
> import { Transfer } from ‘ionic-native’;
> …
> export class ProductDownPage {
> constructor(public navCtrl: NavController, public params: NavParams, public http: Http, public toastCtrl: ToastController, public platform: Platform) {
> this.DownFile();
> }
> DownFile() {
> var image = “http://www.desktopwallpaperhd.net/thumbs/8/7/xiaogoukuanping-animal-tupian-85399.jpg”;
> this.platform.ready().then(() => {
> const fileTransfer = new Transfer();
> alert(JSON.stringify(fileTransfer));//alert:{"_objectInstance":{"_id":13,“onprogress”:null}}
> const imageLocation = $Download/1.jpg;
> alert(JSON.stringify(imageLocation));//alert:$Download/1.jpg
> fileTransfer.download(imageLocation, image).then((entry) => {
> let toast = this.toastCtrl.create({
> message: ‘文件下载成功!’,
> duration: 3000
> });
> toast.present();
> }, (error) => {
> //error:[Object,Object]
> let toast = this.toastCtrl.create({
> message: error,
> duration: 3000
> });
> toast.present();
> });
>
> });
> }
> }
Thank you very much!