1

Using Cordova File Transfer Plugin With Ionic Framework

We can use Cordova File Transfer plugin allows you to upload and download files.

Download ngCordova archive

ngCordova is a collection of 63+ AngularJS extensions on top of the Cordova API that make it easy to build, test, and deploy Cordova mobile apps with AngularJS. While we can make this work without ngCordova, it’s much more practical this way. This collection also holds many Ionic Framework compatible plugins.

Download ngCordova zip file, here’s site link:

download

Unzip this archive, find a file name called: ng-cordova.min.js, it should be available at this location: ng-cordova-master\dist\.

Open your newly created project directory and copy ng-cordova.min.js to this location: IonicFileTransferDemo\www\js.

Now include this location to index.html located at IonicFileTransferDemo\www; add it above cordova.js file, like this:

Install Cordova File Transer and Whitelist Plugin

Next line will import and install necessary plugins into newly created project:

Development

At this point, you should have everything set up and ready, we can start working on our example.

Go to IonicFileTransferDemo project directory and find app.js, alter angular.module line and include ngCordova service, like this:

Open index.html file, add a controller to ion-content directive:

Initialize this controller in app.js file; don’t forget to inject $cordovaFileTransfer service, like this:

Now we need to initialize Whitelist plugin; add this meta tag to index.html HEAD content:

 

Methods

download(url, targetPath, options, trustHosts)

Downloads a file from server.

Param Type Detail
url String URL of the server to download the file
targetPath String Filesystem url representing the file on the device
options Object Optional parameters, currently only supports headers
trustAllHosts Boolean If set to true – accepts all security certificates
Returns Type Detail
success Object Returns success object with file path and more info
progress Object Returns download progress Object

 

upload(server, targetPath, options, trustAllHosts)

Sends a file to a server.

Param Type Detail
server String URL of the server to receive the file
targetPath String Filesystem url representing the file on the device
options Object Optional parameters
trustAllHosts Boolean If set to true – accepts all security certificates
Returns Type Detail
success Object Returns success object with file path and more info
progress Object Returns download progress Object

The options parameter is an Object with the following key possibilities:

Property Type Detail
encodeURI Boolean Encode the server url using encodeURI. Default is set to true
timeout Integer Timeout of the query. In millisecond

All other properties will be passed to the cordova FileTransfer object. All parameters can be found in the Cordova FileTransfer documentation.

Download

Next function can be used to download a file from a remote location:

 

Upload

While this next function will upload it to a device/remote location: Previously I had written a post regarding how to Accessing Image Gallery using Ionic and ngCordova plugin in an Ionic Framework application.  This previous post was continue to selected image upload to server.

Output:

 file upload ngCordova

 

Prakash S

Prakash S

I would like to introduce myself as a Software professional opting for the career in software industry. I'm Prakash S, a MCA graduate and trained as industry level practice for Software technology. Basically I am a PHP Developer but now days exploring more in HTML5, CSS, AngularJS and jQuery libraries.


  • Johnson Smith

    I’m unable to upload a photo to my server using Cordova’s file and
    file-transfer plugin through ionic. I’m able to successfully capture the
    photo I need, and make a valid request to the server endpoint that’s
    expecting my image along with other data, but when I make the request,
    my payload is sent is as empty, which causes the server to respond with an “error code 3” from the cordova plugin. $cordovaFileTransfer.upload error code 3 on iOS but works on Android