Multiple image picker using Ionic

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.