Subir Imágenes a Firebase Storage desde un Blog

Subir imágenes a Firebase Storage desde un blog es sencillo si dominas la referencia al storage, el control del upload asíncrono y la obtención de la URL de descarga. Aquí verás cómo crear la carpeta por usuario usando su UID, monitorear el porcentaje con bytesTransferred y totalBytes, y guardar el enlace para usarlo al crear el post.

¿Cómo preparar la referencia en Firebase Storage?

Para comenzar, es clave incluir el script de Firebase Storage en el index y luego construir una referencia al directorio donde quedará la imagen. La estructura propuesta crea una carpeta de imágenes del blog y, dentro, una carpeta por UID y el archivo.

• Adiciona el script de storage al index.
• Crea la referencia con la ruta de carpetas.
• Usa el UID del usuario para segmentar archivos.
• Finaliza con el nombre del archivo.

<!-- Agregar el script de Firebase Storage en index.html -->
<script src=".../firebase-storage.js"></script>

// Recuperar el usuario actual.
const user = firebase.auth().currentUser;
const uid = user.uid; // identificador único del usuario.

// Crear la referencia al directorio y archivo en Storage.
const refStorage = firebase.storage()
  .ref('IMGS post')           // carpeta de imágenes del blog.
  .child(uid)                 // carpeta del usuario.
  .child(file.name);          // nombre del archivo.

Puntos clave:

• Firebase crea directorios si no existen al subir un archivo.
• La referencia apunta a: carpeta general → carpeta del usuario → archivo.
• El método del post recibe el file desde el componente de upload de HTML.

¿Cómo monitorear el progreso y manejar errores del upload?

La subida se ejecuta en background de forma asíncrona. Para observar el proceso, usa la tarea que retorna put(file) y registra eventos con on('state_changed', ...). Con el snapshot puedes calcular el porcentaje y actualizar un control visual tipo barra de progreso.

// Iniciar el upload y obtener la tarea.
const task = refStorage.put(file);

// Observar estados: progreso, error y completado.
task.on('state_changed',
  snapshot => {
    const porcentaje = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    // Actualizar el control visual de "Cargando".
    determinate.style.width = porcentaje + '%';
  },
  error => {
    console.error('Error subiendo el archivo.', error);
    // Informar al usuario el error de subida.
  },
  () => {
    // Al completar, obtener la URL de descarga.
    task.snapshot.ref.getDownloadURL()
      .then(url => {
        console.log('URL de descarga:', url);
        // Guardar la URL en el storage del navegador para usarla al crear el post.
        // (ejemplo) window.localStorage.setItem('urlImagenPost', url);
      })
      .catch(err => {
        console.error('Error obteniendo download URL.', err);
      });
  }
);

Detalles importantes:

• bytesTransferred y totalBytes permiten calcular el progreso en porcentaje.
• El control visual (por ejemplo, determinate) se actualiza con style.width = porcentaje + '%'.
• Maneja el segundo callback para errores de subida.
• En el callback final, usa getDownloadURL() para obtener la URL de descarga y guardarla temporalmente en el storage del navegador.

¿Cómo integrar el UID y la URL en el flujo del post?

Desde el controlador, crea una instancia de Post y llama el método que sube la imagen, por ejemplo Subirimagenpost(file). El archivo proviene del componente de upload de HTML. Asegúrate de enviar el UID: si falta, se creará una carpeta con valor no deseado (por ejemplo, undefined). Al corregir y pasar user.uid, todas las imágenes quedarán en la carpeta del usuario.

// En el controlador: recuperar el file del input de HTML y subirlo.
const post = new Post();
post.Subirimagenpost(file); // el método interno usa firebase.auth().currentUser.uid

Buenas prácticas del flujo:

• Recupera el usuario actual con firebase.auth().currentUser y usa user.uid al construir la ruta.
• Comprueba en el panel de storage que se creen: carpeta general, carpeta por UID y el archivo.
• Tras crear el post, usa la URL de descarga guardada para persistirla en la base de datos.
• Informa siempre al usuario: progreso, errores y finalización.

¿Te quedó alguna duda sobre state_changed, el cálculo de porcentaje o el manejo de la URL de descarga? Comparte tu pregunta y cuéntame cómo lo estás implementando en tu blog.