My Swift app uses TOCropViewController to pick images. The struct which handles the image picking and cropping is called ImagePicker.
The view from which ImagePicker is called is a sheet view. When I call ImagePicker, everything works perfectly, the image picking screen comes up, I press the cancel button and the image picking screen is dismissed nicely.
When I select an image, I go to the cropview. From here, if I press cancel, everything works as I want, but if I press done, the image I selected and cropped is not sent back to the view where I called ImagePicker as I want it.
Alongside the issue of my image not being sent back, my ImagePicker views, both the cropview and the image picking view, they don't dismiss well.
Since the view where I call the ImagePicker is a sheet, the sheet becomes raised when I click done, and I can see what is underneath the sheet view. Everything on the screen becomes unclickable.
This is how the sheet view where I call the ImagePicker from looks after I click done
Please help me with this.
Here's the ImagePicker.swift file:
import SwiftUI
import UIKit
import TOCropViewController
struct ImagePicker: UIViewControllerRepresentable {
@Environment(\.presentationMode) var presentationMode
@Binding var image: UIImage?
var didFinishPicking: () -> Void
var aspectRatioPreset: TOCropViewControllerAspectRatioPreset
class Coordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate, TOCropViewControllerDelegate {
var originalPicker: UIImagePickerController?
@Binding var image: UIImage?
var didFinishPicking: () -> Void
var aspectRatioPreset: TOCropViewControllerAspectRatioPreset
var presentingViewController: UIViewController?
init(image: Binding<UIImage?>, didFinishPicking: @escaping () -> Void, aspectRatioPreset: TOCropViewControllerAspectRatioPreset, presentingViewController: UIViewController?) {
_image = image
self.didFinishPicking = didFinishPicking
self.aspectRatioPreset = aspectRatioPreset
self.presentingViewController = presentingViewController
}
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
guard let image = info[.originalImage] as? UIImage else {
picker.dismiss(animated: true, completion: nil)
return
}
let cropViewController = TOCropViewController(image: image)
cropViewController.delegate = self
cropViewController.aspectRatioPreset = aspectRatioPreset
cropViewController.aspectRatioLockEnabled = true
originalPicker = picker
picker.present(cropViewController, animated: true, completion: nil)
}
func cropViewController(_ cropViewController: TOCropViewController, didCropTo croppedImage: UIImage, withRect cropRect: CGRect, angle: Int) {
self.image = croppedImage
cropViewController.dismiss(animated: true) {
self.originalPicker?.dismiss(animated: true, completion: {
self.didFinishPicking()
})
}
}
func cropViewController(_ cropViewController: TOCropViewController, didFinishCancelled cancelled: Bool) {
if cancelled {
cropViewController.dismiss(animated: true) {
self.originalPicker?.dismiss(animated: true, completion: {
self.didFinishPicking()
})
}
}
}
}
func makeCoordinator() -> Coordinator {
return Coordinator(image: $image, didFinishPicking: didFinishPicking, aspectRatioPreset: aspectRatioPreset, presentingViewController: UIApplication.shared.windows.first?.rootViewController)
}
func makeUIViewController(context: Context) -> UIImagePickerController {
let picker = UIImagePickerController()
picker.delegate = context.coordinator
return picker
}
func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {
}
}
struct ImagePicker_Previews: PreviewProvider {
static var previews: some View {
ImagePicker(image: .constant(UIImage()), didFinishPicking: {}, aspectRatioPreset: .presetSquare) // Specify aspectRatioPreset here
}
}
Here is the struct where ImagePicker is called:
struct ImageView: View {
@State private var showingImagePicker = false
@State private var linkImage: UIImage? = UIImage(named: "defaultLinkImage")
@State private var linkImageURL: String = ""
@State private var previousLinkImageURL: String = ""
@State private var showAlert = false
let defaultLinkImage = UIImage(named: "defaultLinkImage")
let selectedDate: String
let selectedGender: String
let selectedPreference: String
var body: some View {
GeometryReader { geometry in
ZStack {
Color.black
.ignoresSafeArea()
VStack {
Text("Add a great picture of you.")
.font(.custom("Futura-Bold", size: geometry.size.width * 0.1))
.foregroundColor(.white)
.multilineTextAlignment(.center)
.lineLimit(2)
.minimumScaleFactor(0.5)
.layoutPriority(1)
.padding()
Button(action: {
HapticManager.shared.triggerHapticFeedback()
self.showingImagePicker = true
}) {
Image(uiImage: linkImage!)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 300, height: 400)
.clipShape(RoundedRectangle(cornerRadius: 25))
.overlay(RoundedRectangle(cornerRadius: 25).stroke(Color.white, lineWidth: 4))
.shadow(color: .gray, radius: 10, x: 5, y: 5)
.shadow(color: .white, radius: 10, x: -5, y: -5)
.padding(.bottom, 20)
}
if linkImage == defaultLinkImage {
Button(action: {
HapticManager.shared.triggerHapticFeedback()
self.showAlert = true
}) {
Text("Continue.")
.font(.custom("Futura-Bold", size: 20))
.padding()
.background(Color.gray)
.foregroundColor(.white)
.clipShape(Capsule())
.alert(isPresented: $showAlert) {
Alert(title: Text("Error"), message: Text("Please choose a picture before proceeding."), dismissButton: .default(Text("Gotcha.")))
}
}
.padding()
} else {
NavigationLink(destination: CompleteView(date: self.selectedDate, gender: self.selectedGender, preferences: selectedPreference, imageURL: URL(string: linkImageURL))) {
Text("Continue.")
.font(.custom("Futura-Bold", size: 20))
.padding()
.background(Color.accentColor)
.foregroundColor(.white)
.clipShape(Capsule())
}
.padding()
.onTapGesture {
uploadData()
}
}
}
}
}
.sheet(isPresented: $showingImagePicker, onDismiss: loadImage) {
ImagePicker(image: self.$linkImage, didFinishPicking: {
self.showingImagePicker = false
}, aspectRatioPreset: .preset4x3)
}
.navigationBarBackButtonHidden(true)
}
func loadImage() {
guard let inputImage = linkImage else { return }
// Delete previous profile picture if exists
if !previousLinkImageURL.isEmpty {
deletePreviousLinkPicture(previousURL: previousLinkImageURL)
}
// Create a unique file name
let fileName = UUID().uuidString
let folderPath = "Link_Pictures/"
let storageRef = Storage.storage().reference().child(folderPath + fileName)
guard let imageData = inputImage.jpegData(compressionQuality: 0.5) else { return }
// Metadata
let metadata = StorageMetadata()
metadata.contentType = "image/jpeg"
// Upload the file to Firebase Storage
storageRef.putData(imageData, metadata: metadata) { _, error in
if let error = error {
print("Error uploading: \(error.localizedDescription)")
return
}
// After the file is uploaded, get the download URL.
storageRef.downloadURL { (url, error) in
guard let downloadURL = url else {
print("An error occurred while getting the download URL")
return
}
self.linkImageURL = downloadURL.absoluteString
self.previousLinkImageURL = downloadURL.absoluteString // Store the current profile image URL as the previous URL
// Call the uploadData method after getting the image URL
uploadData()
}
}
}
func deletePreviousLinkPicture(previousURL: String) {
// Get the storage reference from the previous URL
let storageRef = Storage.storage().reference(forURL: previousURL)
// Delete the file from Firebase Storage
storageRef.delete { error in
if let error = error {
print("Error deleting picture: \(error.localizedDescription)")
} else {
print("Previous picture deleted successfully")
}
}
}
func uploadData() {
// Call the LinkRegLogic uploadData method
LinkRegLogic.uploadData(date: self.selectedDate, gender: self.selectedGender, preferences: self.selectedPreference, imageURL: linkImageURL)
}
}
Thank you so much for helping, I'm a beginner in SwiftUI, and I really appreciate this.
I tried rewriting my functions in ImagePicker with some help from ChatGPT but I got nowhere.
Also, if you can make this work with another image picking and cropping framework other than TOCropViewController, while ensuring that I can change the size of the crop overlay as a parameter when ImagePicker is called, that would also be fantastic, I'm not particularly attached to TOCropViewController.
P.S. I also use ImagePicker to pick images in views which are not sheets.