Subir imágenes a un bucket de Supabase y conectarlas con registros en la base de datos es el puente que convierte un proyecto estático en una aplicación visual real. Aquí aprenderás cómo cargar fotos manualmente desde el dashboard, obtener su URL pública y reemplazar el placeholder de tus posts en SuPlatziGram, todo desde la interfaz antes de llevarlo al front-end.

¿Cómo organizar las carpetas dentro del bucket de Supabase Storage?

Antes de subir cualquier archivo, la estructura del bucket tiene que estar limpia. En la clase anterior quedó una carpeta mal anidada y este es el momento de corregirla.

Dentro del bucket imagenes deben existir dos carpetas al mismo nivel: una para profile y otra para post. Si creaste post dentro de profile, entra a la carpeta, haz clic en los tres puntitos, selecciona eliminar y confirma. Supabase te avisa que la acción no se puede deshacer, así que revisa antes de aceptar.

Un detalle importante: si tienes una carpeta seleccionada, las nuevas se crean dentro de ella. Deselecciona haciendo clic fuera y recién ahí crea la carpeta al nivel correcto.

¿Por qué separar post y profile en carpetas distintas? Porque cada tipo de imagen tiene una lógica diferente en tu app: las de perfil cambian poco y son únicas por usuario, las de posts crecen sin parar. Separarlas facilita las reglas de acceso y el mantenimiento.

¿Cómo subir una imagen al bucket desde el dashboard?

Con la carpeta post seleccionada, usa la opción de agregar archivos y elige las imágenes que quieras probar. Yo usé imágenes generadas con Gemini para avanzar rápido, pero tú puedes usar fotos reales si prefieres.

Apenas se sube, Supabase confirma la carga y la imagen aparece en el listado. Al hacer clic sobre ella, se abre un preview del lado derecho con detalles útiles:

• Formato del archivo, por ejemplo JPG.
• Peso de la imagen.
• Fecha en la que fue agregada.
• Opciones para obtener la URL o descargarla.

Toda esa información es metadata y la vas a usar después en tu proyecto para saber la antigüedad de la imagen, el tipo de archivo e incluso para registrar quién la subió.

¿Qué opciones rápidas ofrece el menú de los tres puntitos?

Sin necesidad de abrir el preview, el menú contextual te deja:

• Obtener la URL pública.
• Renombrar el archivo si no quieres conservar el nombre original.
• Mover la imagen entre carpetas, por ejemplo de post a profile.
• Descargar el archivo.
• Eliminarlo del bucket.

¿Cómo obtener y verificar la URL pública de una imagen?

Desde el preview o desde el menú contextual puedes copiar la URL al portapapeles. Si la pegas en una pestaña nueva, vas a ver que la dirección sigue una estructura clara basada en tu proyecto de Supabase.

La ruta indica el bucket (imagenes), la carpeta (post), el nombre del archivo y la extensión. Al darle enter, el navegador carga la imagen directamente porque el bucket es público.

¿Toda imagen en Supabase Storage debería ser pública? No. La visibilidad depende del contenido. Para este curso las dejamos accesibles sin login para simplificar, pero en producción muchas imágenes deberían requerir autenticación o servirse solo a través del front-end.

¿Cómo vincular la URL de la imagen con un post en la base de datos?

Ahora viene la parte donde storage y la tabla de posts se conectan. Con la URL copiada, ve a la tabla post en el editor de Supabase.

La edición rápida funciona así:

1. Haz doble clic sobre la celda de la imagen del post que quieres actualizar.
2. Selecciona el contenido del placeholder y bórralo.
3. Pega la URL pública que copiaste del bucket.
4. Presiona enter para guardar los cambios.

Ese cambio queda disponible al instante en la API y en la base de datos. Repite el proceso para cada post que quieras conectar con su imagen real.

¿Qué pasa cuando guardo la URL en la celda del post? Tu API empieza a devolver esa URL en lugar del placeholder, y cualquier cliente que consulte la tabla podrá renderizar la imagen correcta en el feed o en el perfil.

¿Por qué la URL pública es parte del modelo de datos?

Cada imagen que subes genera una dirección única, y esa dirección es el dato que tu aplicación va a leer para mostrar las fotos. No guardas el archivo en la tabla, guardas la referencia. Esa referencia es lo que une el archivo físico en storage con el registro lógico en la base de datos.

En la próxima clase vamos a profundizar en esa relación: cómo fluye la información entre storage y las tablas, y por qué tratar la URL como un campo más del modelo te ahorra problemas cuando escalas. ¿Ya subiste tus primeras imágenes al bucket? Cuéntame en los comentarios qué tipo de fotos estás usando para tu SuPlatziGram.