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

Introduction

 

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 the ionic application page using native camera plugin in ionic 3. The following tools and requirements should be prepared before reading this article.

• Node.js
• Latest Ionic 3 CLI
• Latest Cordova
• Node Command Line Window (Windows) or Terminal (OS X, Linux)
• Text Editor or IDE (e.g. Visual Studio Code, Atom,)

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

npm install -g ionic Cordova

 

Once the 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 for 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,

 

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

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

Step 3

 

Integrate image picker with component part in our app.

 

Sample.ts File

import {
    ImagePicker,
    ImagePickerOptions
} from '@ionic-native/image-picker';
//here creating a imageLists variable as array for store a base64 image data.
public imageLists: any[] = [];
//here injecting imagePicker class to our component part as object
constructor(private imagePicker: ImagePicker) {}
public loadMultipleImageFromGallery() {
    let options: ImagePickerOptions = {
        //here Quality of images, defaults to 100
        quality: 100,
        //here Width of an Image
        width: 600,
        //here Height of an Image
        height: 600,
        /** Output type, defaults to 0 (FILE_URI).

        * FILE_URI :0 (number) it returns a actual path for an image

        */
        DATA_URI: 1(number) it returns a base64 data
        for an image
        outputType: 1
        //here Maximum image count for selection, defaults to 15.
        maximumImagesCount: 15(1 - 15) numbers
        //while setting a number 15 we can load 15 images in one selection.
    };
    this.imagePicker.getPictures(options).then((results) => {
        for (let index = 0; index < results.length; index++) {
            //here iam converting image data to base64 data and push a data to array value.
            this.imageLists.push('data:image/jpeg;base64,' + results[index]);
        }
        console.log(“Image Lists”, this.imageLists);
    }, (error) => {
        // Handle error
        console.log(“Error occurred
            while loading”, error);
    });
}

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.

<ng-container *ngIf="imageLists">
    <ion-item>
        <ion-label>Browsed Images</ion-label>
    </ion-item>
    <ion-item>
        <ion-row *ngIf="imageLists.length>0">
            <ion-col style="padding:10px;" col-3 *ngFor="let image of imageLists;">
                <ion-card>
                    <ion-thumbnail item-start>
                        <img [src]="image" alt="Sample Image">
                    </ion-thumbnail>
                </ion-card>
            </ion-col>
        </ion-row>
    </ion-item>
</ng-container>

For further image, picker plugin details visit the 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.