13.2. Uploading the Picked Photo to Firebase Storage

We need to update the RegisterFirebaseManager.swift file to upload the picked photo to Firebase Storage.

Firebase operations are asynchronous network calls. So we have to be very careful about the sequence of operations. We need to maintain the following sequence:

1. Upload the picked image to Firebase Storage. We have to wait until the upload is successful and fetch the download URL of that photo.

2. Once the image upload is successful, we create the account with the email and password. We have to wait until the account is successfully created.

3. Once the account is created, we update the profile with the user's name and photo URL.

So we will overhaul the whole RegisterFirebaseManager.swift file. But before we do, we need to import the FirebaseStorage library and create a Firebase Storage instance in RegisterViewController.swift file, like the following:

//
//  RegisterViewController.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

import FirebaseStorage

class RegisterViewController: UIViewController {
    //codes omitted...
    let storage = Storage.storage()
    //codes omitted...
}

Uploading a File to Storage: RegisterFirebaseManager.swift

Let's open the RegisterFirebaseManager.swift file and write the following code:

//
//  RegisterFirebaseManager.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

import Foundation
import FirebaseAuth
import FirebaseStorage

extension RegisterViewController{    
    func uploadProfilePhotoToStorage(){
        var profilePhotoURL:URL?
        
        //MARK: Upload the profile photo if there is any...
        if let image = pickedImage{
            if let jpegData = image.jpegData(compressionQuality: 80){
                let storageRef = storage.reference()
                let imagesRepo = storageRef.child("imagesUsers")
                let imageRef = imagesRepo.child("\(NSUUID().uuidString).jpg")
                
                let uploadTask = imageRef.putData(jpegData, completion: {(metadata, error) in
                    if error == nil{
                        imageRef.downloadURL(completion: {(url, error) in
                            if error == nil{
                                profilePhotoURL = url
                                self.registerUser(photoURL: profilePhotoURL)
                            }
                        })
                    }
                })
            }
        }else{
            registerUser(photoURL: profilePhotoURL)
        }
    }
    
    func registerUser(photoURL: URL?){
        if let name = registerView.textFieldName.text,
           let email = registerView.textFieldEmail.text,
           let password = registerView.textFieldPassword.text{
            Auth.auth().createUser(withEmail: email, password: password, completion: {result, error in
                if error == nil{
                    self.setNameAndPhotoOfTheUserInFirebaseAuth(name: name, email: email, photoURL: photoURL)
                }
            })
        }
    }
    
    func setNameAndPhotoOfTheUserInFirebaseAuth(name: String, email: String, photoURL: URL?){
        let changeRequest = Auth.auth().currentUser?.createProfileChangeRequest()
        changeRequest?.displayName = name
        changeRequest?.photoURL = photoURL
        
        print("\(photoURL)")
        changeRequest?.commitChanges(completion: {(error) in
            if error != nil{
                print("Error occured: \(String(describing: error))")
            }else{
                self.hideActivityIndicator()
                self.navigationController?.popViewController(animated: true)
            }
        })
    }
}

In the above code:

• We are following the sequence we talked about before.

• We extend RegisterViewController class.

• On line 10, we import the FirebaseStorage library.

• On lines 13 through 37, we upload the pickedImage.

  • Since picking a profile photo is optional for the user, we might not have a selected image. So if there is no image selected (lines 34 through 36), we directly jump to registerUser(photoURL: profilePhotoURL) method.

  • If the user picked an image (lines 18 through 33):

    • Line 18: We first get a jpeg image from the picked image. (I set the compression quality to 80%, but you can set it anywhere between 70-95%. The higher the number is, the more space it takes in the storage).

    • Line 19: We initiate the Firebase Storage.

    • Line 20: We create a folder named imagesUsers in the storage bucket.

    • Line 21: We want to add a new file in the imageUsers folder, right? The file new file is the image we picked. We must provide the file's name when we upload it to Firebase Storage. Here we create a unique name for the file using NSUUID().uuidString. NSUUID() is the iOS's default Universal Unique Identifier (UUID) generator. It generates 128-bit long unique IDs. We get the string value of that random UUID and name the jpeg file with it.

    • Lines 23 through 32: we upload the image to the Storage.

      • We are uploading the file using putData() method on line 23. The completion closure deals with the response from Firebase Storage.

      • On line 24, we check if the response is successful or not.

        • Now on line 25, we make a separate network call to fetch the download URL of the uploaded image.

        • On line 26, we check whether the downloadURL() call returns an error or not.

          • If the download URL is returned successfully, then we save the URL locally in variable profilePhotoURL.

          • And then, to maintain the sequence of operations correctly, we call the registerUser() method to register the new user with the uploaded photo.

• Lines 39 through 49: we create the user as before. Then on success, we call the setNameAndPhotoOfTheUserInFirebaseAuth(name: name, email: email, photoURL: photoURL) method to update the user profile.

• Lines 51 through 65: Then we create a changeRequest as before to update the current user profile. We set the value of photoURL parameter of the user profile to the download URL we fetched.

  • Lines 60 through 63: If the profile update is successful, we pop the current screen from the navigation controller.

  • (We also hide the progress activity indicator).

Now uploading files to Firebase Storage code is ready!

We must patch the RegisterViewController.swift file to call these sequence operations correctly.

RegisterViewController.swift

Let's open the RegisterViewController.swift file again, and scroll down to @objc func onRegisterTapped() method. Let's put the following code in the method:

@objc func onRegisterTapped(){
    //MARK: creating a new user on Firebase with photo...
    showActivityIndicator()
    uploadProfilePhotoToStorage()
}

Here we are just displaying the progress activity indicator, and then calling the first method of the sequence of operations.

Now! If you run the app again, you'll see:

Let's look into the FirebaseStorage console:

So the files are getting uploaded. Now we need to display the images, and then it's done.