Norway


This blog post is more of a sheet type on how to use UIImagePickerController in with Firebase to upload a user profile image to Google cloud. I am also going to include here a video demonstration taken from my video course “Firebase and Swift: Practical examples“. This video will demonstrate the use of the below code when it was already added to a View Controller.

Whenever you need to look up a Swift code example on how to use UIImagePickerController, you can always come here and search SwiftDeveloperBlog by a keyword to find one of this kind of cheat sheets, copy and paste code snippet to your project and continue on it.

UIImagePickerControllerDelegate and UINavigationControllerDelegate

To be able to use a UIImagePickerController in your Swift class you will need to make your ViewController conform to a couple of delegates:

  • UIImagePickerControllerDelegate
  • UINavigationControllerDelegate
class MainPageViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate
{

  // other code
  override func viewDidLoad() {
    super.viewDidLoad()
  }
  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
  }

}

UIImagePickerController

I usually an present the UIImagePickerController to the user when they tap on a button. So below is an example of the function in Swift that:

  • Creates a new UIImagePickerController,
  • Sets the sourceType to UIImagePickerControllerSourceType.photoLibrary which means that users will need to pick their photo from a photo library on their phone rather than by taking a new picture. To make UIImagePickerController work with a Camera instead, set UIImagePickerControllerSourceType.camera as a sourceType.
  • And presents the UIImagePickerController to a user

Use Photo Library

@IBAction func setProfileImageButtonTapped(_ sender: Any) {
    let profileImagePicker = UIImagePickerController()
    profileImagePicker.sourceType = UIImagePickerControllerSourceType.photoLibrary
    profileImagePicker.mediaTypes = [kUTTypeImage as String]
    profileImagePicker.delegate = self
    present(profileImagePicker, animated: true, completion: nil)
}

Use Camera

@IBAction func setProfileImageButtonTapped(_ sender: Any) {

       let profileImagePicker = UIImagePickerController()
       profileImagePicker.allowsEditing = false
       profileImagePicker.sourceType = UIImagePickerControllerSourceType.camera
       profileImagePicker.cameraCaptureMode = .photo
       profileImagePicker.modalPresentationStyle = .fullScreen

       present(profileImagePicker, animated: true, completion: nil)
   }

Getting Image with the didFinishPickingMediaWithInfo

When the user selects their photo the below function will be called which will get the image data and pass it on to an image upload function.

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any])
{
    if let profileImage = info[UIImagePickerControllerOriginalImage] as? UIImage, let optimizedImageData = UIImageJPEGRepresentation(profileImage, 0.6)
    {
        // upload image from here
        uploadProfileImage(imageData: optimizedImageData)
    }
    picker.dismiss(animated: true, completion:nil)
}

Getting image as JPEG

Please note the use of UIImageJPEGRepresentation in the above function.

UIImageJPEGRepresentation(profileImage, 0.6)

the above line of code when executed will get a JPEG representation of your image and will optimize the quality of an image from 100% to 60%. For example, for the highest quality of image use 1 and for 50% of image quality use 0.5.

Getting image as PNG

If you need the PNG representation of this image use UIImagePNGRepresentation instead:

UIImagePNGRepresentation(profileImage, 0.6)

Handle the Cancel Button with imagePickerControllerDidCancel

When the user taps on the Cancel button to cancel and to dismiss the image picker the imagePickerControllerDidCancel function will be called and we can use it to dismiss the presenter to user image picker.

func imagePickerControllerDidCancel(_ picker: UIImagePickerController)
{
    picker.dismiss(animated: true, completion:nil)
}

Upload image to Firebase

You can use the below function to upload an image picked up by UIImagePickerController to a Firebase Cloud storage.

To be able to use the Firebase Cloud Storage and the below code example you will need to import into your View Controller the following library:

import Firebase

and add(using CocoaPods) the following dependencies to your Xcode project:

pod 'Firebase/Core'
pod 'Firebase/Auth'
pod 'Firebase/Storage'

Upload image function

func uploadProfileImage(imageData: Data)
    {
        let activityIndicator = UIActivityIndicatorView.init(activityIndicatorStyle: .gray)
        activityIndicator.startAnimating()
        activityIndicator.center = self.view.center
        self.view.addSubview(activityIndicator)
        
        
        let storageReference = Storage.storage().reference()
        let currentUser = Auth.auth().currentUser
        let profileImageRef = storageReference.child("users").child(currentUser!.uid).child("(currentUser!.uid)-profileImage.jpg")
        
        let uploadMetaData = StorageMetadata()
        uploadMetaData.contentType = "image/jpeg"
        
        profileImageRef.putData(imageData, metadata: uploadMetaData) { (uploadedImageMeta, error) in
           
            activityIndicator.stopAnimating()
            activityIndicator.removeFromSuperview()
            
            if error != nil
            {
                print("Error took place (String(describing: error?.localizedDescription))")
                return
            } else {
                
                self.userProfileImageView.image = UIImage(data: imageData)
                
                print("Meta data of uploaded image (String(describing: uploadedImageMeta))")
            }
        }
    }

Video Demonstration

The below video is taken from my video course called “Firebase and Swift: Practical examples“. This video demonstrates only the use of the above-mentioned code snippets. But if you check out the video course you will find step-by-step instructions on how the Image upload and the image display features are put together from the vebeginninging.

I hope this little cheat sheet will be of some value to you. If you are interested to learn more about Firebase and Swift, please check the list of video courses below. And hopefully one of them will be what you were looking for.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here