CODEWITHSUNDEEP
ionic2
FrancescoMussi
FrancescoMussi

Reputation: 21610

Ionic 2 - How to setup file download?

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.

FileTransfer is not defined

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.

donwload complete

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!

Upvotes: 2

Views: 5552

Answers (3)

user1707813
user1707813

Reputation: 11

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

Upvotes: 0

camilo posada
camilo posada

Reputation: 341

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

Upvotes: 0

Suraj Rao
Suraj Rao

Reputation: 29614

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.

Upvotes: 1

Related Questions