Why does my UIImageView replace the second one?

Question

I have two outlets for two different UIImageViews, when I select the first one it'll appear on the first Image View but when I select the second Image, it replaces the first Image View even though it's connected to the second ImageView. This is my code for the Select Image button.

@IBOutlet weak var myImageView1: UIImageView!
@IBOutlet weak var myImageView2: UIImageView!


@IBAction func pickImage1(_ sender: Any) {

    let image = UIImagePickerController()
    image.delegate = self
    image.sourceType = UIImagePickerControllerSourceType.photoLibrary
    image.allowsEditing = false

    self.present(image, animated: true)
}

//Add didFinishPickingMediaWithInfo here
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
    if let image = info[UIImagePickerControllerOriginalImage] as? UIImage {
        myImageView1.image = image
    }
    else {
        //error
    }
    self.dismiss(animated: true, completion: nil)
}


@IBAction func pickImage2(_ sender: Any) {
    let image2 = UIImagePickerController()
    image2.delegate = self
    image2.sourceType = UIImagePickerControllerSourceType.photoLibrary
    image2.allowsEditing = false

    self.present(image2, animated: true)
}

//Add didFinishPickingMediaWithInfo here
func imagePickerController2(_ picker2: UIImagePickerController, didFinishPickingMediaWithInfo2 info2: [String : Any]) {
    if let image2 = info2[UIImagePickerControllerOriginalImage] as? UIImage {
        myImageView2.image = image2
    }
    else {
        //error
    }
    self.dismiss(animated: true, completion: nil)

}

Answer 1

Try this code. So you need a flag to remember which image view is clicked, and then set image base on that.

var selected = 1

@IBAction func pickImage1(_ sender: Any) {

    let image = UIImagePickerController()
    image.delegate = self
    image.sourceType = UIImagePickerControllerSourceType.photoLibrary
    image.allowsEditing = false
    selected = 1

    self.present(image, animated: true)
}

//Add didFinishPickingMediaWithInfo here
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
    if let image = info[UIImagePickerControllerOriginalImage] as? UIImage {
        if selected == 1 {
            myImageView1.image = image
        } else {
            myImageView2.image = image
        }
    }
    else {
        //error
    }
    self.dismiss(animated: true, completion: nil)
}


@IBAction func pickImage2(_ sender: Any) {
    let image2 = UIImagePickerController()
    image2.delegate = self
    image2.sourceType = UIImagePickerControllerSourceType.photoLibrary
    image2.allowsEditing = false
    selected = 2

    self.present(image2, animated: true)
}

Moving forward, when you have multiple image views, you can use another method to avoid copying code everywhere.

First, add an unique tag for each image view. Avoid using 0 because the default tag is 0. So you will have image views with tags say 1 to 4.

Call this same method to all your image views so that this function is trigger by clicking on any of them

let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(imageTapped(tapGestureRecognizer:)))
imageView.addGestureRecognizer(tapGestureRecognizer)

Handler looks like this

func imageTapped(tapGestureRecognizer: UITapGestureRecognizer)
{
    let image = UIImagePickerController()
    image.delegate = self
    image.sourceType = UIImagePickerControllerSourceType.photoLibrary
    image.allowsEditing = false
    let tappedImage = tapGestureRecognizer.view as! UIImageView
    selected = tappedImage.tag
    self.present(image, animated: true)
}

Finally in image pick delegate

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
    if let image = info[UIImagePickerControllerOriginalImage] as? UIImage {
        if let imageView = self.view.viewWithTag(selected) as? UIImageView {
            imageView.image = image
        }
    }
    else {
        //error
    }
    self.dismiss(animated: true, completion: nil)
}

Answer 2

The problem is that you have renamed the delegate method. If you do that, the method won't be recognized or called.

Another option to the selected answer is to extend UIImageView and have it adhere to UIImagePickerControllerDelegate / UINavigationControllerDelegate.

extension UIImageView: UIImagePickerControllerDelegate, UINavigationControllerDelegate {

     public func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
          guard let selectedImage = info[UIImagePickerControllerOriginalImage] as? UIImage else {
             //handle error
             return
         }

         image = selectedImage
         picker.presentingViewController?.dismiss(animated: true)
     }

     func presentImagePicker(from viewController: UIViewController) {
         let picker = UIImagePickerController()
         picker.delegate = self
         picker.sourceType = .photoLibrary
         picker.allowsEditing = false

         viewController.present(picker, animated: true)
     }
}

This is nice because you can then launch the image picker for any UIImageView in your app with one line, like so:

@IBAction func pickImage1(_ sender: UIButton) {
    myImageView1.presentImagePicker(from: self)
}