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.
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);
});
alert(uri);
}, function (error) {
alert(error);
});
Filtering by extension :
window.plugins.mfilechooser.open(['.doc', '.xls', '.ppt'], function (uri) {
alert(uri);
}, function (error) {
alert(error);
});
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 :
Hi,
ReplyDeleteI 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
Thanks for this :)
ReplyDeleteVery 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