How to display an image picker controller using Swift

Little backstory

I was working on a personal project and had to use an UIImagePickerController so that the user can take or choose pictures from a library to be displayed on the view controller. Even though the handling of this task was a bit complex in relation to my personal app, the main concept of displaying an image from the image picker is pretty smooth.

Where to start?

Let’s create a view controller on the storyboard with a button and an image view. Make sure you hook those up to the view controller like such :

When running the app, it should look like so (ignore the black and white gradient for the background color. Also I have my image view a placeholder image)

Now let’s create a function that returns an image picker controller . UIImagePickerController lets us specify the source type. The source type is the options that give the user to pick a picture from the library or saved photos album or pick a freshly taken photo. Here’s our function ⬇️

Next, we’ll create a function that will display an image picker controller based on the source type chosen by the user (Library or Camera)

Here’s our function ⬇️

Once this is done, we’ll call this function when the user taps on the button we created earlier as such :

Now if you click on that button you should get this : 👀👀

We have the Camera option and the Library option. Let’s start with the Library option.

After I tap on the library option, this will be shown : ⬇️

However if you tap on a picture, the UIImagePickerController will be dismissed but we won’t have a reference of the picture we have chosen so that we can assign it to our imageView.

For that we need to find a way for the UIImagePickerController to communicate with our view controller. Thankfully there’s a couple protocol that already exists that can handle it for us and that is the UIImagePickerControllerDelegate and UINavigationControllerDelgate.

So let’s create an extension of the view controller that extends these two protocols as such : ⬇️

Then we’ll implement the image picker controller method for didfinishPickingMedia with info. This is the callback that lets us know that the user is done choosing the picture. Once this is called, we set the image in that method and dismiss the view afterwards ⬇️

One more thing

We forgot to set the image picker’s delegate. If we don’t set the delegate, nothing would happen which means we won’t be able to get the message sent from the delegate method we implemented earlier.

So let’s Go back to the showImagePickerOptions function and add those two lines : ⬇️

One last thing 😅

For the camera option to work properly(more like for it not to crash) add this permission in the info Plist ⬇️

Now run the app and you should get this when choosing a picture

That’s it. It worked!

I hope you enjoyed it and feel free to add any comments for suggestions and more questions on this topic.

Happy coding!