0

Tal vez alguien me pueda ayudar con este código estoy tratando de grabar información en el database de firebase después de que subo un archivo al storage pero no graba solo sube el archivo y lo que deseo es que también guarde el url y el nombre del archivo en el database

window.onload = inicializar;

var fichero;
var storageRef;
var imagenesFBRef;

function inicializar() {
  fichero = document.getElementById("fichero");
  fichero.addEventListener("change",subirImagenAFirebase, false);
  storageRef = firebase.storage().ref();
  imagenesFBRef=firebase.database().ref().child("imagenesFB");


mostrarImagenesDeFirebase();

}
function mostrarImagenesDeFirebase(){
imagenesFBRef.on("value",function(snapshot){
var datos = snapshot.val();
var result="";
for (var key in datos){
  result +='<img width=200 class="img-thumbnail" src="'+datos[key].url+'"/>';
}
document.getElementById("imagenes-de-firebase").innerHTML=result;
})
}
function subirImagenAFirebase(){
var imagenASubir = fichero.files[0];
// Upload the file and metadata
var uploadTask = storageRef.child('images/' + imagenASubir.name).put(imagenASubir);
  document.getElementById("progreso").className="";

  uploadTask.on('state_changed',
  function(snapshot){
var barraProgreso = (snapshot.bytesTransferred / snapshot.totalBytes)*100;
document.getElementById("barra-de-progreso").style.width = barraProgreso + "%";
  }, function(error) {

    // Handle unsuccessful uploads
  }, function() {

    // Handle successful uploads on complete
    // For instance, get the download URL: https://firebasestorage.googleapis.com/...
    var downloadURL= uploadTask.snapshot.downloadURL;

firebase.database().ref().child('imagenesFB').push({nombre:imagenASubir.name, url:downloadURL});
    crearNodoEnBDFirebase(imagenASubir.name,downloadURL);

    document.getElementById("progreso").className="hidden";

    });

  function crearNodoEnBDFirebase(nombreImagen,downloadURL)  {
//firebase.database().ref('imagenesFB').push({nombre:nombreImagen, url:downloadURL});
imagenesFBRef.push({nombre:nombreImagen, url:downloadURL});

}
}
1
  • Jorge por favor formatea correctamente el codigo para que podamos verlo.
    – jirungaray
    Commented el 23 jul. 2018 a las 13:58

1 respuesta 1

0

A primera vista veo que no estas manejando el caso del upload exitoso, por eso no se ejecuta tu lógica. Según la documentación deberías implementar la subida como:

ref.put(archivo).then(function(snapshot) {
  <!-- hacer algo acá -->
});

Está medio desordenado el código pero creo que solo estas manejando STATE_CHANGED pero no la subida completa. Podrías confirmar si se llega a ejecutar la seccion de carga en la base de Firebase?

Como comentario te sugiero que veas la sección de Firebase functions, ya que tiene un ejemplo muy similar a lo que querés hacer y te podría ayudar a automatizar esta lógica.

5
  • Muchas gracias por la gentil respuesta, como mencione si sube el archivo en el storage, lo que no logro grabar es el url y el nombre del archivo en el database, conjuntamente, el codigo es el que he estado usando tal vez haciendo unos cambios pero si sube al storage. Commented el 24 jul. 2018 a las 13:27
  • si tuvieras un ejemplo, no necesariamente mi mismo codigo, te agradecería bastante mi estimado Commented el 24 jul. 2018 a las 13:28
  • Entendo que se sube el archivo, pero se llega a ejecutar en algun momento lo que esta debajo de // Handle successful uploads on complete ?
    – jirungaray
    Commented el 24 jul. 2018 a las 14:09
  • no justamente eso no se ejecuta Commented el 25 jul. 2018 a las 15:03
  • prueba implementando la version basica con el then() en mi respuesta. Tu codigo no esta indentado y se me complica revisarlo bien pero imagino que tenes algun parentesis o coma de mas en algun lado y por eso en realidad no tenes implementado el onSuccess
    – jirungaray
    Commented el 26 jul. 2018 a las 15:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.