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)