Summary

The article provides a tutorial on implementing a photo picker in SwiftUI for iOS applications, demonstrating how to use the PhotosPicker view, handle image selection, and display the chosen image without needing special permissions for iOS 16+.

Abstract

The article titled "Photos Picker using SwiftUI" guides developers through the process of integrating a photo picker into their SwiftUI-based iOS applications. It highlights the simplicity of using the PhotosPicker view introduced in iOS 16, which operates out of process and thus does not require additional library permissions. The author explains the necessary import statements, structuring of the PhotoPickerView, and the use of @State properties to manage image selection. The tutorial progresses to demonstrate how to handle the selected PhotosPickerItem, extract image data using the loadTransferable method, and conditionally display the selected image or a placeholder within the user interface. The article concludes with a complete code example and encourages readers to explore further with a related article on photo library permissions in SwiftUI.

Opinions

The author suggests that using PhotosPicker in SwiftUI is straightforward and efficient for iOS 16 and above.
The PhotosPicker view is praised for its ability to run out of process, simplifying the permission process for developers.
The article implies that the loadTransferable method is a reliable way to retrieve image data from the PhotosPickerItem.
The inclusion of a related article on photo library permissions indicates the author's view that understanding permissions is important for developers working with media in iOS applications.
The tutorial is structured to be easy to follow, with code snippets provided for each step of the implementation process.

Photos Picker using SwiftUI

In this article, we will check how can we use Photos Picker with SwiftUI. Picker runs out of process hence we don’t need any special library permissions to use it in our apps. If you are supporting iOS 16+ then you can directly use PhotosPicker. Let’s see how can we do it.

import PhotosUI
import SwiftUI

struct PhotoPickerView: View {
    @State var wallpaper: PhotosPickerItem?
    
    var body: some View {
        PhotosPicker(selection: $wallpaper) {
            Label("Select a photo", systemImage: "photo")
        }
    }
}

That’s all we need to do to open the photo picker in SwiftUI. Now we will see how we handle selected images. For this, let’s add an ImageView and set it with the image selected by the user.

var body: some View {
        VStack {
            Image(systemName: "photo")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .padding()
            Spacer()
            PhotosPicker(selection: $wallpaper) {
                Label("Select a photo", systemImage: "photo")
            }
        }
    }

Now, How do we extract images from selected PhotosPickerItem?

For getting image data from PhotosPickerItem we can use the loadTransferable method defined in PhotosPickerItem.

Create one variable to hold the data object representing the picked image and mark it with @State to update UI when the view is changed.

@State private var image: Data?

If data is present then use it to create the image and show it else show a placeholder image.

    var body: some View {
        VStack {
            if let image = self.image,
               let image = UIImage(data: image) {
                Image(uiImage: image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .padding()
            } else {
                Image(systemName: "photo")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .padding()
            }
            Spacer()
            PhotosPicker(selection: $wallpaper) {
                Label("Select a photo", systemImage: "photo")
            }.onChange(of: wallpaper) { oldValue, newValue in
                Task {
                    if let image = try? await newValue?.loadTransferable(type: Data.self) {
                        self.image = image
                    }
                }
            }
        }
    }

Final Code:

import SwiftUI
import PhotosUI

struct ContentView: View {
    @State var wallpaper: PhotosPickerItem?
    @State private var image: Data?
    
    var body: some View {
        VStack {
            if let image = self.image,
               let image = UIImage(data: image) {
                Image(uiImage: image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .padding()
            } else {
                Image(systemName: "photo")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .padding()
            }
            Spacer()
            PhotosPicker(selection: $wallpaper) {
                Label("Select a photo", systemImage: "photo")
            }.onChange(of: wallpaper) { oldValue, newValue in
                Task {
                    if let image = try? await newValue?.loadTransferable(type: Data.self) {
                        self.image = image
                    }
                }
            }
        }
    }
}

That’s it, folks. Hope it helps.

See ya 👋🏻

A few days back I wrote a similar article on the use of PhotosUI.

rajeshbudhiraja5.medium.com

Photos Picker using SwiftUI

Photo Library Permissions: SwiftUI

A few days back I wrote a similar article on the use of PhotosUI.