The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

Taking photos with my phone is awesome. I’ve probably taken at least a dozen of my dog just today. Check it out:

IMG_0196

But what’s even more awesome is that we live in the future, where the apps on our phones and tablets let us do all kinds of cool stuff with those photos. So as an app developer, how can you participate in this amazing World of Tomorrow? To start, your app needs to be able to access the photos on your device.

In today’s post, we’ll take a look at the first of two ways to easily get images from the Gallery on Android and Photos on iOS in Ionic 2 with Ionic Native.

Ionic Native Camera Plugin

As a user, picking a photo from the native photo app is already a pretty great experience, so let’s look at how we can integrate that into our apps. Thanks to the Ionic Native Camera plugin it’s super easy. In a previous blog post, we looked at how to use the Camera plugin to take a new photo, but that’s not all it does! It also allows us to open the device’s native photo app, and access any picture selected by the user.

Let’s take a look by building a simple app.

Getting Set Up

To get started, let’s create a blank Ionic 2 project and add the plugin:

ionic start ionic-gallery-app blank —v2
cd ionic-gallery-app
ionic plugin add cordova-plugin-camera

That’s all the set up it takes. We’re ready to roll.

Invoking the Native Photo App

The project template generated by ionic start gave us a basic app that we can start adding on to, so next we’ll import the plugin into the component template in app/pages/home/home.ts:

import { Camera } from ‘ionic-native’;

We’ll also declare a imageSrc component variable above the constructor so we have something to assign the user selected image to later:

private imageSrc: string;
constructor(private navCtrl: NavController) { }

For those not familiar with TypeScript, there are two TypeScript-specific things in our declaration worth noting. First is the private notation, which makes the variable accessible only within this component. Second is the :string notation after the variable name, which tells TypeScript to type check that the variable is only ever set to a value of type string.

Then define a function to call the plugin’s Camera.getPicture() member function in home.ts, and handle the returned file URI in the resolved promise:

private openGallery (): void {
  let cameraOptions = {
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
    destinationType: Camera.DestinationType.FILE_URI,      
    quality: 100,
    targetWidth: 1000,
    targetHeight: 1000,
    encodingType: Camera.EncodingType.JPEG,      
    correctOrientation: true
  }

  Camera.getPicture(cameraOptions)
    .then(file_uri => this.imageSrc = file_uri, 
    err => console.log(err));   
}

Looks a lot like how we use this plugin to take a photo with the device’s camera, right? So what’s the difference?

Options Are Important

Notice that we’ve passed a cameraOptions object to Camera.getPicture(). In particular, noticed that we’ve passed sourceType: Camera.PictureSourceType.PHOTOLIBRARY, which tells the plugin that we want to retrieve an image from the native photo app. When this function is called, the OS will ask the user to give the app permission to access the native photo app, then switch to it.

Once the user selects a photo, the OS will switch back to our app, and whatever format we set as the destinationType will be returned in a promise. In this case, we’ve asked for a URI to be returned that points to the location of the photo in the local file system.

Here’s a complete breakdown of what the options we’ve set do:

  • sourceType: get the image from the native photo app
  • destinationType: return a URI for the image
  • quality: maintain 100% of the image’s original quality
  • targetWidth/targetheight: scale the image to be a maximum of 1000px on its longest side – note that this does not alter the image’s aspect ratio
  • encodingType: return the image in JPEG format
  • correctOrientation: rotate the image to correct for the orientation of the device when the photo was taken

There are a number of other options to choose from, including different values for the ones we’ve set here. For a complete list of all the available options, take a look at the Cordova Camera Plugin docs.

Building the Front End

All we have left to do is make our app usable. To do this, update the home.html template file by dropping the following inside ion-content:

<div class="gallery-button" text-center>
    <img [src]="imageSrc" />    
  <ion-icon name="images" on-tap="openGallery()"></ion-icon>
  <p>Choose a Photo</p>  
</div>

Here, all we’re doing is using one of Ionic’s sweet ionicons as a button that will call the openGallery() function when it’s tapped. We also binded the src attribute of the img element to the imageSrc component property we declared earlier so that the image will load when the promise in our call to Camera.getPicture() resolves.

To finish the app, you can drop this css into app/theme/app.core.scss so that everything looks nice and pretty.

Running the App

Since we are using Ionic Native plugins for this app, we’ll need to test it on a real device. For this you have a couple options.

  1. Deploy to Ionic View

Ionic View is a handy app we offer to make it easy to test Ionic apps on mobile devices. Just download the Ionic View app from the App Store or Google Play, then run:

ionic upload

  1. Deploy to Your Device

You can also deploy the app directly to your phone for testing as a native app by connecting your phone to your computer with a USB cable then running:

ionic run ios

or

ionic run android

This should be straightforward on Android devices. For iOS devices, you will need to create a provisioning profile and install it on your phone, as well as install the ios-deploy module from npm by running:

npm install -g ios-deploy

Note that if you are deploying from a Mac that’s running OS X El Capitan, you may also need to add the --unsafe-perm=true option to install ios-deploy.

Once your app is running on your device, try it out! It should look something like this:

final-app

So photos are awesome, but they’re just one of many native device features Ionic Native makes available to your Ionic apps. Check out all the Ionic Native plugins, and if you fancy yourself a contributor to open source, please do contribute to the project on GitHub.

We <3 pull requests.

  • Abhishek Jain

    Just a suggestion, it would be awesome if you could add a “5 min read” tag on the top of each post just like we have on medium.

  • Karen

    Hi!

    I’m really really really new to ionic and also linux and code in general (I learned C and Matlab in school but I’m learning html/css/javascript on my own) and I’m trying to develop my very 1st app, so this may be a stupid question but here it is :
    I can’t find the location app/pages/home/home.ts … I’ve seen this in other tutorials but when I look for home.ts I can’t find it…

  • Javier Riofrío

    Ionic upload doesn’t work, I read in other posts that is because the use of ionic 2 instead of the previews version?

    • yesimahuman

      Hey there, what’s not working about it? Let us know if you have any console output or errors…

      • Javier Riofrío

        Thanks for your quick response, yes I get this error in the console “An error occurred uploading the build: Error: read ECONNRESET”.

  • Yusuf GÜR

    I can not preview the photo which i have taken with iphone?
    I am using iphone 6s plus and ios 10?

  • blakezeis

    This is a great article, but i’m very interested to see uploading the picture to Firebase. I’m having a lot of trouble with the process.