Download .csv File with angular 2 - Ionic 2

Question

I have an Ionic 2 app, and I need to download sample.csv file from server. I already have the url that I need to do the request:

 let url = 'http://example.com/download/sample.csv';

I want to know how to do this. I tried with ionic2 FileTransfer:

 importleads(){
     const fileTransfer: TransferObject = this.transfer.create();
     let url = 'http://example.com/download/sample.csv';
     fileTransfer.download(url, this.file.dataDirectory + 'Import_Leads_Sample.csv').then((entry) => {
        if(entry) {
           console.log('download complete: ' + entry.toURL());
           let alert = this.alertCtrl.create({
           title: 'Lead Downloaded Successfully',
           buttons: [{
                     text: 'Ok',
                    }]
           });
           alert.present();
        }
        else{
            let alert = this.alertCtrl.create({
            title: 'No File to download',
            buttons: [{
                       text: 'Ok',
                     }] 
            });
            alert.present();
        }
     });
}

<button ion-button (click)="importleads()">Test File Download</button>

I have generated the android-debug.apk file and installed it in Samsung phone. I am getting alert message as Lead Downloaded Successfully but no file gets downloaded in the device. I searched entire phone disk but no file found.

If I put this url in browser, it starts to download, but not with FileTransfer.

Answer 1

Instead of using this.file.dataDirectory + file_name.csv for your file path modify your code as:

First add this in your constructor function:

to make sure you are using you are using correct file path as per platform assuming you might use it on ios as well

  storageDirectory: string = '';
  // make sure this is on a device, not an emulation (e.g. chrome tools device mode)
  if(!this.platform.is('cordova')) {
    return false;
  }

  if (this.platform.is('ios')) {
    this.storageDirectory = cordova.file.documentsDirectory;
  }
  else if(this.platform.is('android')) {
    this.storageDirectory = cordova.file.dataDirectory;
  }
  else {
    // exit otherwise, but you could add further types here e.g. Windows
    return false;
  }

Now in you code:

importleads()
{
    const fileTransfer: TransferObject = this.transfer.create();
    let url = 'http://example.com/download/sample.csv';
    fileTransfer.download(url, this.storageDirectory  + 'Import_Leads_Sample.csv').then((entry) => {
        if (entry) {
            console.log('download complete: ' + entry.toURL());
            let alert = this.alertCtrl.create({
                title: 'Lead Downloaded Successfully',
                buttons: [{
                    text: 'Ok',
                }]
            });
            alert.present();
        }
        else {
            let alert = this.alertCtrl.create({
                title: 'No File to download',
                buttons: [{
                    text: 'Ok',
                }]
            });
            alert.present();
        }
    });
}

Notice the difference in your file path where I have made a change. This code snippet is taken from dsgriffin ionic file tranfer repo from file