Almacenamiento de archivos en buckets de Supabase
Comprenda cómo crear y gestionar buckets de almacenamiento y cargar mediante programación distintos tipos de archivos en su proyecto de Supabase.
Almacenamiento de archivos en buckets de Supabase es una lección gratuita de Supabase Backend as a Service en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Supabase Backend as a Service, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Supabase Backend as a Service incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Welcome to Supabase Storage
Managing files like images, videos, and documents is crucial for many apps. Supabase offers a robust, S3-compatible object storage solution right out of the box!
It's designed for scalability and security, letting you store and serve user-generated content or application assets with ease.
Understanding Storage Buckets
Think of a bucket as a top-level folder or container for your files. Each Supabase project can have multiple buckets.
- Organize files by type (e.g.,
avatars,product-images). - Set different security rules for each bucket.
- Buckets are isolated, meaning files in one bucket don't mix with another.
Create a Bucket in the Dashboard
You can create buckets directly from the Supabase Dashboard. Navigate to the Storage section and click "New bucket".
Give it a unique name and decide if it should be public or private. We'll explore these options next!
Public or Private Access?
This is a key decision when creating a bucket:
- Public Buckets: Anyone with the URL can access files. Great for static assets like profile pictures or public documents.
- Private Buckets: Files require authentication and specific policies to be accessed. Ideal for sensitive user data or premium content.
You can change this setting later, but it's good to plan ahead!
Setting Up for Uploads (JS)
To upload files from your app, you'll use the Supabase client library. First, ensure you have your Supabase URL and anon key initialized.
We'll use a simple JavaScript example. Imagine supabase is your initialized client.
import { createClient } from '@supabase/supabase-js';
const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
console.log('Supabase client initialized.');Programmatically Upload a File
The storage.from().upload() method is your go-to for uploading. It needs the bucket name, the path within the bucket, and the file itself.
Let's simulate uploading a simple text file. In a real app, you'd get the file from an HTML <input type="file">.
import { createClient } from '@supabase/supabase-js';
const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
async function uploadFile() {
// In a real app, 'file' would come from an input element
const mockFile = new File(['Hello CoddyKit!'], 'hello.txt', {
type: 'text/plain',
});
const { data, error } = await supabase.storage
.from('my-first-bucket') // Replace with your bucket name
.upload('public/hello_world.txt', mockFile);
if (error) {
console.error('Upload error:', error.message);
} else {
console.log('Upload successful:', data);
}
}
uploadFile();File Paths & Overwrite Behavior
The 'path' in .upload('path/to/file.txt', file) determines where your file lands within the bucket.
'my-image.jpg': Uploads to the bucket's root.'avatars/user123.png': Creates anavatarsfolder if it doesn't exist.
By default, uploading to an existing path will overwrite the old file. You can control this with the upsert option.
Controlling Overwrites with Upsert
The upsert option in the upload method lets you decide what happens if a file with the same path already exists.
upsert: true(default): Overwrites the existing file.upsert: false: Returns an error if a file with the same path exists, preventing accidental overwrites.
Use upsert: false when you want to ensure unique file names.
import { createClient } from '@supabase/supabase-js';
const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
async function uploadUniqueFile() {
const mockFile = new File(['Unique content!'], 'unique.txt', {
type: 'text/plain',
});
// This will fail if 'public/unique.txt' already exists
const { data, error } = await supabase.storage
.from('my-first-bucket') // Replace with your bucket name
.upload('public/unique.txt', mockFile, { upsert: false });
if (error) {
console.error('Upload failed (file exists or other error):', error.message);
} else {
console.log('Unique upload successful:', data);
}
}
uploadUniqueFile();Handles All Your File Needs
Supabase Storage isn't limited to just images or text files. It can handle any file type you throw at it!
- Images: PNG, JPG, GIF, SVG
- Videos: MP4, MOV, WebM
- Documents: PDF, DOCX, XLSX
- Audio: MP3, WAV
Just ensure your client-side code provides the correct file object.
Quick Check on Buckets
You've learned about Supabase Storage buckets and how to upload files. Let's test your understanding!
Recap: Storing Files
Great job! You've learned the fundamentals of Supabase Storage:
- What buckets are and how to create them.
- The difference between public and private buckets.
- How to programmatically upload files using the Supabase client.
- Controlling file overwrites with the
upsertoption.
Next, you'll dive into securing your files with Storage Policies!
Aprende Supabase Backend as a Service con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 11
- Lecciones
- 40
Preguntas frecuentes
¿La lección «Almacenamiento de archivos en buckets de Supabase» es gratis?
Sí — el texto completo de «Almacenamiento de archivos en buckets de Supabase» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Supabase Backend as a Service, actualiza a CoddyKit PRO. El curso de Supabase Backend as a Service incluye 4 lecciones en total.
¿Qué aprenderé en «Almacenamiento de archivos en buckets de Supabase»?
Comprenda cómo crear y gestionar buckets de almacenamiento y cargar mediante programación distintos tipos de archivos en su proyecto de Supabase. Practicas Supabase Backend as a Service con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Supabase Backend as a Service?
No se requiere experiencia previa. Supabase Backend as a Service en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Almacenamiento de archivos en buckets de Supabase»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Supabase Backend as a Service?
Sí. Cada lección de Supabase Backend as a Service incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Almacenamiento de archivos en buckets de Supabase
- Gestión del acceso mediante políticas
- Carga y recuperación de archivos multimedia
- Transformaciones de imágenes y URL firmadas