Download file from server into Ionic2 App

Question

I am in need to implement a feature in my Ionic2 app where users can download a specific Video file into Ionic2 app.

Upon checking the Ionic Native section, I found that the following plugins available :

• File
• File Chooser
• File Opener
• File Path

But could not find anything such as ' cordova-plugin-file-transfer ' where a specific method exists as DOWNLOAD .

What could be the way out ?

Please suggest.

Answer 1

You should use " Transfer " plugin for downloading a file in ionic2

You can install plugin by this command

ionic plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/transfer

and then import it

import { Transfer, FileUploadOptions, TransferObject } from '@ionic-native/transfer';

set constructor

constructor(private transfer: Transfer, private file: File) { }

Then use this function to download file using url

download() {
const url = 'http://www.example.com/file.pdf';
fileTransfer.download(url, this.file.dataDirectory + 
'file.pdf').then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
// handle error
});
}

Hope it help you You can also upload a file using this Plugin

Answer 2

You can use Transfer native plugin for that.

This plugin allows you to upload and download files.

Git Repo.

 ionic plugin add cordova-plugin-file-transfer
 npm install --save @ionic-native/transfer

Answer 3

First of all. transfer plugin that everyone is referring to here is deprecated. You should never use deprecated plugin if there's alternative.

Gladly, Ionic provides you alternative Native Http plugin

HTTP service has uploadFile and downloadFile methods that you can use to hanlde uploading/downloading of files.

downloadFile method has 4 parameters: url , body , headers , filepath .

In most simple case calling of this method will be like this:

this.nativeHttp.downloadFile(urlWithFile, {}, {}, fileNameToSave)

It returns promise that resolves with FileEntry instance which you can use to read the from file system in future (if you need)

fileNameToSave you can get from File class. Basically, it can be this.file.tempDirectory + fileName or you can pick another directories from file like this.file.dataDirectory + fileName

Again, you should NEVER use deprecated plugins/packages. They are called deprecated for a reason

PS if you want then to open downloaded file you can do it with @ionic-native/file-opener plugin like this:

this.file.resolveLocalFilesystemUrl(fileEntry.toURL())
         .then((entry: FileEntry) => {  
             entry.file(meta => {
                 this.fileOpener.open(fileEntry.toURL(), meta.type)
             }, error => {});
         })

Answer 4

It should be like below

1. Add imports

   import { Transfer, TransferObject } from '@ionic-native/transfer';

2. Constructor

   constructor(private transfer: Transfer) { }

3. Create a instance of fileTransfer

   const fileTransfer: TransferObject = this.transfer.create();

4. final code

   fileTransfer.download("your URL", "you URLmime tyoe").then((entry) => {

   }, (error) => { // handle error });

that's all.

Thanks

Answer 5

你可以简单地使用下载插件

 ionic cordova plugin add cordova-plugin-file-transfer