How to Pick Multiple Images in Ionic

by

In this tutorial, we’re going to create a simple image gallery app using ionic & multiple image picker.

Let’s start

Step 1: Create a new ionic project & Change your working directory

ionic start imagePicker blank
cd imagePicker

Step 2: Add the 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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { ImagePicker } from '@ionic-native/image-picker/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot({ mode: 'md' }), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    ImagePicker,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 5:

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="getPictures()">
        <ion-icon name="add"></ion-icon>
    </ion-fab-button>
</ion-fab>

In the above code, we create a FAB button. When users click the fab button we’re calling getPictures() function.


getPictures() {
  this.imagePicker.getPictures({
    maximumImagesCount: 5,
    outputType: 1
  }).then(selectedImg => {
    selectedImg.forEach(i => this.images.push("data:image/jpeg;base64," + i));
  })
}

This getPictures() will get only 5 images & return the output as base64 string. Now using the images array we can create a Grid view for displaying selected images

  <ion-grid *ngIf="images.length != 0">
      <ion-col *ngFor="let image of images">
          <img src="{{image}}" style="height: 150px;width:150px" />
      </ion-col>
  </ion-grid>

Here, we’re displaying gridview if images.length != 0 & we created columns for displaying images. Since we’ve using <ion-grid> this will be responsive

Common mistakes

  • This won’t work on the 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)

Output

ionic multiple image picker

Reference