VyTcdc VyTcdc - 17 days ago 15
jQuery Question

When I upload an image to firebase storage and retriving the download url and displaying in img tag but it is showing multiple times

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

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,
             });
         }
     );

 });