当我将图像上传到Firebase存储并检索下载URL并显示在img标签中时，它显示多次

Question

I am uploading an image to firebase storage and again storing the URL path in the firebase database. However when I upload the first time it is displaying a single time, but when I upload again to the gallery and select an image it is displaying two times. If again I go to the gallery and select an image it is displaying three times. Please guide me how to solve this.

<img id="image5e" src="img/upload.png" />
<input type='file' style="display:none;" name="photosubmit" id="photosubmit"/>

var app = {
    initialize: function() {
        app.bindEvents();    
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
         var uploadimg = document.getElementById("image5e");
         uploadimg.addEventListener("click",app.upload2gallery,false); 
    },         
    upload2gallery: function() {
     $("#photosubmit").click();

     var filebutton = document.getElementById("photosubmit");
     filebutton.addEventListener('change', function(e) {
         var file = e.target.files[0];    
         var storageRef = firebase.storage().ref('sweet_gift/' + file.name);    
         var task = storageRef.put(file);

         task.on('state_changed', function progress(snapshot) {
            var load = '<h1>Please Wait</h1>' + '<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span>Loading ...</span>';
            $.mobile.loading('show', {
                text: 'Please wait...',
                textVisible: true,
                html: load,
                theme: 'z'
            });
        }, function error(err) {
        }, function complete() {
            $.mobile.loading('hide');

            var uni = localStorage.getItem("lunicode");
            var ref = firebase.database().ref(uni);
            var myname = storage.getItem("uname");
            var myid = storage.getItem("myid");
            var downloadURL = task.snapshot.downloadURL;
            ref.push({
                name: myname,
                imageurl: downloadURL,
                photoUrl: "/images/profile_placeholder.png",
                my_id: myid,
            });
        });
    });
},

$(document).on('pagebeforeshow', '#chatpage', function() {
    var uni = localStorage.getItem("lunicode");
    var ref = firebase.database().ref(uni);

    $("#images6").empty();

    ref.orderByChild("messages").on("child_added", function(snapshot) {
        $("#images6").append(movielist(snapshot.val()));
        var last_li = $(".cmsg li:last-child").offset().top;
        setTimeout(function() {
            $.mobile.silentScroll(last_li);
        }, 50);
        ActivityIndicator.hide();
    });
});

$(document).on('pagebeforehide', '#chatpage', function() {
    alert("going");
    var uni = localStorage.getItem("lunicode");
    var ref = firebase.database().ref(uni);
    $("#images6").empty();
    //ActivityIndicator.show();
    ref.orderByChild("messages").off("child_added");
    //ActivityIndicator.hide();
    $('#cmessage').val('');
});

Answer 1

As per Firebase Google support Engineer Sugestion, I put the bellow Event listner inside the DeviceReady function and it resolved the issue to me.

Google Sugestion bellow

[Can you move registering the file change handler on onDeviceReady? If you put it in upload2gallery, each time you click on the image, upload2gallery will be called, and so you are registering the file change event again, which results to your problem.]

var filebutton = document.getElementById("photosubmit");
 filebutton.addEventListener('change', function(e) {
     //Get The File
     var file = e.target.files[0];
     var storageRef = firebase.storage().ref('sweet_gift/' + file.name);
     var task = storageRef.put(file);
     task.on('state_changed',
         function progress(snapshot) {

             var load = '<h1>Please Wait</h1>' +
                 '<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> <span>Loading ...</span>';
             $.mobile.loading('show', {
                 text: 'Please wait...',
                 textVisible: true,
                 html: load,
                 theme: 'z'
             });
         },
         function error(err) {

         },
         function complete() {
             $.mobile.loading('hide');
             var uni = localStorage.getItem("lunicode");
             var ref = firebase.database().ref(uni);
             var myname = storage.getItem("uname");
             var myid = storage.getItem("myid");
             var downloadURL = task.snapshot.downloadURL;
             ref.push({
                 name: myname,
                 imageurl: downloadURL,
                 photoUrl: "/images/profile_placeholder.png",
                 my_id: myid,
             });
         }
     );

 });