Firebase实时数据库使用JavaScript在旧图像上发布

Question

I'm trying to make a simple web page just to play around with Firebase. I'm currently working on users uploading their photos and storing them as well as a reference to them in the database. I had a working version except the only issue was that if multiple users opened the page at the same time, only the most recent post would last. I wanted to use the realtime function to overcome this and have come up with this.

var postRef = firebase.database().ref('variables/postNumber');
postRef.on('value',function(snapshot) {
    var postName = snapshot.val();
    var uploader = document.getElementById('uploader');
    var filebutton = document.getElementById('filebutton');

    // get file

    filebutton.addEventListener('change', function(e) {
        var file = e.target.files[0];
        var ext = file.name.split('.').pop();;
        console.log(postName);
        console.log(ext);
        //create a storage ref
        var storageRef = firebase.storage().ref('posts/' + postName + "." + ext);

        var task = storageRef.put(file);
        publishPost(postName, ext);
        function publishPost(postName, ext) {
            firebase.database().ref('posts/' + postName).set({
                postID: postName,
                postDate: Date(),
                fileType : ext
            });
            firebase.database().ref('variables/').set({
                postNumber: postName + 1
            });
        }
        task.on('state_changed',

            function progress(snapshot){
                var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) *100;
                uploader.value = percentage;
            },
            function error(err){

            },
            function complete(postName, ext){
                uploader.value = 0;
                window.alert('Your meme Uploaded correctly');

            },
        );
    });
});

This works well, always updating the postName variable except when a new user posts, it will rewrite every post to the new post. For example, if user A posts a picture while user B was already on the page, then when user B posts, his post will upload twice the first time overriding user A's post. Can anyone shed some light on why this is happening? I was thinking of moving the listener to start the function but not sure if thats the right choice.

Answer 1

What happens is that the event listener is attached to the button every time new value is detected. Which means that the change event listener on filebutton cannot be in the observer at all.

Working code:

let postName = null;

var postRef = firebase.database().ref('variables/postNumber');

postRef.on('value', function(snapshot) {
  const value = snapshot.val();

  if (value === null) {
    // Handle error when no value was returned
    return;
  }

  postName = value;

});

var uploader = document.getElementById('uploader');
var filebutton = document.getElementById('filebutton');

filebutton.addEventListener('change', function(e) {
  if (postName === null) {
    // Handle the case then post name is still null (either wan't loaded yet or couldn't be loaded)
    return;
  }

  var file = e.target.files[0];
  var ext = file.name.split('.').pop();;

  //create a storage ref
  var storageRef = firebase.storage().ref('posts/' + postName + "." + ext);

  var task = storageRef.put(file);
  publishPost(postName, ext);
  function publishPost(postName, ext) {
    firebase.database().ref('posts/' + postName).set({
      postID: postName,
      postDate: Date(),
      fileType : ext
    });
    firebase.database().ref('variables/').set({
      postNumber: postName + 1
    });
  }
  task.on('state_changed', 
  function progress(snapshot){
    var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) *100;
    uploader.value = percentage;
  },
  function error(err){

  },
  function complete(postName, ext){
    uploader.value = 0;
    window.alert('Your meme Uploaded correctly');
  });
});