PhotosPicker / SwiftUI

Short tutorial on how to use the native SwiftUI PhotosPicker with Xcode 14 and iOS 16

Difficulty: Beginner | Easy | Normal | Challenging

Environment : Xcode 14, iOS 16 & SwiftUI

Full code at the end of the article

Create new Xcode Project

Open Xcode > App template > Select the SwiftUI Life Cycle and call it ImagePicker

Xcode > New Project

Let’s code

First things to do is to import the framework to access the photo library, head to ContentView and import the framework at the top:

import PhotosUI

Now, let’s add two SwiftUI states, add the following code over the body variable:

@State var selectedItem: [PhotosPickerItem] = []
@State var data: Data?

The first one will be use to follow the state of the selected image from library and the second for the data it contains, from there, we will be able to display this image in our user interface.

Now let’s add the PhotosPicker, replace the current code inside inside the VStack:

Image(systemName: “globe”)
.imageScale(.large)
.foregroundColor(.accentColor)
Text(“Hello, world!”)

With this code:

PhotosPicker(selection: $selectedItem, 
maxSelectionCount: 1, 
selectionBehavior: .default, 
matching: .images,
preferredItemEncoding: .automatic) { Text(“Select a picture”) }

We just implemented the native SwiftUI PhotosPicker with a few parameters:

• selection: the item selection trough a State
• maxSelectionCount: the number of picture you can pick up, 1 is enough to our tutorial.
• selectionBehavior: here we left it to default, you can also choose ordered to give an order to the photos.
• matching: the type of content, we choose images but it can be video, live photos etc..
• preferredItemEncoding: the encoding, we left automatic so we are taking the best representation determined by the system.

You can now run your application and click on “Select a picture”:

Xcode Canva running

Great, we have access to the photo library with only a few line of codes, let’s extract this data now

Extract the image as data

Now that we have access to the photo library, we need to extract the image data. To perform, we will use an .OnChange modifier to the PhotosPicker, add the following code right after the last graph of the PhotosPicker:

Display the image

Now that we have the data extracted, we can display it! Add the following code over the PhotosPicker:

This way, when we have something, we display the image otherwise we simply display a gray rectangle.

Run your application

You can now run your application and test it out.

Xcode simulator running

I’m always happy to have a chat and collaborate at hello@sullivandecarli.com. Consider subscribing to enjoy unlimited access to my articles and all of Medium through my referral link:

Join Medium with my referral link - Sullivan De Carli

Here is the full code: