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('');
});
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,
});
}
);
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments