Как я могу предварительно просмотреть изображение с помощью SwiftUI перед загрузкой в ​​firebase?

Question

Я последовал этому руководству и смог успешно загрузить изображение в свое хранилище Firebase.

Проблема в том, что изображение загружается, даже если вы нажмете на него один раз. Пользователю не предоставляется возможность подтверждения, что, по моему мнению, не очень хорошо для UX.

Вот вся структура

struct imagePicker : UIViewControllerRepresentable{
    
    func makeCoordinator() -> imagePicker.Coordinator {
        return imagePicker.Coordinator(parent1: self)
    }
    
    @Binding var shown : Bool
    
    func makeUIViewController(context: UIViewControllerRepresentableContext<imagePicker>) ->
        UIImagePickerController {
            
        let imagepic = UIImagePickerController()
        imagepic.sourceType = .photoLibrary
        imagepic.delegate = context.coordinator
            
        return imagepic
    }
    
    func updateUIViewController(_ uiViewController: UIImagePickerController, context: UIViewControllerRepresentableContext<imagePicker>) {
        
    }
    
    class Coordinator : NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

        var parent : imagePicker!
        
        init(parent1: imagePicker ){
            parent = parent1
        }
        
        func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
            parent.shown.toggle()
        }
        
        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            
            let image = info[.originalImage] as! UIImage
        
            let storage = Storage.storage()
            let storingimage = storage.reference().child("temp.jpg")
            
            let metadata = StorageMetadata()
            metadata.contentType = "image/jpeg"
            
            storingimage.putData(image.jpegData(compressionQuality: 0.35)!, metadata: metadata)
            {(response,err) in
                if(err != nil){
                    print(err?.localizedDescription)
                }
                else{
                    // You can also access to download URL after upload.
                    storingimage.downloadURL { (url, error) in
                      guard let downloadURL = url else {
                        // Uh-oh, an error occurred!
                        
                        return
                      }
                        // upload to
                       // I plan on storing this URL downloadURL
                    }
                }
            }
        }
    }
}

Вот фрагмент моего представления контента

@State var showCaptureImageView = false

...

VStack{
     Button(action: {
         self.showCaptureImageView.toggle()
     }) {
         Text("Choose Photo")
     }

     if(self.$showCaptureImageView){
         imagePicker(shown: self.$showCaptureImageView)
     
         Spacer()

         Button(action: {
             // perform imageUpload here
         }, label: {
             Text("Upload Photo")
         })
     }
}

Я не знаю, как создать предварительный просмотр, потому что imagePicker работает в UIImage в этом контексте, который, я не думаю, может очень интуитивно представить себя как Image.

Answer 1

Я взял несколько советов здесь . По сути, мне нужно было изменить свой makeCoordinator(), добавив переменную изображения.

struct imagePicker {
    @Binding var shown: Bool
    @Binding var image: Image?

    func makeCoordinator() -> imagePicker.Coordinator {
        return imagePicker.Coordinator(parent1: self, image: $image)
    }

}

в contentView, теперь я могу прочитать возвращаемое значение

Snippet из моего VStack

if self.image != nil{
    self.image?.resizable()
    .frame(width: 250)
    .shadow(radius: 10)
    
}
if(self.showCaptureImageView){
    imagePicker(shown: self.$showCaptureImageView, image: self.$image)
}

и прямо под struct

@State var showCaptureImageView = false
@State var image: Image? = nil

Теперь пользователь может увидеть свою выбранную фотографию в предварительном просмотре.