0

Firebase自体のYoutubeチュートリアルで画像をアップロードする方法については素敵なスクリプトが見つかりましたが、コードはサインインしたユーザーのために機能し、サインアップページでこれを行いたいと思います。私はここにイオン性の枠組みの下で午前Firebaseに登録する際にプロファイル写真をアップロードしてユーザに割り当てる方法は?

は、チュートリアルのコードです:

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



}]) 

あなたが見ることができるように、私は希望:

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

そして、ここには私のサインアップコントローラのコードがありますサインアップで最初のチュートリアルのコードを統合して、それを自分のUIDでユーザーのストレージに保存するのが好きですが、その方法を見つけることはできません。

+0

あなたはcreateUserWithEmailAndPasswordを介してユーザを作成した後、自分のプロフィールの写真をアップロードするユーザーに尋ねます。次にアップロードが完了したら、ユーザーのupdateProfileを呼び出してphotoURLを更新します。 – bojeil

答えて

1

//以下のコードは、テストされていないが、それは仕事をしたり、少なくとも を与える必要があります。//もしあなたの問題

.controller(「signupController」、[「$スコープ」をアプローチする方法のアイデア、 '$ state'、 '$ document'、 '$ firebaseArray'、 'C​​ONFIG'、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 

}; //エンド$スコープ。 doSignup()

}])

関連する問題