Ionic 2 - How to setup file download?

Question

THE SITUATION:

In my Ionic 2 app I have a Documents section where the user should be able to download files.

I am trying to setup the file transfer for Ionic 2.

THE CODE:

The documents component:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Transfer } from 'ionic-native';

declare var cordova: any;

@Component({
  selector: 'page-documents',
  templateUrl: 'documents.html'
})

export class DocumentsPage {

    constructor(public navCtrl: NavController) {}

    ionViewDidLoad() {

    }

    downloadFile()
    {
        const fileTransfer = new Transfer();
        let url = 'http://MY_URL.com/example.txt';

        fileTransfer.download(url, cordova.file.dataDirectory + 'example.txt').then((entry) => 
        {
            console.log('download complete: ' + entry.toURL());
        }, (error) => {
            // handle error
        });
    }
}

THE RESULTS:

In the browser:

I get the following error message: FileTransfer is not defined but probably because cordova doesn't work in the browser.

In the emulator:

In the emulator the download seems actually successfull. In the console I can see: donwload complete. but I didn't see starting any download and there is no trace of the downloaded file.

In the device:

In the device - after clicking for the download - nothing happens.. I don't see starting any download. In the file manager I don't see the file.

THE QUESTION:

How can I properly setup the file download for Ionic 2?

There is something wrong in the code?

Should I see the download starting in the device?

Thanks!

score 1 · Answer 1 · edited May 23 '17 at 10:30

1

Nothing seems to be wrong with the code. According to the file transfer docs,

Note: You will not see your documents using a file explorer on your device. Use adb:

adb shell 
run-as 
com.your.app 
cd files ls

cordova.file.dataDirectory saves in the app's private directory in root. You can read the file in the app if required from entry object. Check here for more

If you want it to be publically accessible to the user, check this question

If you want progress you could use the onProgress listener in the api.

onProgress((event)=>{//do something})

Hope this answers your questions.

edited May 23 '17 at 10:30

Community

1
1

answered Dec 16 '16 at 09:05

Suraj Rao

29,388
11
94
103

Thanks for the answer. So basically - if I understand properly - the code is correct and the following question should be: How to move the files from the private folder to a public one? – FrancescoMussi Dec 16 '16 at 11:52
And this by the way: https://github.com/apache/cordova-plugin-file should be the plugin I need? – FrancescoMussi Dec 16 '16 at 11:53
no ionic-native file transfer uses that cordova plugin. – Suraj Rao Dec 16 '16 at 11:57
mmh.. then there is a way - using ionic-nativ file transfer - to move the file to a public directory and make it accessible to the user? – FrancescoMussi Dec 16 '16 at 11:58
yes. use the same value for url as suggested by the stackoverflow link – Suraj Rao Dec 16 '16 at 11:59
Thanks Suraj. Just to be clear. In my code I should change cordova.file.dataDirectory with cordova.file.externalDataDirectory? That's correcT? – FrancescoMussi Dec 16 '16 at 12:02
Thanks dude! I will check it now and then mark as correct! – FrancescoMussi Dec 16 '16 at 12:11
I didn't manage to resolve the problem. Thanks anyway! I will probably make a more specific question about how to store it in a public location – FrancescoMussi Dec 16 '16 at 13:46

score 0 · Answer 2 · edited Jan 20 '17 at 22:53

0

I solved by changing fileTransfer.download(url, cordova.file.dataDirectory + 'filename')

to:

fileTransfer.download(url, cordova.file.externalRootDirectory +{{appName}} + 'filename')

See the WHERE TO STORAGE FILES in this link https://github.com/apache/cordova-plugin-file

edited Jan 20 '17 at 22:53

Blackcoat77

1,574
1
21
31

answered Jan 20 '17 at 21:16

camilo posada

331
3
8

what's `appName` here , can you please post the full code ? – Yasir Aug 15 '17 at 05:54

score 0 · Answer 3 · edited Jan 29 '18 at 13:26

There is a wrong in file transfer plugin need to install and need to create local access member in constructor is need to declare.

First step1 Install plugin fileTransfer from framework docs.

Second Step

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

//import { Transfer } from 'ionic-native';

declare var cordova: any;

@Component({
  selector: 'page-documents',
  templateUrl: 'documents.html'
})

export class DocumentsPage {
  constructor(public navCtrl: NavController,private transfer: FileTransfer, private file: File) {
  }
  ionViewDidLoad() {

  }

  downloadFile()
  {
      const fileTransfer: FileTransferObject = this.transfer.create();
      let url = 'http://MY_URL.com/example.txt';

      fileTransfer.download(url, cordova.file.dataDirectory + 'example.txt').then((entry) => 
      {
          console.log('download complete: ' + entry.toURL());
      }, (error) => {
          // handle error
      });
  }
}

Now it will be bit meaning full for compile engine to understand

Ionic 2 - How to setup file download?

3 Answers3