Javascript 在Firebase注册期间,如何上传和分配配置文件图片给用户?

Javascript 在Firebase注册期间,如何上传和分配配置文件图片给用户?,javascript,firebase,ionic-framework,firebase-authentication,firebase-storage,Javascript,Firebase,Ionic Framework,Firebase Authentication,Firebase Storage,我通过Firebase本身的Youtube教程找到了一个关于如何上传图片的不错的脚本,但是,该代码适用于已登录的用户,我想在注册页面上这样做 我在爱奥尼亚框架下,以下是本教程的代码: //Upload Profile Picture //Altered code from: Firebase Youtube Channel. //Get Elements var uploader = document.getElementById('uploader');

我通过Firebase本身的Youtube教程找到了一个关于如何上传图片的不错的脚本,但是,该代码适用于已登录的用户,我想在注册页面上这样做

我在爱奥尼亚框架下,以下是本教程的代码:

//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;  
}}
这是我的注册控制器的代码:

.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()



}])

如您所见,我想在注册中集成第一个教程的代码,并仍然将其与用户的UID一起归属到用户的存储中,但我找不到这样做的方法。。。有什么想法吗?

//下面的代码还没有经过测试,但它应该可以工作,或者至少可以提供 //你知道如何处理你的问题吗

.controller('signupController'、['$scope'、'$state'、'$document'、'$firebaseArray','CONFIG',函数($scope、$state、$document、$firebaseArray,CONFIG){

$scope.doSignup=函数(userSignup){ //console.log(userSignup)

};//end$scope.doSignup()


}])

通过CreateUserWithEmail和Password创建用户后,请用户上传其个人资料图片。然后在上传完成后,调用用户的updateProfile来更新photoURL。
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