How To Download A File Using File Transfer Plugin In Ionic 3

Ionic is an open source framework, and the most popular cross-platform mobile app framework. It is helpful for developing or building hybrid mobile apps quicklyy and easily. It will save a lot of time and money for investment.

This article demonstrates how to download a file in ionic 3 using native file transfer plugin integrated with SharePoint Framework. The following tools and requirements should be ready before starting this article.

Once you've installed Node.js we can install other tools on the terminal or command line. Run the following commands step by step.

npm install -g ionic cordova

Installation is finished, so let’s start creating an Ionic 3 app.

Create Ionic 3 app

Open your node.js terminal and open a specific location to create the Ionic 3 app.

Start a new Ionic project using ionic start command,

ionic start myApp

This command will take a few minutes because it installs all dependencies and modules to a project.

Now, change the location to the myApp.

cd myApp

Once you've changed the location to myApp, Add android platform to our app.

  • Ionic cordova platform -- add Android
  • Ionic cordova platform --  add browser

Now run a project using the following command.

ionic serve (For Browser)
ionic cordova run android (For Device)

Make sure you have to connected device and settings have been set.

Now let’s start.

Introduction

File Transfer           

The File Transfer plugin allows you to upload a file and download a file.

File

Using the File Plugin  we can achieve the following:

Get available free space, check if directory is available or not, create a directory, remove a directory, move a directory one place to another place, copy a directory, list an available directory, set a pre-defined path, check if a file is available or not, create a file, remove a file, write a file, read a file as text, read a file and return base64 data, read a file and return data as a binary format, read a file and return data as array buffer format, move file, copy file, get directory, get a file, and more. 

Install and configure File Transfer and File

Follow the below mentioned steps.

Step1

Now we have our Ionic app so we can move forward. First install a File Transfer plugin to our ionic app using the following steps.

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

Now install the file plugin to our ionic app using following steps.

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

Step 2

Now  file transfer plugin is already installed so we need to add File Transfer plugin to our app module file.

app.module.ts file

  1. //here importing two lines for access file transfer and file transfer object and file plugin to our app.  
  2. import {  
  3.     FileTransfer,  
  4.     FileTransferObject  
  5. } from '@ionic-native/file-transfer';  
  6. import {  
  7.     File  
  8. } from '@ionic-native/file';  
  9. @NgModule({  
  10.     providers: [  
  11.         //here added class to our provider service block  
  12.         FileTransfer,  
  13.         FileTransferObject,  
  14.         File  
  15.     ]  
  16. })  
  17. export class AppModule {} 

Step3

Now it’s time to integrate with component part in our app.

app.ts file

  1. import {  
  2.     FileTransfer,  
  3.     FileTransferObject  
  4. } from '@ionic-native/file-transfer';  
  5. import {  
  6.     File  
  7. } from '@ionic-native/file';  
  8. //here creating object to access file transfer object.  
  9. private fileTransfer: FileTransferObject;  
  10. //here injecting  file transfer  and file class to our component part as object  
  11. constructor(private transfer: FileTransfer, private file: File) {}  
  12. public download(fileName, filePath) {  
  13.     //here encoding path as encodeURI() format.  
  14.     let url = encodeURI(filePath);  
  15.     //here initializing object.  
  16.     this.fileTransfer = this.transfer.create();  
  17.     // here iam mentioned this line this.file.externalRootDirectory is a native pre-defined file path storage. You can change a file path whatever pre-defined method.  
  18.     fileTransfer.download(url, this.file.externalRootDirectory + fileName, true).then((entry) => {  
  19.         //here logging our success downloaded file path in mobile.  
  20.         console.log('download completed: ' + entry.toURL());  
  21.     }, (error) => {  
  22.         //here logging our error its easier to find out what type of error occured.  
  23.         console.log('download failed: ' + error);  
  24.     });  

 

In fileTransfer.download method, I am passing three arguments

  1. source location, (online file location url)
  2. target location, (path to save in mobile)
  3. trustAllHosts, (optional, defaults to false. If set to true, it accepts all security certificates.)
  4. Options,  (Not using now this method. currently only supports headers (such as Authorization (Basic Authentication), etc).)

Step 4

Calling the download method and passing the arguments:

  1. this.download("sample.pdf","https://abcd.sharepoint.com/samplesite/Shared Documents/sample.pdf");  

For further details visit the official website

File Transfer

https://ionicframework.com/docs/native/file-transfer/#FileTransferObject

File

https://ionicframework.com/docs/native/file/

Summary

In this article, I discussed how to download a file using native file transfer plugin and SharePoint Framework (SPFx) integrated with ionic 3. And I tested pdf file and Excel files only.

If you have any questions/issues about this article, please let me know in the comments.