Using UIImagePickerController in Swift 3

Usually, in iOS applications, users are asked for selecting an image from their device then use it as an avatar of himself/herself throughout the app. In this article, we talk about how to configure and use UIImagePickerController in Swift 3.

We’ll set up a UI component displaying a default image. User can click on that default image, replace that default image with another one picked from their device.

In real app, after picking image, we’ll send it to server, but for the simplicity of this tutorial, we don’t go further than picking image — compressing image (who wants to store a huge image on server) — then extract image information for further use.

If you’re already know UIImagePickerController and want to bypass the length explanation, just go ahead and pick up the final code at the end of the article.

1. Set up components

Code explanation:

— Define profileImage as UIButton, because we'll need to add action to pick image to this component later on

When setImage for UIButton, we need to specify .withRenderingMode(.alwaysOriginal), otherwise the image displays as a blue silhouette.

Since we will programmatically add layout constraint anchors to UIButton, to conform XCode, we need to set

button.translatesAutoresizingMaskIntoConstraints = false

— Add profileImage to view and define its layout anchors

Our profileImage is constrained by 4 layout anchors:

  • Center it horizontally on screen
  • Center it vertically, but pull it 100px to the top
  • profileImage dimension is 100x100

— Define submitButton as UIButton using the same way we did with profileImage

Because we want the button look “minimalist”, let’s set its colour to black and add a black rounded border:

button.setTitleColor(.black, for: .normal)
button.layer.borderColor = UIColor.black.cgColor
button.layer.borderWidth = 1
button.layer.cornerRadius = 20

Don’t forget to set translatesAutoresizingMaskIntoConstraints to false so that we can define its layout constraint anchors later on with peace ☮️

Add submitButton to view and define its layout anchors

Similar to profileImage, submitButton will be:

  • Center horrizontally on screen
  • Padding 50px from the profileImage. Bottom of profileImage to Top of submitButton = 50px
  • submitButton dimension is 100x40

Now build and run the app, it should look like this:

View with profileImage and submitButton

2. Associate profileImage with action to pick image form device

Using addTarget to associate profileImage with a custom function

This code tells profileImage to call function handleProfileImage when the finger is inside the bounds of the control - .touchUpInside.

At this point, try running the app, tapping the image, you’ll see “Start picking image” printing out in XCode console log.

🙌👏👍🤘🤞

Instead of printing out a string, we’ll make the app more useful by calling UIImagePickerController

Inside handleProfileImage() function, we define imagePickerController of type UIImagePickerController then present that controller modally

Don’t forget to set:

  • imagePickerController.allowsEditing = true to allow user to zoom in/out and crop image before using it
  • imagePickerController.mediaTypes = [kUTTypeImage as String] to filter selectable items showing up on device to type Image only. We don't want user to upload a video for avatar. Remember to import MobileCoreServices to your ViewController in order to use kUTTypeImage
  • In order to access device’s Photo library, which happens to be privacy-sensitive data, we need to declare in Info.plist usage description of accessing Photo. 
    Open Info.plist then add new key Privacy - Photo Library Usage Description, set its value to "We'd like to access your Photos" or what ever you want to tell user when asking for access to their Photos
Add key “Privacy — Photo Library Usage Description” to Info.plist

Now run the app, click profileImage, a message prompt out asking if you allow it to access Photos. Click "OK" to allow, now you are in your photo -- select a photo, edit it, then hit Choose to finish. The imagePickerController dismisses, carrying your selected photo, and nothing happens next ... yet.

Now it’s time to decide what to do with the selected image

At this point, we need to decide what to do with the selected image. In this app, we will replace the default image with our selected image.

First, extend current ViewController with UINavigationControllerDelegate and UIImagePickerControllerDelegate, then set imagePickerController.delegate = self

After doing that, it’s possible to call method didFinishPickingMediaWithInfo of imagePickerController, this is where we get details of the selected image. It's a very good timing to put a break point in XCode to see what is it inside info

Now it’s time to update profileImage with selected image

Code explanation:

  • We first check if the selected photo is edited (scaled, cropped …), if yes, set profileImagewith the editedImage, otherwise use originalImage
  • Turn the selected image to round and put in a black border of 1px
  • Dismiss the imagePickerController, return to initial screen. Now you'll see the default image replaced with your new one.

3. Submit the image

In real app, this is the point where the developer want to send image to server. Depend of the server technology, handling uploading image can be different. In this article, we’ll cover compressing image and make it ready to upload only

Now it’s time to take care of the submitButton guy:

Associate submitButton with a handling action

Similar to profileImage we tells submitButton to call method handleSubmit when it's clicked - .touchUpInside

At this point, inside handleSubmit we'd want to

  • Compress image to make it smaller → saving data 🗜
  • Send the image to the moon 🚀

Here we use UIImageJPEGRepresentation to get data of profileImage, this function comes with compressionQuality parameter.

The quality of the resulting JPEG image, expressed as a value from 0.0 to 1.0. The value 0.0 represents the maximum compression (or lowest quality) while the value 1.0 represents the least compression (or best quality).” — Apple document

4. Completed code with comments

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.