Subir imágenes a Supabase Storage

Aprende a conectar storage y base de datos en Supabase subiendo imágenes a un bucket público, generando su URL pública y vinculándolas con tus posts. Verás cómo hacerlo desde la interfaz para replicarlo luego en el front end. Esta guía te muestra el flujo esencial para que tus feeds y perfiles carguen fotos reales con seguridad y orden.

¿Cómo conectar storage y base de datos en Supabase?

Desde la interfaz de Supabase, el objetivo es subir una imagen, obtener su URL y pegarla en el registro de un post en la tabla correspondiente. Así, la aplicación usa esa URL para mostrar la foto en el feed o en los perfiles.

• Sube la imagen al bucket público.
• Copia la URL pública desde el preview o el menú de los tres puntos.
• Pega la URL en el campo de imagen del post con doble clic y presiona Enter para guardar.
• El cambio queda disponible en la API y en la base de datos.

¿Qué estructura del bucket público evita errores?

Es clave que las carpetas estén bien organizadas. Si creaste mal la estructura, corrígela desde storage para evitar confusiones al mover o referenciar archivos.

• Mantén dos carpetas al mismo nivel: post y profile.
• Si "post" está dentro de "profile", elimínala y vuelve a crearla al mismo nivel.
• Usa el menú de los tres puntitos: eliminar y crear carpeta al mismo nivel.
• Verifica visualmente que queden paralelas: una para post y otra para profile.

¿Cómo subir imágenes, obtener la URL y vincular con tus posts?

Al seleccionar la carpeta post, agrega archivos. Supabase confirmará la subida y podrás ver el preview con detalles útiles. Luego, copia la URL y pruébala en una pestaña nueva para validar que carga correctamente.

• En el preview ves formato, peso y fecha: metadata clave para tu proyecto.
• Copia la URL pública y pégala en un post para reemplazar el placeholder.
• Guarda con Enter: el registro queda actualizado en la API y en la tabla.
• Repite con más posts para tener un feed con imágenes reales.

¿Qué opciones ofrece el panel de storage?

Sin entrar al preview, el menú de los tres puntos ofrece acciones rápidas para gestionar archivos y mantener el bucket ordenado.

• Obtener imagen: copia directa de la URL pública.
• Renombrar: cambia el nombre sin re-subir el archivo.
• Mover: desplaza entre carpetas, por ejemplo, de post a profile.
• Descargar: baja el archivo localmente.
• Eliminar: borra de forma definitiva.

Además, cuando abres la URL en el navegador, notarás su estructura: proyecto de Supabase + storage + nombre del bucket (por ejemplo, "imágenes") + carpeta ("post") + archivo.jpg. Esa ruta fija es la que tu app usará para el render de la imagen.

¿Por qué la URL pública entra al modelo de datos?

Porque la URL pública se guarda en el registro del post y la interfaz la consume directamente. Así, el modelo de datos integra archivos con tablas de forma simple y performante.

• La imagen puede ser pública o privada: depende del caso de uso.
• En este flujo, es pública: accesible sin login para pruebas y desarrollo.
• La URL vive en la fila del post: el front end la usa para el feed y perfiles.
• La metadata (formato, peso, fecha) puede enriquecer reglas o analíticas.

¿Te fue útil este proceso para organizar tu storage y enlazarlo con tus posts? Comparte dudas o tips en los comentarios para seguir mejorando juntos.