Cómo cargar imágenes en un cubo de almacenamiento de Supabase desde una aplicación Next.js

Por lo general, no se recomienda almacenar imágenes en una base de datos. Hacerlo puede volverse costoso rápidamente debido a la cantidad de almacenamiento y potencia de procesamiento requerida. Usar un servicio de almacenamiento rentable y escalable como el almacenamiento de Supabase es mejor.

A continuación, aprenderá cómo cargar imágenes en un depósito de almacenamiento utilizando la biblioteca de cliente JavaScript de Supabase y cómo servir las imágenes en una aplicación Next.js.

Creación de un proyecto Supabase

Si aún no tiene una aplicación Next.js lista, siga el oficial Guía de inicio de Next.js para crear su aplicación.

Una vez que haya hecho eso, siga estos pasos para crear una base de datos de Supabase:

1. Navegue al sitio web de Supabase y cree una nueva cuenta. Si ya tiene una cuenta, inicie sesión.
2. Desde el tablero de Supabase, haga clic en el Crear un nuevo proyecto botón.
instagram viewer
3. Asigne un nombre a su proyecto y haga clic en el Crear proyecto botón. Una vez que Supabase crea el proyecto, lo redirigirá al panel del proyecto

Después de crear el proyecto, cree un depósito de almacenamiento.

Creación de un cubo de almacenamiento de Supabase

Un depósito de almacenamiento le permite almacenar archivos multimedia como imágenes y videos. En Supabase, puede crear un depósito de almacenamiento en el tablero o usar la biblioteca del cliente.

Para usar el tablero, siga estos pasos:

1. Ve a la Almacenamiento Supabase página en el Tablero.
2. Hacer clic Cubo nuevo e ingrese un nombre para el depósito. Puede nombrarlo imágenes ya que almacenará imágenes en él.
3. Hacer clic Crear cubo.

A continuación, configurará un cliente de Supabase en su aplicación para interactuar con el depósito.

Configuración del cliente de Supabase

Comience instalando la biblioteca de cliente supabase-js a través de la terminal:

npm instalar @supabase/supabase-js

Luego cree una nueva carpeta llamada lib en la raíz de su aplicación o en la carpeta src si la está usando. En esta carpeta, agregue un nuevo archivo llamado supabase.js y use el siguiente código para inicializar el cliente de Supabase.

importar { crear cliente } de'@supabase/supabase-js'
exportarconstante supabase = createClient('', '')

Reemplace la URL del proyecto y la clave anónima con sus propios detalles que puede encontrar en el Configuración del proyecto Supabase. Puede copiar los detalles en el archivo .env y hacer referencia a ellos desde allí.

SUPABASE_PROJECT_URL="su_proyecto_url"
SUPABASE_PROJECT_ANON_KEY="tu_proyecto_anon_key"

Ahora, en supabase.js, deberías tener:

exportarconstante supabase = createClient(
 proceso.env. SUPABASE_PROJECT_URL,
 proceso.env. SUPABASE_ANON_KEY
);

Una vez que haya hecho eso, cree un formulario que acepte las imágenes.

Crear un formulario que acepte imágenes

Adentro la carpeta de la aplicación Next.js de su aplicación, cree una subcarpeta llamada subir y agregue un nuevo archivo llamado página.js. Esto creará una nueva página disponible en la ruta /upload. Si usa Next.js 12, cree upload.js en el paginas carpeta.

En la página de carga, agregue el siguiente código para crear el formulario.

"usar cliente";
importar { estado de uso } de"reaccionar";
exportarpor defectofunciónPágina() {
constante [archivo, establecer archivo] = useState([]);
constante manejarEnviar = asíncrono (e) => {
 e.preventDefault();
// cargar imagen
 };
constante handleFileSelected = (mi) => {
 setfile (e.target.files[0]);
 };
devolver (


"archivo" nombre="imagen" onChange={manejarArchivoSeleccionado} />
"entregar">Subir imagen</button>
 </form>
 );
}

Cuando selecciona un archivo y hace clic en el botón Enviar, el formulario debe llamar a la función handleSubmit. Es en esta función, que subirás la imagen.

Para formularios grandes con múltiples campos, puede ser más fácil use una biblioteca de formularios como formik para manejar la validación y el envío.

Carga de un archivo de imagen en un cubo de almacenamiento de Supabase

En la función handleSubmit, use el cliente Supabase para cargar la imagen agregando el código a continuación.

constante manejarEnviar = asíncrono (e) => {
 e.preventDefault();
constante nombre de archivo = `${uuidv4()}-${archivo.nombre}`;
constante {datos, error} = esperar supabase.almacenamiento
 .de("imágenes")
 .upload (nombre de archivo, archivo, {
 cacheControl: "3600",
 trastornar: FALSO,
 });
constante ruta del archivo = datos.ruta;
// guarda la ruta del archivo en la base de datos
 };

En esta función, está creando un nombre de archivo único al concatenar el nombre del archivo y un UUID generado por el paquete uuid npm. Esto se recomienda para evitar sobrescribir archivos que comparten el mismo nombre.

Deberá instalar el paquete uuid a través de npm, así que copie y ejecute el siguiente comando en la terminal.

npm instalar uuid

Luego, en la parte superior de la página de carga, importe la versión 4 de uuid.

importar {v4 como uuidv4 } de"uuid";

Si no desea utilizar el paquete uuid, existen otros métodos que puede utilizar para generar identificadores únicos.

A continuación, utilice el cliente supabase para cargar el archivo en el depósito de almacenamiento llamado "imágenes". Recuerde importar el cliente supabase en la parte superior de su archivo.

importar {superbase} de"@/lib/subase";

Tenga en cuenta que está pasando la ruta a la imagen y la imagen en sí. Esta ruta funciona igual que en el sistema de archivos. Por ejemplo, si estuviera guardando la imagen en una carpeta del depósito llamada pública, especificaría la ruta como "/pública/nombre de archivo".

Supabase devolverá un objeto que contiene los datos y el objeto de error. El objeto de datos contiene la URL de la imagen que acaba de cargar.

Para que esta función de carga funcione, debe crear una política de acceso que permita a su aplicación insertar y leer datos en un depósito de almacenamiento de Supabase siguiendo estos pasos:

1. En el tablero de su proyecto, haga clic en el Almacenamiento pestaña en la barra lateral izquierda.
2. Seleccione su cubo de almacenamiento y haga clic en el Acceso pestaña.
3. Bajo Políticas de depósitos, haga clic en el Nueva politica botón.
4. Selecciona el Para una personalización completa opción de crear una póliza desde cero.
5. En el Agregar política cuadro de diálogo, ingrese un nombre para su política (por ejemplo, "Permitir insertar y leer").
6. Seleccionar INSERTAR y SELECCIONAR permisos de la Operaciones permitidas Menú desplegable.
7. Haga clic en el Revisar botón para revisar las políticas.
8. Haga clic en el Ahorrar botón para agregar la política.

Ahora debería poder cargar imágenes sin generar un error de acceso.

Servir las imágenes cargadas en su aplicación

Para publicar la imagen en su sitio, necesita una URL pública, que puede recuperar de dos maneras diferentes.

Puede usar el cliente de Supabase de esta manera:

constante ruta de archivo = "ruta_al_archivo_en_buckey"
constante {datos} = base superior
 .almacenamiento
 .de('imágenes')
 .getPublicUrl(`${ruta de archivo}`)

O puede concatenar manualmente la URL del depósito con la ruta del archivo:

constante ruta de archivo = `${bucket_url}/${ruta de archivo}`

Utilice el método que prefiera. Una vez que tenga la ruta del archivo, puede usarla en el componente de imagen Next.js de esta manera:

"" ancho = {200} altura={200}/>

Este código mostrará la imagen en su sitio.

Creación de aplicaciones robustas con Supabase

Con este código, puede aceptar un archivo de un usuario a través de un formulario y cargarlo en el almacenamiento de Supabase. Luego puede recuperar esa imagen y publicarla en su sitio.

Además de almacenar imágenes, Supabase tiene otra funcionalidad. Puede crear una base de datos PostgreSQL, escribir funciones perimetrales y configurar la autenticación para sus usuarios.