Ionic is open source framework. Most popular cross platform mobile app framework. That helpful to develop or build hybrid mobile apps fastly and easily. It will save lot of time and money for investment. 

In 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 prepare before starting this article. 

Once installed Node.js we can able to install other tools on terminal or command line. Run this following commands step by step. 

npm install -g ionic cordova  

Installation is once finished let’s start creating a ionic 3 app. 

Create Ionic 3 app: – 

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

Start a new Ionic project using ionic start command: 

ionic start myApp 

This command will take a few minute because its install all dependencies and modules to a project. 

Now change location to a myApp 

cd myApp 

Once changed a location myApp, Add android platform to our app. 

ionic cordova platform add android 

ionic cordova platform add browser(For Browser) 

Now run a project using following command. 

ionic serve (For Browser) 

ionic cordova run android (For Device 

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

Now let’s start, 

Introduction:

File Transfer:

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

File: 

The File Plugin using we can achieve following, 

Get available free space, Check directory is available or not, Create a directory. Remove a directory, Move a directory one place to another place, Copy a directory, List a available directory, Set pre-defined path, Check 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 etc..  

Install and configure File Transfer and File: 

Follow below mentioned steps. 

Step1:

Now we have ionic app so we can move forward. First install a File Transfer plugin to our ionic app using 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 

Step2: 

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

app.module.ts file

//here importing two lines for access file transfer and file transfer object and file plugin to our app. 

import { FileTransfer, FileTransferObject } from ‘@ionic-native/file-transfer’; 

import { File } from ‘@ionic-native/file’; 

@NgModule({ 

   providers: [
//here added class to our provider service block
 

   FileTransfer, 

   FileTransferObject, 

   File 

           ] 

}) 

export class AppModule { } 

Step3: 

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

app.ts file
import { FileTransfer,  FileTransferObject } from ‘@ionic-native/file-transfer’;
 

import { File } from ‘@ionic-native/file’; 

//here creating object to access file transfer object. 

private fileTransfer: FileTransferObject; 

//here injecting  file transfer  and file class to our component part as object 

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

public download(fileName,filePath) { 

//here encoding path as encodeURI() format. 

let url = encodeURI(filePath);   

//here initializing object. 

      this.fileTransfer = this.transfer.create();   

// 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. 

       fileTransfer.download(url, this.file.externalRootDirectory + fileName, true).then((entry) => { 

//here logging our success downloaded file path in mobile. 

console.log(‘download completed: ‘ + entry.toURL());  

        }, (error) => { 

//here logging our error its easier to find out what type of error occured. 

console.log(‘download failed: ‘ + error);       

        }); 

 } 

IfileTransfer.download methodI 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).) 

Step4:
Calling the download method and passing the arguments. 

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

For more further details visit official website 

File Transfer: 

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

File: 

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

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

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