Skip to main content

Create A File Chooser Using Ionic Framework


The following Content will show you how to create file chooser in  your Android application using Ionic Framework.There are number of plugins available to implement this tutorial.
To implement this , we’ll be using the plugin com.maginsoft.mfilechooser 1.0.0.

1.Create the project

ionic start Test blank
cd Test
ionic platform add android

2.Add Plugin
Cordova/Phonegap plugin that supplies a File Chooser for Android 4+. The File Chooser does not require installation external file manager.This plugin not supported in browser for testing build in device.
To install the plugin

   cordova plugin add https://github.com/MaginSoft/MFileChooser.git
How to use Plugin
This plugin documentation available on https://github.com/MaginSoft/MFileChooser  and I am so thankful to Abakhov Sergey for the implementation of its plugin and help to us.
The plugin creates the object window.plugins.mfilechooser. To use, call the open() method:

Simple using :

window.plugins.mfilechooser.open([], function (uri) {

     alert(uri);

   }, function (error) {

       alert(error);

   });

Filtering by extension :

window.plugins.mfilechooser.open(['.doc', '.xls', '.ppt'], function (uri) {

     alert(uri);

   }, function (error) {

       alert(error);

   });

3.Implementation
Write your index.html like as follows :

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
   <title></title>

   <link href="lib/ionic/css/ionic.css" rel="stylesheet">
   <link href="css/style.css" rel="stylesheet">

   <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
   <link href="css/ionic.app.css" rel="stylesheet">
   -->

   <!-- ionic/angularjs js -->
   <script src="lib/ionic/js/ionic.bundle.js"></script>

   <!-- cordova script (this will be a 404 during development) -->
   <script src="cordova.js"></script>

   <!-- your app's js -->
   <script src="js/app.js"></script>
  <!-- your controllers js  -->
    <script src="js/controllers.js"></script>
 </head>
 <body ng-app="starter">

   <ion-pane>
     <ion-header-bar class="bar-stable">
       <h1 class="title">Ionic Blank Starter</h1>
     </ion-header-bar>
     <ion-content ng-controller="AppCtrl" class="padding">
 <button class="button button-full button-positive" ng-click="filepathChooser()">
                     Select File
                 </button>
     </ion-content>
   </ion-pane>
 </body>
</html>


In your app.js look like as follows :

angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
 $ionicPlatform.ready(function() {
   // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
   // for form inputs)
   if(window.cordova && window.cordova.plugins.Keyboard) {
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
   }
   if(window.StatusBar) {
     StatusBar.styleDefault();
   }
 });
})

And create new controller file as nomenclature by  controllers.js and confirmed to which is included in index.html.

angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope) {

$scope.filepathChooser = function() {
  window.plugins.mfilechooser.open([], function (uri) {
     //Here uri provides the selected file path.
 console.log('file path', uri);
 alert(uri);
}, function (error) {
   console.log('Error', error);
alert(error);
});
};
});



4.Build or Run It

ionic build android or

         ionic run android

Snapshots taken In Android Device :
























Comments

  1. Hi,

    I have successfully added plugin using cordova. But not able build for Android platform. Getting build error. Can you please help me out, how can I build for Android devices.

    Let me know if you need more information.

    Thanks,
    Harish

    ReplyDelete
  2. Very nice plugin but lacks very important feature which is thumbnails for image and video files to know which image or video you are selecting

    ReplyDelete

Post a Comment

Popular posts from this blog

What exactly means MVW design pattern ?

What is a MVW framework? The abbreviation stands for 'Model - View - Whatever'.  Well there are many different JavaScript frameworks available , all invented for the same purpose. They all try to separate the presentation logic from the business logic where JavaScript holds the model and logic, and html the presentation layer. Quick overview : You can change the model without changing the view and vice-versa Unit testing is easy These are the core benefits of using such a framework. By separating presentation and business logic changes to the code are easier to implement and take less time. Another benefit is that code can be reused from a controller thus saving more time. Angularjs makes the code also shorter in comparison to other frameworks, which improves code stability. Less code means minor potential for bugs. For several years +AngularJS was closer to MVC (or rather one of its client-side variants), but over time and thanks to many refactorings

File Upload & Download With ng-cordova File Transfer Plugin In Ionic Framework

Using the AngularJS extension set , ngCordova , with Ionic Framework and the Apache Cordova File Transfer plugin, you can easily upload files to a remote server and download files from a remote server. 1.Create the project ionic start Test blank cd Test ionic platform add android 2.Add Plugin org.apache.cordova.file-transfer https://github.com/apache/cordova-plugin-file-transfer This plugin allows you to upload and download files. This plugin defines global FileTransfer, FileUploadOptions Constructors. Although in the global scope, they are not available until after the deviceready event . Installation cordova plugin add cordova plugin add cordova-plugin-file-transfer     2.    org.apache.cordova.file             https://github.com/apache/cordova-plugin-file             This plugin implements a File API allowing read/write access to files residing on the    device.             Installation cordova plugin add cordova-pl

Steps To Create Cordova Plugin

Introduction A plugin is a package of injected code that allows the Cordova webview within which the app renders to communicate with the native platform on which it runs. Plugins comprise a single JavaScript interface along with corresponding native code libraries for each supported platform. Due to following reason, we will go for plugin development To get the native capabilities of the device in the cordova based app Build the common functionality across the number of Cordova application(Reusability) Prerequisites For the creation of plugin you need to install plugman . npm install -g plugman Plugin Structure Decide Plugin ID & Name The plugin ID should be unique Plugin name should follow the convention “cordova.plugin.[your.plugin.name]” Create the structure Use the following command to create the plugin with plugin ID “cordova.plugin.test” and name “Test”. plugman create --name Test --