How to select multiple photos and show them on the screen?

Question

My app is crashing after adding multiple photos:

import SwiftUI
import PhotosUI
import CoreTransferable

struct ContentView: View {
    
    @State var imageData: Data?
    @State var selectedItems: [PhotosPickerItem] = []
    
    var body: some View {
        
        VStack {
            if let imageData, let uiImage = UIImage(data: imageData) {
                Image(uiImage: uiImage)
                       .resizable()
                       .scaledToFit()
                       .frame(width: 250, height: 250)
            }
            Spacer()
            PhotosPicker(selection: $selectedItems,
                         matching: .images) {
                Text("Pick Photo")
            }
            .onChange(of: selectedItems) { selectedItems in
                
                if let selectedItem = selectedItems.first {

                    selectedItem.loadTransferable(type: Data.self) { result in
                        switch result {
                        case .success(let imageData):
                            if let imageData {
                                self.imageData = imageData
                            } else {
                                print("No supported content type found.")
                            }
                        case .failure(let error):
                            fatalError(error.localizedDescription)
                        }
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Selection of multiple photos is working totally fine and this code can preview first photo very cleanly.
Is there any other way I can show selected multiple photos in SwiftUI?

Answer 1

You just need to change the imageData to be an array.

import SwiftUI
import PhotosUI
import CoreTransferable

@available(iOS 16.0, *)
struct MultipleSelectView: View {        
    @State var images: [UIImage] = []
    @State var selectedItems: [PhotosPickerItem] = []
    
    var body: some View {
        
        VStack {
            ForEach(images, id:\.cgImage){ image in
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 250, height: 250)
            }
            Spacer()
            PhotosPicker(selection: $selectedItems,
                         matching: .images) {
                Text("Pick Photo")
            }
                         .onChange(of: selectedItems) { selectedItems in
                             images = []
                             for item in selectedItems {
                                 item.loadTransferable(type: Data.self) { result in
                                     switch result {
                                     case .success(let imageData):
                                         if let imageData {
                                             self.images.append(UIImage(data: imageData)!)
                                         } else {
                                             print("No supported content type found.")
                                         }
                                     case .failure(let error):
                                         print(error)
                                     }
                                 }
                             }
                         }
        }
    }
}
@available(iOS 16.0, *)
struct MultipleSelectView_Previews: PreviewProvider {
    static var previews: some View {
        MultipleSelectView()
    }
}