Wie kann ich einem Benutzer ein Profilbild während der Registrierung bei Firebase hochladen und zuweisen?

Question

Ich fand ein nettes Skript über das Youtube-Tutorial von Firebase selbst, wie man ein Bild hochlädt, der Code funktioniert jedoch für einen angemeldeten Benutzer und ich möchte dies auf der Anmeldeseite tun.

ich unter Ionic Rahmen bin so hier ist der Code des Tutorials:

//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; 
}} 

Und hier ist der Code meines Anmelde 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() 



}]) 

Wie Sie sehen können, würde ich Ich mag es, den Code des ersten Tutorials in die Anmeldung zu integrieren und ihn trotzdem dem Speicher meines Benutzers mit seiner UID zuzuweisen, aber ich finde keinen Weg dazu ... Irgendeine Idee?

Answer 1

// Der Code ist unten nicht getestet, aber es sollte oder zumindest geben arbeiten // Sie eine Vorstellung davon, wie Ihr Problem

.Controller (‚signupController‘ zu nähern, [ ‚$ Anwendungsbereich‘ '$ state', '$ document', '$ fireBaseArray', 'CONFIG', Funktion ($ 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 

} // Ende $ Umfang. doSignup()

}])