0

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.

Mistalis
  • 17,793
  • 13
  • 73
  • 97
Akash M
  • 488
  • 3
  • 6
  • 18
  • have you followed exactly as mentioned here https://ionicframework.com/docs/native/transfer/ i.e. downloading the plugin, checking for proper permissions in your manifest file in case you are using it on Marshmallow version and printing the file path i.e. `this.file.dataDirectory` – warl0ck May 02 '17 at 11:29
  • Yes I have followed all the steps. Where can i find this manifest file ? Yes I am using Marshmallow. – Akash M May 02 '17 at 11:44
  • in ionic app there will be `config.xml` file you might have to add it there or you can use plugin from here https://www.npmjs.com/package/cordova-plugin-android-permissions – warl0ck May 02 '17 at 11:46
  • please check the alternate possible answer which is taken from the working ionic file transfer example – warl0ck May 02 '17 at 11:51

1 Answers1

0

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

warl0ck
  • 3,356
  • 4
  • 27
  • 57
  • I tried out with this now, but no luck. The storage file is returning is `this.storageDirectory` path as `file:///data/user/0/com.ionicframework.myapp8211/files/` – Akash M May 02 '17 at 14:06
  • after using downloading it have you checked in the folder, since this seems to be the valid file storage location, just go to the folder of `com.ionicframework.myapp8211/` you should see your file – warl0ck May 03 '17 at 05:36
  • check [here](https://github.com/apache/cordova-plugin-file#where-to-store-files) for details of how you can store file in your system as specified by the plugin, according to this you should find your file in your application's folder, if you cant see your app's folder might wanna use different file manager like es file explorer or solid explorer – warl0ck May 03 '17 at 05:39
  • @AkashM did you found your downloaded file ? – warl0ck May 04 '17 at 05:45
  • No, I tested it on developer browser but no luck. When I run it on chrome developer browser Below is the error message I am getting when I click on the Test File Download : `XMLHttpRequest cannot load http://example.com/download/sample.csv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.` – Akash M May 04 '17 at 15:35
  • As I said it won't work on browser you will have to use the app on your mobile phone . – warl0ck May 05 '17 at 04:40
  • Yes I tried it on the mobile but no file downloaded. To check whether any errors are present I tested it on the chrome developer browser and the error its giving is pasted in my previous comment. – Akash M May 05 '17 at 07:47
  • Aah you must be hosting your app on same IP address, it's a simple case of `cors` you will have to add headers or modify your server settings accordingly – warl0ck May 05 '17 at 10:50
  • Okay let me check this out. – Akash M May 10 '17 at 05:53