how to uplaod multiple images from i pad gallery using ionic and cordova plugin? - angularjs

Question

I want to upload multiple images in iPad using ionic and cordovaImagePicker plugin.
I am getting an error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module ngCordova due to:
Error: [$injector:nomod] Module 'ngCordova' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I am not getting how to exactly use that plugin + how to test whether its working or not?
app.js:
var app = angular.module('starter', ['ionic','ngCordova']);
app.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();
}
});
});
app.controller('ImagePickerController', function($scope, $cordovaImagePicker, $ionicPlatform, $cordovaContacts) {
$scope.collection = {
selectedImage : ''
};
$ionicPlatform.ready(function() {
$scope.getImageSaveContact = function() {
// Image picker will load images according to these settings
var options = {
maximumImagesCount: 1, // Max number of selected images, I'm using only one for this example
width: 800,
height: 800,
quality: 80 // Higher is better
};
$cordovaImagePicker.getPictures(options).then(function (results) {
// Loop through acquired images
for (var i = 0; i < results.length; i++) {
$scope.collection.selectedImage = results[i]; // We loading only one image so we can use it like this
window.plugins.Base64.encodeFile($scope.collection.selectedImage, function(base64){ // Encode URI to Base64 needed for contacts plugin
$scope.collection.selectedImage = base64;
$scope.addContact(); // Save contact
});
}
}, function(error) {
console.log('Error: ' + JSON.stringify(error)); // In case of error
});
};
});
Here is my code on plunker.

Answer 1

my app.js file.
var app = angular.module('starter', ['ionic','ngCordova']);
app.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();
}
});
});
app.controller('ImagePickerController', function($scope, $cordovaImagePicker, $ionicPlatform, $cordovaContacts) {
$scope.collection = {
selectedImage : ''
};
$ionicPlatform.ready(function() {
alert("hiii");
$scope.getImageSaveContact = function() {
// Image picker will load images according to these settings
var options = {
maximumImagesCount: 1, // Max number of selected images, I'm using only one for this example
width: 800,
height: 800,
quality: 80 // Higher is better
};
$cordovaImagePicker.getPictures(options).then(function (results) {
// Loop through acquired images
for (var i = 0; i < results.length; i++) {
$scope.collection.selectedImage = results[i]; // We loading only one image so we can use it like this
window.plugins.Base64.encodeFile($scope.collection.selectedImage, function(base64){ // Encode URI to Base64 needed for contacts plugin
$scope.collection.selectedImage = base64;
$scope.addContact(); // Save contact
});
}
}, function(error) {
console.log('Error: ' + JSON.stringify(error)); // In case of error
});
};
});
$scope.contact = { // We will use it to save a contact
"displayName": "Gajotres",
"name": {
"givenName" : "Dragannn",
"familyName" : "Gaiccc",
"formatted" : "Dragannn Gaiccc"
},
"nickname": 'Gajotres',
"phoneNumbers": [
{
"value": "[phone]",
"type": "mobile"
},
{
"value": "[phone]",
"type": "phone"
}
],
"emails": [
{
"value": "dragan.gaic#gmail.com",
"type": "home"
}
],
"addresses": [
{
// "type": "home",
"formatted": "Some Address",
"streetAddress": "Some Address",
"locality":"Zagreb",
"region":"Zagreb",
"postalCode":"10000",
"country":"Croatia"
}
],
"ims": null,
"organizations": [
{
"type": "Company",
"name": "Generali",
"department": "IT",
"title":"Senior Java Developer"
}
],
"birthday": Date("08/01/1980"),
"note": "",
"photos": [
{
"type": "base64",
"value": $scope.collection.selectedImage
}
],
"categories": null,
"urls": null
}
$scope.addContact = function() {
$cordovaContacts.save($scope.contact).then(function(result) {
console.log('Contact Saved!');
}, function(err) {
console.log('An error has occured while saving contact data!');
});
};
});
run the code inside x code otherwise it will always show the error cordova is not defined.