Ionic 4 | Implement Image Picker in Ionic Application using Cordova and Native Plugin

In Ionic applications, we may have support to select multimedia data by a user like images, for that we can show an Image Picker feature for easy selection of Images. In this post, we will discuss How to Add image Picker Ionic native Plugin. After adding this Cordova and native plugin you can easily choose images and show selected images on the page.

We can easily adjust quality, number images to select, height and width of images which will be selected from the user directory.

 

let’s get started.

Create a new Ionic 4 App using below CLI command

Install Cordova and Ionic Native Plugin

Import Plugin in App’s Main Module

In app.module.ts file import plugin and add in providers array

Home Component and HTML template

In home.page.ts file replace following code. This is having the getPictures method which will open Image Picker UI and after selection will return selected images which we are putting in an array as a set of Base64 urls to show in the Home template.

In home.page.html file replace following code, having a button to open Image Picker module, after that selected images will be shown in *ngFor iteration.

For styling Selected Images like Pinterest replace following in home.page.scss

 

Leave a Reply

avatar
  Subscribe  
Notify of