将downloadurl插入Firebase数据库父节点Web

Question

I want to display the uploaded image and convert to firebase download url and then store to firebase database table. Now my problem is I can't insert the download url to the my desired table.

heres my code

   var database = firebase.database();

                   database.ref('products/cooking/sugar/').on('child_added', function(data) {
                   add_data_table(data.val().brand,data.val().desc,data.val().price,data.val().pic,data.key);
                   var lastkey = data.key;
                   nextkey = parseInt(lastkey)+1;
                 });
                   database.ref('products/cooking/sugar/').on('child_changed', function(data) {
                   update_data_table(data.val().brand,data.val().desc,data.val().price,data.val().price,data.key)
                 });
                   database.ref('products/cooking/sugar/').on('child_removed', function(data) {
                   remove_data_table(data.key)
                 });  

                 function add_data_table(brand,price,desc,pic,key){
                   $("#card-list").append('<div class="column is-2" id="'+key+'"><div class="card"><div class="card-content"><div class="media"><div class="media-content"><p class="title is-2">'+brand+'</p><p class="subtitle is-4">@'+desc+'</p><p class="subtitle is-4">'+price+'</p></div></div></div><footer class="card-footer"><a href="#" data-key="'+key+'" class="card-footer-item btnEdit">Edit</a><a href="#" class="]card-footer-item btnRemove"  data-key="'+key+'">Remove</a></footer></div></div>');
                   }
                 function update_data_table(brand,price,desc,pic,key){
                   $("#card-list #"+key).append('<div class="card"><div class="card-image"><figure class="image is-4by3"><img src="'+pic +'"></figure></div><div class="card-content"><div class="media"><div class="media-content"><p class="title is-2">'+brand+'</p><p class="subtitle is-4">@'+desc+'</p><p class="subtitle is-4">'+price+'</p></div></div></div><footer class="card-footer"><a href="#" class="card-footer-item btnEdit"  data-key="'+key+'">Edit</a><a  data-key="'+key+'" href="#" class="card-footer-item btnRemove">Remove</a></footer></div>');
                   }
                 function remove_data_table(key){
                   $("#card-list #"+key).remove();
                   }
                 function new_data(brand,desc,price,pic,key){
                   database.ref('products/cooking/sugar/' + key).set({
                   brand: brand,
                   desc: desc,
                   price : price,
                   pic : pic
                   });
                   }
                 function update_data(brand,desc,price,pic,key){
                   database.ref('products/cooking/sugar/' + key).update({
                   brand: brand,
                   desc: desc,
                   price : price,
                   pic : pic
                   });
                   }
                 $( "#btnAdd" ).click(function() {
                 $("#txtbrand").val("");
                 $("#txtDesc").val("");
                 $("#txtPrice").val("");
                 $("#fileButton").val("");
                 $("#txtType").val("N");
                 $("#txtKey").val("0");
                 $( "#modal" ).addClass( "is-active" );
                 });
                 $("#btnSave" ).click(function() {
                 if($("#txtType").val() == 'N'){
                  database.ref('products/cooking/sugar/').once("value").then(function(snapshot) {
                 if(snapshot.numChildren()==0){
                   nextkey = 1;
                   }
                 new_data($("#txtbrand").val(),$("#txtDesc").val(),$("#txtPrice").val(),$("#fileButton").val(),nextkey);
                  });
                 }
                 else{
                  update_data($("#txtbrand").val(),$("#txtDesc").val(),$("#txtPrice").val(),$("#fileButton").val(),$("#txtKey").val());
                 }

                 $("#btnClose").click();
                  });

                 $(document).on("click",".btnEdit",function(event){
                 event.preventDefault();
                 key = $(this).attr("data-key");
                 database.ref('products/cooking/sugar/'+key).once("value").then(function(snapshot){
                   $("#txtbrand").val(snapshot.val().brand);
                   $("#txtDesc").val(snapshot.val().desc);
                   $("#txtPrice").val(snapshot.val().price); 
                    $("#fileButton").val(snapshot.val().pic); 
                   $("#txtType").val("E"); 
                   $("#txtKey").val(key); 
                   });
                   $( "#modal" ).addClass( "is-active" );
                 });
                 $(document).on("click",".btnRemove",function(event){
                   event.preventDefault();
                   key = $(this).attr("data-key");
                   database.ref('products/cooking/sugar/' + key).remove();
                   })

                 $( "#btnClose,.btnClose" ).click(function() {
                 $( "#modal" ).removeClass( "is-active" );
                 });

                // ============== Start of Upload Image ===================//
                  var Uploader = document.getElementById('Uploader');
                      var fileButton = document.getElementById('fileButton');

                      fileButton.addEventListener('change', function(e){
                        // Get File
                        var file = e.target.files[0];
                        // Create a storage ref
                        var storageRef = firebase.storage().ref('products/' + file.name);
                        //upload file
                        var task = storageRef.put(file);
                        //update progress bar
                        task.on('state_changed', 
                          function progress(snapshot){
                            var percentage = (snapshot.bytesTransferred / 
   snapshot.totalBytes) * 100;
                            uploader.value = percentage;
                          },
                          function error(err){
                          },
                          function complete(){
                          }
                        );
                      });

                      var storageRef = firebase.storage().ref();
                      var spaceRef = storageRef.child('products/'+file.name);
                       var spaceRef = firebase.database('products/');

 storageRef.child('products/'+file.name).getDownloadURL().then(function(url) 
 {
                      console.log("bsbdsbsdbd");
                      var test = url;
                      alert("hfdghjghj",url);
                  }).catch(function(error) { });

heres my firebase data

 {
 "7" : {
 "brand" : "fg",
 "desc" : "gfg",
 "pic" : "C:\\fakepath\\ocala-social-media-setup-1.png",
 "price" : "34"
 },
 "8" : {
 "brand" : "dhf",
 "desc" : "hj",
 "pic" : "",
 "price" : "67"
 }
}

i need to display the converted upload image into my html file. can anyone help me solve this. please.

Answer 1

If I understand you correctly,

fileButton.addEventListener('change', function(e) {
  // Get File
  var file = e.target.files[0];
  // Create a storage ref
  var storageRef = firebase.storage().ref('products/' + file.name);
  //upload file
  var task = storageRef.put(file);
  //update progress bar
  task.on('state_changed', function(snapshot){
    var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    uploader.value = percentage;
  },
  function(error) {
    console.error('Error', error);
  },
  function() {
    task.snapshot.ref.getDownloadURL().then(function(downloadURL) {
      console.log('downloadURL', downloadURL);
      // Save to your database
      firebase.database().ref('your/database/ref/').set({downloadURL: downloadURL});
    });
  });
});

CMIIW