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

VyTcdc

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('');
});
VyTcdc

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.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

img tag not showing image

From Dev

Upload image from URL to Firebase Storage

From Dev

Upload Facebook image URL to Firebase Storage

From Dev

Upload Facebook image URL to Firebase Storage

From Dev

Firebase Storage - Upload multiple image files in Android

From Dev

img src tag not displaying image

From Dev

background-image not displaying image - but <img tag is displaying image with same URL path

From Dev

Upload an image and refresh the img tag

From Dev

Image not showing up in img tag

From Dev

HTML img tag not showing the image

From Dev

Image not showing up in img tag

From Dev

Firebase storage download URL format

From Dev

Can I direcitly download an image to some cloud storage using an URL

From Dev

After upload a file in Android Firebase Storage how get the file download Url? getDownloadUrl() not working

From Dev

Base64 encoded or classic url when displaying a light image many times into a single web page

From Dev

Firebase Storage - URL for image services

From Dev

Firebase storage - Limit size of image that users upload to firebase storage

From Dev

Firebase storage - Limit size of image that users upload to firebase storage

From Dev

download text file from firebase storage and displaying on a web page

From Dev

How to check progress of image upload to Firebase storage

From Dev

Image Size Changed After Upload To Firebase Storage

From Dev

Image showing issue in firebase storage project

From Dev

Firebase download image from Storage directly

From Dev

Getting Download URL for Firebase Storage Files

From Dev

How to upload the public url for an image uploaded to the Firebase Cloud Storage to the Realtime Database

From Dev

Upload multiple file with different extension firebase storage

From Dev

Firebase Storage download multiple photos Urls

From Dev

Detect when image has loaded in img tag

From Dev

Php multiple image upload fails when i select many images

Related Related

  1. 1

    img tag not showing image

  2. 2

    Upload image from URL to Firebase Storage

  3. 3

    Upload Facebook image URL to Firebase Storage

  4. 4

    Upload Facebook image URL to Firebase Storage

  5. 5

    Firebase Storage - Upload multiple image files in Android

  6. 6

    img src tag not displaying image

  7. 7

    background-image not displaying image - but <img tag is displaying image with same URL path

  8. 8

    Upload an image and refresh the img tag

  9. 9

    Image not showing up in img tag

  10. 10

    HTML img tag not showing the image

  11. 11

    Image not showing up in img tag

  12. 12

    Firebase storage download URL format

  13. 13

    Can I direcitly download an image to some cloud storage using an URL

  14. 14

    After upload a file in Android Firebase Storage how get the file download Url? getDownloadUrl() not working

  15. 15

    Base64 encoded or classic url when displaying a light image many times into a single web page

  16. 16

    Firebase Storage - URL for image services

  17. 17

    Firebase storage - Limit size of image that users upload to firebase storage

  18. 18

    Firebase storage - Limit size of image that users upload to firebase storage

  19. 19

    download text file from firebase storage and displaying on a web page

  20. 20

    How to check progress of image upload to Firebase storage

  21. 21

    Image Size Changed After Upload To Firebase Storage

  22. 22

    Image showing issue in firebase storage project

  23. 23

    Firebase download image from Storage directly

  24. 24

    Getting Download URL for Firebase Storage Files

  25. 25

    How to upload the public url for an image uploaded to the Firebase Cloud Storage to the Realtime Database

  26. 26

    Upload multiple file with different extension firebase storage

  27. 27

    Firebase Storage download multiple photos Urls

  28. 28

    Detect when image has loaded in img tag

  29. 29

    Php multiple image upload fails when i select many images

HotTag

Archive