Ionic 6 Angular Image Picker Integration Tutorial

Ionic 6 Image Picker tutorial; In this comprehensive guide, you will learn how to integrate image picker functionality in an Ionic Angular app using Cordova Telerik image picker and ionic native image-pickers plugins.

The image picker is a module that gives access to the device UI for selecting images or videos from the device storage.

Ideally, this extensive guide will explain how to add an image picker in Ionic for selecting an image using Cordova and ionic native plugins.

We will also make sure you can spruce up the selected image in the Ionic app by easily customizing its height, width, quality, and a total number of selected images.

Additionally, once you picked the image, then you will also be able to show it on the Ionic page view.

How to Implement Image Picker in Ionic 6 Angular App

• Step 1: Install Ionic App
• Step 2: Install Image Pickers Plugins
• Step 3: Add Image Picker Modules in App Module
• Step 4: Integrate Image Picker in Ionic
• Step 5: Add Custom Styling
• Step 6: Test Ionic Project

Install Ionic App

The first step begins with installing and setting up the Ionic CLI tool, execute the command to install the tool:

npm install -g @ionic/cli

Now, again type the recommended command in the terminal to install a blank new Ionic Angular app:

ionic start ionic-demo-app blank --type=angular

Move inside the application:

cd ionic-demo-app

Install Image Pickers Plugins

In this step, we will install Cordova and Ionic native image picker plugins. The Cordova Telerik is an amazing image picker plugin; this also lets you create multiple image selection functionality in the Ionic platform.

Execute command to install the packages.

ionic cordova plugin add cordova-plugin-telerik-imagepicker
npm install @ionic-native/image-picker

Add Image Picker Modules in App Module

Further, you need to import the ImagePicker module from the ‘@ionic-native/image-picker/ngx’ package, plus inject it into the providers’ array as shown below in the 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 plugin
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 {}

Integrate Image Picker in Ionic Angular

The ImagePicker module provides getPictures() method that invokes an image picker; after selecting the images, we add the images in Base64 form into the array.

Open the home.page.ts file and update the following code:

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 {
  imgRes: any;
  options: any;
  constructor(private imgPicker: ImagePicker) { }
  imagePicker() {
    this.options = {
      width: 200,
      quality: 30,
      outputType: 1
    };
    
    this.imgRes = [];
    this.imgPicker.getPictures(this.options).then((results) => {
      for (var i = 0; i < results.length; i++) {
        this.imgRes.push('data:image/jpeg;base64,' + results[i]);
      }
    }, (error) => {
      alert(error);
    });
  }

}

Create a button bind imagePicker() method with the click event. When a user clicks on it, it will open the image picker and allows you to choose the images. The ngFor directive iterate over the images collection and show the image preview in the Ionic Angular app.

Head over to home.page.html file and insert the suggested code:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Image Picker Integration Demo  
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  <ion-grid>
    <ion-row>
      <ion-col text-center>
        <ion-button (click)="imagePicker()">Select Images</ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div class="images-wrapper">
          <div class="pick-single-image" *ngFor="let image of imgRes">
            <img src="{{image}}" alt="" srcset="">
          </div>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Add Custom Styling

Let us style the selected images, here is the styling code that you have to add it inside the home.page.scss file:

.image-container {
  background-size: cover;
  min-height: 220px;
}
@media (min-width: 0px) {
  .images-wrapper {
    column-count: 2;
  }
}
@media (min-width: 420px) {
  .images-wrapper {
    column-count: 3;
  }
}
@media (min-width: 720px) {
  .images-wrapper {
    column-count: 3;
  }
}
.pick-single-image {
  margin: 4px;
}

Test Ionic Project

Lastly, we are left with testing out the feature we created; hence execute either of the commands to add the platform of your choice:

# iOS
ionic cordova platform add ios
# Android
ionic cordova platform add android
# Windows
ionic cordova platform add windows

Once the platform has added, now you need to create the build, hence execute the command from the terminal. Or, to make things simpler, you can start your demo app by connecting your mobile device via USB.

# iOS
ionic cordova build ios
# Android
ionic cordova build android
# Windows
ionic cordova build windows

Eventually, you may execute either of the commands to start the app on the device; likewise, you can debug in the Chrome browser as well.

# iOS
ionic cordova run ios -l
# Android
ionic cordova run android -l
# Windows
ionic cordova run windows -l

Conclusion

So, this was it. The Ionic multiple image selection tutorial is over; Throughout this tutorial, you have ascertained how to create a reusable image picker component in an Ionic application using Ionic Native Cordova plugins.

Also, how to pick single or multiple images using image picker component.