web-dev-qa-db-fra.com

Téléchargements d'utilisateur et images de profil Firebase

Bonjour à la recherche d'aide,

J'ai actuellement du code JavaScript qui permet à un utilisateur connecté de télécharger une image sur le stockage Firebase. Je veux que l'image qu'ils téléchargent soit leur photo de profil, mais je ne semble pas être en mesure de lier l'image téléchargée à l'utilisateur spécifique?

Cela fonctionne, je peux voir l'image téléchargée dans la console, mais rien pour identifier quel utilisateur l'a téléchargée.

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

J'ai vu le code ci-dessous dans la documentation Firebase, mais je ne comprends pas comment mettre à jour l'image URL de la photo ou l'afficher.

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

if (user != null) {
   name = user.displayName;
   email = user.email;
   photoUrl = user.photoURL;
   uid = user.uid; // The user's ID, unique to the Firebase project. Do NOT use
    // this value to authenticate with your backend server, if
    // you have one. Use User.getToken() instead.
}

Merci d'avance pour toute aide ou conseil.

javascriptfirebasefirebase-storage
11
imconnor

Vous voudrez stocker les fichiers par nom d'utilisateur:

// Get current username
var user = firebase.auth().currentUser;

// Create a Storage Ref w/ username
var storageRef = firebase.storage().ref(user + '/profilePicture/' + file.name);

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

Donc, si l'utilisateur est user:12345 et le nom du fichier est profile.jpg, le fichier sera enregistré sous user:12345/profilePicture/profile.jpg. Vous pouvez protéger cela avec Règles de sécurité comme suit:

service firebase.storage {
  match /b/<your-firebase-storage-bucket>/o {
    match /{userId}/profilePicture/{fileName} {
      // Anyone can read
      allow read;
      // Only the user can upload their own profile picture
      // Profile picture must be of content-type "image/*"
      allow write: if request.auth.uid == userId
                   && request.resource.contentType.matches('image/.+');
    }
  }
}
20
Mike McDonald