Ionic 6 Image Picker and Multiple Image Preview Tutorial

This tutorial explains how to create an Image picker in the Ionic Angular application with the help of the Ionic native and Cordova image picker plugin.

Additionally, we will tell you how to show multiple image preview selected from the device storage in the Ionic angular application.

Throughout this guide, you will understand the simple ways to add an image picker in Ionic and create a reusable image picker component; also, you will be able to show multi-image preview in ionic.

We will use the default home component or page to implement an image picker and image preview in ionic.

With the help of Ionic CLI and node package manager, you will add an image picker plugin in Ionic, which is a Cordova based plugin for multiple image selection and comes with custom image options to customize the uploaded image in ionic.

Ionic 6 Angular Image Picker and Multi Image Preview Example

  • Step 1: Create Ionic Project
  • Step 2: Add Image Picker Plugin
  • Step 3: Register ImagePicker in AppModule
  • Step 4: Create Image Picker and Image Preview
  • Step 5: Test Application

Create Ionic Project

Ionic tool is required for starting Ionic app development, install this tool with recommended command:

npm install -g @ionic/cli

Run command to install new Ionic Angular blank project:

ionic start ionic-image-picker-example blank --type=angular

Get into the project using below command:

cd ionic-image-picker-example

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Add Image Picker Plugin

Next, you need to open the terminal, type following commands and execute it to install image picker plugin.

ionic cordova plugin add cordova-plugin-telerik-imagepicker

npm install @ionic-native/image-picker

npm i @ionic-native/core

Register ImagePicker in AppModule Class

To access image picker methods, import and register ImagePicker plugin into the main app module class. Hence, update app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
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(), AppRoutingModule],
  providers: [
    ImagePicker,
    { 
        provide: RouteReuseStrategy, 
        useClass: IonicRouteStrategy 
    }
  ],
  bootstrap: [AppComponent],
})

export class AppModule {}

Create Image Picker and Image Preview in Ionic

Define a custom function, which helps to pick up the image; similarly use ngFor directive to loop over the selected images and show the preview for multiple images.

Update home.module.html file:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Image Picker and Image Preview Demo  
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-grid>
    <ion-row>
      <ion-col text-center>
        <ion-button (click)="chooseImage()">Choose Image</ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div class="container">
          <div class="img-list" *ngFor="let img of imageObj">
            <img src="{{ img }}" alt="" srcset="">
          </div>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Update home.page.ts file:

import { Component } from '@angular/core';

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  imageObj: any;
  options: any;

  constructor(private imagePicker: ImagePicker) { }

  chooseImage() {
    this.options = {
      width: 220,
      quality: 32,
      outputType: 1
    };
    
    this.imageObj = [];

    this.imagePicker.getPictures(this.options).then((res) => {
      for (var i = 0; i < res.length; i++) {
        this.imageObj.push('data:image/jpeg;base64,' + res[i]);
      }
    }, (error) => {
      alert(error);
    });
  }

}

We are adding a little style in image picker module, so that it doesn’t look peculiar.

Hence, open home.page.scss and include the suggested code inside the file:

.container {
  min-height: 250px;
}

.img-list {
  margin: 4px;
}

@media (min-width: 0px) {
  .img-list {
    column-count: 2;
  }
}

@media (min-width: 420px) {
  .img-list {
    column-count: 3;
  }
}

@media (min-width: 720px) {
  .img-list {
    column-count: 3;
  }
}

Test Application

To test the application, add platform, create runnable build and start in the device.

# For iOS
ionic cordova platform add ios

# For android
ionic cordova platform add android

# For windows
ionic cordova platform add windows

Then, create the runnable build.

# For iOS
ionic cordova build ios

# For android
ionic cordova build android

# For windows
ionic cordova build windows

Next, use command to start the app.

# For iOS
ionic cordova run ios -l

# For android
ionic cordova run android -l

# For windows
ionic cordova run windows -l

ionic image picker and image preview

Conclusion

We are done; for now, this quick tutorial explained how to create an image picker and image preview component in an ionic, angular app. We hope you will liked it and share this tutorial with others.