0

我發現了一個很好的腳本,通過Firebase的Youtube教程瞭解如何上傳圖片,但是,該代碼適用於登錄用戶,我希望在註冊頁面上執行此操作。如何在註冊Firebase期間上傳和分配個人資料圖片?

我下離子框架所以這裏是本教程的代碼:

//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將它歸入我的用戶存儲中,但是我找不到這樣做的方法......任何想法?

+0

在創建通過createUserWithEmailAndPassword用戶,要求用戶上傳自己的資料圖片。然後在上傳完成時,調用用戶的updateProfile來更新photoURL。 – bojeil

回答

1

//下面的代碼沒有經過測試,但它應該工作,或至少給 //你如何處理你的問題

.controller(「signupController」,[「$範圍」的想法, ($ scope,$ state,$ document,$ firebaseArray,CONFIG){$ state' //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 

}; //結束$範圍。 doSignup()

}])

相關問題