In this article, we’ll learn how to use multiple image picker using ionic. We are going to use https://github.com/wymsee/cordova-imagePicker / https://github.com/Telerik-Verified-Plugins/ImagePicker for picking up images from your android & ios photo gallery. It contains following steps
Step 1: Create new ionic project & Change your working directory
ionic start imagePicker blank cd imagePicker
Step 2: Add required platform
ionic cordova platform add android ionic cordova platform add ios
Step 3: Add Image Picker Plugin & npm modules
ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="App wants to access your gallery"
npm install --save @ionic-native/image-picker
Step 4: Once we have added our npm modules and dependencies, we have to import & declare our plugin into app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { ImagePicker } from '@ionic-native/image-picker';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
ImagePicker,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Step 5: Creating a button to access gallery & I have created a div tag to render images which we retrieved from gallery (home.html)
<ion-content padding>
<button ion-button (click)="getPictures()">Get Pictures</button>
<div *ngFor="let image of images">
<img src="{{image}}"/>
</div>
</ion-content>
Step 6: Now, we have to create a getPictures() function into home.ts
getPictures(){
this.imagePicker.getPictures({
}).then( results =>{
console.log(results);
for(let i=0; i < results.length;i++){
this.images.push(results[i]);
};
});
}
Common mistakes
- This won’t work on browser, you must test it on simulator / real device
- You must give a proper permission to access; (Phone Settings => Apps => your app name => Permission & Enable all required permissions)
Hope you enjoyed this tutorial..! Could you able to success with this lesson? or facing any issue? let me know on comment. I’m waiting for your reply.
