How To Load Multiple Images Using Native Image Picker In Ionic 3

Ionic is an open source Framework. Most popular cross-platform mobile app Framework. Helpful to develop or build hybrid mobile apps easily. It will save a lot of time and money.

Ionic is an open source framework. It's a very popular cross-platform mobile app framework which is helpful to develop or build hybrid mobile apps easily. It will save a lot of time and money for investment.

This article demonstrates how to select multiple images and load images in ionic application page using native camera plugin in ionic 3. The following tools and requirements should be prepared before reading this article.

Once we have installed Node.js we can install other tools on terminal or command line. Run the following command step by step.

npm install -g ionic Cordova

Once installation is finished let’s start creating an ionic 3 app.

Create Ionic 3 app

Open your Node.js terminal and open a specific location to create ionic 3 apps.

Start a new Ionic project using ionic start command,

ionic start myApp

This command will take a few minutes as it installs all dependencies and modules to a project.

Now, change the location to myApp

cd myApp

Once changed, the location myApp, Add android platform to the app.

  • ionic Cordova platform add android
  • ionic Cordova platform add a browser (For Browser)

Now, run a project using the following command.

  • ionic serve (For Browser)
  • ionic Cordova run Android (For Device)

Make sure you have connected the device and settings have been set.

Now let’s start,

Introduction

The Image Picker Plugin is used to select multiple images.

Step 1

Follow the below-mentioned steps to install the Image Picker plugin to our app.

ionic Cordova plugin add Cordova-plugin-Telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"

npm install --save @ionic-native/image-picker

Step 2

Add Camera plugin to your app module.

app.module.ts file

  1. //here importing lines for access camera object and file plugin to our app.  
  2. import { ImagePicker } from '@ionic-native/image-picker';  
  3. @NgModule({  
  4. providers: [  
  5.    //here added class to our provider service block  
  6.    ImagePicker  
  7. ]  
  8. })  
  9. export class AppModule { } 

Step 3

Integrate image picker with component part in our app.

Sample.ts File

  1. import {  
  2.     ImagePicker,  
  3.     ImagePickerOptions  
  4. } from '@ionic-native/image-picker';  
  5. //here creating a imageLists variable as array for store a base64 image data.  
  6. public imageLists: any[] = [];  
  7. //here injecting imagePicker class to our component part as object  
  8. constructor(private imagePicker: ImagePicker) {}  
  9. public loadMultipleImageFromGallery() {  
  10.     let options: ImagePickerOptions = {  
  11.         //here Quality of images, defaults to 100  
  12.         quality: 100,  
  13.         //here Width of an Image  
  14.         width: 600,  
  15.         //here Height of an Image  
  16.         height: 600,  
  17.         /** Output type, defaults to 0 (FILE_URI). 
  18.  
  19.         * FILE_URI :0 (number) it returns a actual path for an image 
  20.  
  21.         */  
  22.         DATA_URI: 1(number) it returns a base64 data  
  23.         for an image  
  24.         outputType: 1  
  25.         //here Maximum image count for selection, defaults to 15.  
  26.         maximumImagesCount: 15(1 - 15) numbers  
  27.         //while setting a number 15 we can load 15 images in one selection.  
  28.     };  
  29.     this.imagePicker.getPictures(options).then((results) => {  
  30.         for (let index = 0; index < results.length; index++) {  
  31.             //here iam converting image data to base64 data and push a data to array value.  
  32.             this.imageLists.push('data:image/jpeg;base64,' + results[index]);  
  33.         }  
  34.         console.log(“Image Lists”, this.imageLists);  
  35.     }, (error) => {  
  36.         // Handle error   
  37.         console.log(“Error occurred  
  38.             while loading”, error);  
  39.     });  

Step 4

Here is the code to display images in our pages. Here, first I am checking if imageLists is available or not. Next check if imageLists length has been greater than zero(0). Then I use [src] Propety Binding to bind base64 data to img source tag.

  1. <ng-container *ngIf="imageLists">  
  2.     <ion-item>  
  3.         <ion-label>Browsed Images</ion-label>  
  4.     </ion-item>  
  5.     <ion-item>  
  6.         <ion-row *ngIf="imageLists.length>0">  
  7.             <ion-col style="padding:10px;" col-3 *ngFor="let image of imageLists;">  
  8.                 <ion-card>  
  9.                     <ion-thumbnail item-start>  
  10.                         <img [src]="image" alt="Sample Image">  
  11.                     </ion-thumbnail>  
  12.                 </ion-card>  
  13.             </ion-col>  
  14.         </ion-row>  
  15.     </ion-item>  
  16. </ng-container>  

For further image picker plugin details visit official website.

Summary

In this article, I have discussed how to select multiple images and load images in our ionic application page using native camera plugin in ionic 3. If you have any questions/issues about this article, please let me know in the comments.