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.

Also Read: Ionic | Crop Images using Ionic 4 native plugin with Image Picker

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

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

4
Leave a Reply

avatar
2 Comment threads
2 Thread replies
9 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
GaneshmostafaJolly.exeMarcos Ribeiro Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Marcos Ribeiro
Guest
Marcos Ribeiro

Great article about Styling Ionic 4!

mostafa
Guest
mostafa

im use ionic 4 but i have error : plugin_not_installed

Ganesh
Guest
Ganesh

I’m unable to do this. when I click select image, the app is exiting.