Using the New PHPicker With SwiftUI

9 min readDec 9, 2020

--

A simple tutorial using PHPicker with SwiftUI and PromiseKit

PHPicker

A new image picker was announced at WWDC 2020. PHPicker is the replacement for UIImagePickerController and has a lot of new features, such as:

In this article, I will walk you through how to use PHPicker in a SwiftUI app.

Example Repo

Here’s the final code base on GitHub:

Dependencies

These are the dependencies in this app:

iOS14
Xcode12.0/Swift5.3
PromiseKit 6.13.2

Overview

We will implement this app with the following steps:

Add PHPicker to SwiftUI.
Handle asynchronous tasks with PromiseKit.

Let’s suppose that we will implement the functionality of picking a photo from the Photo Library and displaying it on a list.

So we have a photo list in this app that looks like this:

Sample app

This is a pretty simple view that only has a button and a photo list.

And the ContentView.swift looks like this:

ContentView.swift

1. Add PHPicker to SwiftUI

So, let’s introduce PHPicker to this app.

In order to use PHPicker in SwiftUI, we need to prepare the view that conforms to the UIViewRepresentable protocol and create an instance of PHPicker inside of it.

Ths step of connecting to PHPicker goes as follows:

Create a view that conforms to UIViewRepresentable.
Add the makeUIViewController method and provide a PHPicker view.
Add updateUIView.
Add a Coordinator class and makeCoodinator method.

So, create ImagePicker.swift at the root folder:

makeUIViewController is in charge of creating an instance of PHPicker and returning it. The configuration should be done here.

makeCoodinator provides a coordinator class that handles all of the events of PHPicker.

The Coordinator class is used to handle the picker event and triggers the completion handler after getting data from the Photo Library.

In this case, we’re supposed to handle multiple photos.

Next, we will use this view in ContentView.swift:

ContentView.swift

In pickerConfiguration, you can customize the configuration to whatever you want. In this case, we only use .image data and set a limit of 10 pics.

When the “Add photos” button pressed, the Photo Library shows up and you can select multiple photos:

GIF

It seems to work fine.

2. Handle Asynchronous Tasks With PromiseKit

We’ve introduced the PHPicker view and applied it to our ContentView. But you probably noticed that we call the completion handler every time loading is done in the picker method.

If you are uncomfortable with this approach for some reason and would like to handle it all at once, you need to wait for all asynchronous loading in the picker function.

In order to do that, you can use PromiseKit:

PromiseKit

PromiseKit allows you to handle asynchronous tasks in an easy way. It has converted almost all of Apple’s APIs to promises and fully supported installation for CocoaPods, Carthage, SwiftPM, and Accio.

In this article, we will install it via SwiftPM.

Go to Project > Swift Packages: