How to upload and assign profile picture to user during registration with Firebase?

Question

I found a nice script via the Youtube tutorial of Firebase itself on how to upload a picture, however, the code works for an signed in user and I would like to do this on the sign up page.

I am under Ionic Framework so here is the code of the tutorial :

//Upload Profile Picture 
//Altered code from: Firebase Youtube Channel. 

      //Get Elements
      var uploader = document.getElementById('uploader');
      var fileButton = document.getElementById('fileButton');

      //Listen for file 
      fileButton.addEventListener('change', function(e){

         //Get File
         var file = e.target.files[0];


         //Create a Storage Ref
         var storageRef = firebase.storage().ref('profilePictures/' + file.name);

         //Upload file
         var task = storageRef.put(file);

         var user = firebase.auth().currentUser;        

         //Update Progress Bar 
         task.on('state_changed', 

         function progress(snapshot){
            var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) *100;
            uploader.value = percentage;

            //if percentage = 100
            //$(".overlay").hide();         
         },

         function error(err){

         },

         function complete(){

         }

       );           
    });


//Display Profile Picture   

function showUserDetails(){

   var user = firebase.auth().currentUser;
   var name, photoUrl;

   if (user != null) {
      name = user.displayName;
      photoUrl = user.photoURL;

      document.getElementById('dp').innerHTML=photoURL;
      document.getElementById('username').innerHTML=name;  
}}

And here is the code of my sign up controller :

.controller('signupController', ['$scope', '$state', '$document', '$firebaseArray', 'CONFIG', function($scope, $state, $document, $firebaseArray, CONFIG) {

$scope.doSignup = function(userSignup) {
    //console.log(userSignup);

    if($document[0].getElementById("cuser_name").value != "" && $document[0].getElementById("cuser_pass").value != ""){

        firebase.auth().createUserWithEmailAndPassword(userSignup.cusername, userSignup.cpassword).then(function() {
          // Sign-In successful.
          //console.log("Signup successful");
          var user = firebase.auth().currentUser;
              var database = firebase.database();
          //Upload Profile Picture
          //Altered code from: Firebase Youtube Channel.
          //Get Elements
          var uploader = document.getElementById('uploader');
          var fileButton = document.getElementById('fileButton');


          user.sendEmailVerification().then(function(result) { console.log(result) },function(error){ console.log(error)});

          firebase.database().ref().child('/accounts/' + user.uid).set({
                name: userSignup.displayname,
                email: userSignup.cusername,
          password: userSignup.cpassword,
          description: "No description for this user",
          facebook: "",
          twitter: "",

          }).then(function() {
            // Update successful.
            $state.go("login");
          }, function(error) {
            // An error happened.
            console.log(error);
          });






        }, function(error) {
          // An error happened.
          var errorCode = error.code;
          var errorMessage = error.message;
          console.log(errorCode);

          if (errorCode === 'auth/weak-password') {
             alert('Password is weak, choose a strong password.');
             return false;
          }else if (errorCode === 'auth/email-already-in-use') {
             alert('Email you entered is already in use.');
             return false;
          }




        });



    }else{

        alert('Please enter email and password');
        return false;

    }//end check client username password


  };// end $scope.doSignup()



}])

As you can see, I would like to integrate the first tutorial's code in the sign up and still attribute it to my user's storage with his UID but I can not find a way to do so... Any idea ?

Answer 1

// The code below has not been tested but it should work or at least give //you an idea of how to approach your issue

.controller('signupController', ['$scope', '$state', '$document', '$firebaseArray', 'CONFIG', function($scope, $state, $document, $firebaseArray, CONFIG) {

$scope.doSignup = function(userSignup) { //console.log(userSignup);

if($document[0].getElementById("cuser_name").value != "" && $document[0].getElementById("cuser_pass").value != "" && $document[0].getElementById("fileButton").value != ""){

    firebase.auth().createUserWithEmailAndPassword(userSignup.cusername, userSignup.cpassword).then(function() {

      // Sign-In successful.
      //console.log("Signup successful");
      var user = firebase.auth().currentUser;
          var database = firebase.database();

      //Upload Profile Picture
      //Altered code from: Firebase Youtube Channel.
      //Get Elements
      var uploader = document.getElementById('uploader');
      var fileButton = document.getElementById('fileButton');


    user.sendEmailVerification().then(function(result) { console.log(result) },function(error){ console.log(error)});

        //Get File
    var file = fileButton.value; // or however way the file path can be obtained
    var storageRef = firebase.storage().ref('profilePictures/' + file.name);

     //Upload file
     var task = storageRef.put(file);

     var user = firebase.auth().currentUser;        

     //Update Progress Bar 
     task.on('state_changed', 

     function progress(snapshot){
        var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) *100;
        uploader.value = percentage;

        //if percentage = 100
        //$(".overlay").hide();         
     },

     function error(err){

     },

     function complete(){

        //Obtain the URL for the uploaded photo
        var photoURL = task.snapshot.downloadURL;


          firebase.database().ref().child('/accounts/' + user.uid).set({
            name: userSignup.displayname,
            email: userSignup.cusername,
            photoURL: photoURL //add a photoURL attribute and assign it to the URL of the newly uploaded file
            password: userSignup.cpassword,
            description: "No description for this user",
            facebook: "",
            twitter: "",

      }).then(function() {
        // Update successful.
        $state.go("login");
      }, function(error) {
        // An error happened.
        console.log(error);
      });

     }

   );           
});

    }, function(error) {
      // An error happened.
      var errorCode = error.code;
      var errorMessage = error.message;
      console.log(errorCode);

      if (errorCode === 'auth/weak-password') {
         alert('Password is weak, choose a strong password.');
         return false;
      }else if (errorCode === 'auth/email-already-in-use') {
         alert('Email you entered is already in use.');
         return false;
      }

    });

}else{

    alert('Please enter email and password');
    return false;

}//end check client username password

};// end $scope.doSignup()

}])