Post
Ask Question

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

Overview

 
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 quickly 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 a native file transfer plugin integrated with the 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 an 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 for a project.
 
Now, change the location to the myApp.
cd myApp
 
Once you've changed the location to myApp, Add the 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 devices 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 a 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 a file, copy a file, get a 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 the 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.     });  
  25. } 
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 the native file transfer plugin and SharePoint Framework (SPFx) integrated with ionic 3. And I tested pdf files and Excel files only.
 
If you have any questions/issues about this article, please let me know in the comments.


Similar Articles