The point of this article is to show you how to open a file using its default application. For example how to open a PDF file in a designated PDF reader, altogether skipping InAppBrowser plugin.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)
 

Preparation

 
Before we can do anything make sure you have the following:
 
  • Android Environment (or iOS if your working on a MacOS)
  • nodeJS
  • Ionic
  • Cordova
If you don’t have a preset Ionic + Android environment, find more information here: Ionic Framework | Installation Guide.
 

1. Update Ionic & Cordova

 
First thing first, update nodeJS to the latest version. Without it we wouldn’t be able to update correctly to latest Ionic and Cordova.
 
Next, update Ionic and Cordova, older versions may not work with this tutorial:
 
npm update -g cordova ionic
 

2. Create a New Project

 
ionic start IonicOpenFileDemo blank
cd IonicOpenFileDemo
 
Warning: Since some of you never worked with Ionic CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.
 
Because we’re working with Android, we need to add necessary files it to our project:
 
ionic platform add android
 
For MacOS users, do it like this:
 
ionic platform add ios
 

3. 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:
 
Official Site Docs Download Link
 
 
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: IonicOpenFileDemo\www\js.
 
Now include this location to index.html located at IonicOpenFileDemo\www; add it above cordova.js file, like this:
 
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
 

4. Include Cordova FileOpener2 Plugin

 
Add required plugin:
 
cordova plugin add cordova-plugin-file-opener2
cordova plugin add cordova-plugin-whitelist
 
Install Whitelist plugin only if you’re using Cordova 4.0 +. Without it you’ll receive “Application Error: There was a network error.” error.
 
GitHub - FileOpener2
 
 
 
One note, this plugin will not work with Cordova 5.1.1, it’s an internal Cordova error. So use any other Cordova version. If you already have version 5.1.1, do this:
 
npm uninstall -g cordova
npm install -g cordova@5.0.0
 

Development

 
At this point, you should have everything set up and ready, we can start working on our example.
 
Go to IonicOpenFileDemo project directory and find app.js, alter angular.module line and include ngCordova service, like this:
 
var app = angular.module('starter', ['ionic', 'ngCordova'])
 
Open index.html file, add a controller to ion-content directive:
 
  <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title"File Opener Example</h1>
      </ion-header-bar>
      <ion-content ng-controller="FileOpenerController">

      </ion-content>
   </ion-pane>
 
Initialize this controller in app.js file; don’t forget to inject $cordovaFileOpener2 service.
 
app.controller('FileOpenerController', function($scope, $cordovaFileOpener2, $ionicPlatform) {

});
 
If you’re using Cordova 4+, you will need to check if there’s a Whitelist plugin installed with your project. If you have it, add this security meta tag to your index.html HEAD content:
 
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
 
Without it your application will throw an error during the app initialization, after that it will continually throwing no security meta-tag found. While not a blocking point, constant console log warnings will make it hard to do any debugging.
 
Finally to open a file use this function:
 
$scope.openPDF = function() {
	$cordovaFileOpener2.open(
		'/sdcard/Download/109.pdf', // Any system location, you CAN'T use your appliaction assets folder
		'application/pdf'
	).then(function() {
		console.log('Success');
	}, function(err) {
		console.log('An error occurred: ' + JSON.stringify(err));
	});
};
 
Few important notes:
 
  • Appropriate application must exist if you want to open a certain file, for exaple you must have a PDF reader if you want to open PDF file.
  • You CAN’T use this plugin to open a local assets content.
  • If you still need to open a local assets you will need to copy it somewhere else.
  • Use Asset2SD plugin if you need to copy assets content to SD card. This is Android plugin.
  • In iOS, you might need to remove <preference name=”iosPersistentFileLocation” value=”Library” /> from your config.xml
Continue Reading

  • 曾坤鹏

    but file-opener2 doesn’t play well in ios; it have to wait some second and you can’t do other operation when the fileopener is calling

    • Have you tried posting an issue at plugings github page?

  • driekwartappel

    Hi, thanks for the tutorial. I followed your instructions but still when clicking on the button (on my phone), nothing happens. I added alerts for the fail / success callbacks, but still nothing. Is there any way to debug the code?
    I tried with the latest cordova version and 5.0. The old one I get a “class not found” error.

  • driekwartappel

    Do you perhaps have this code hosted somewhere? I would like to know what your app.js file looks like. Thanks!

    • I made a GitHub repo example for you: https://github.com/Gajotres/IonicOpenFileDemo

      You’ll also find deployment tutorial there. The code has been retested and I can vouch it works.

      • driekwartappel

        Thanks Dragan! Will report back if I have any issues, but I am sure I must have missed a step or something

        • Sertunc Selen

          i can not work? help me please

  • sir…mine correct working camera is in before installed cordova,,,afer installing 5.0 version for this tutorial , all the function is called ..but not open in cell after build ..y?(is cordova initialization problem??how to fix??)..please guide

  • I resolve the issue..but is not working

  • fabio balsamo

    Hi, sorry, but if i want to open any kind of files? not only pdf, i mean i click on any file and i want to open it automatically?? thank you

  • Shridar Gowda

    ths will not open the vediofile right?

  • Uro

    Hi, can anyone guide me on how to implement the plugin Asset2sd in ionic? where to put the code once I already installed it? Many thanks.

  • ionicBeginner

    Hi , is there any way by which we can open a pdf file without downloading it for Android device ?