Supabase › Stockage de fichiers (Buckets)

Le stockage de fichiers avec Supabase

Supabase propose un système de stockage de fichiers à travers des conteneurs sécurisés nommés « buckets ».

Ces buckets ne sont ni plus ni moins que des dossiers sur un serveur géré par Supabase, généralement hébergés sur l’infrastructure cloud Amazon S3.

• ☁️ Amazon gère les serveurs et les données
• 🔒 Supabase gère les accès et les politiques de sécurité

Ces conteneurs peuvent être configurés avec des RLS policies pour restreindre leur accès.

Supabase permet également de définir des restrictions sur les fichiers stockés dans les buckets, notamment :

• Taille maximale (en Ko, Mo, etc.)
• Types de fichiers autorisés (ex : images, videos, etc.)

Les buckets Supabase

Un bucket est un conteneur sécurisé nommé qui permet de stocker des fichiers. Il permet de rendre son contenu public ou privé et intègre une gestion des permissions avancée via la configuration de RLS policies.

Créer un bucket

Il existe plusieurs façons de créer un bucket. Je vous présente dans cet article les trois principales : via le dashboard, via le code SQL ou via n’importe quel SDK, tel que le client JS Supabase.

INSERT INTO storage.buckets (id, name, public) VALUES ('mon-bucket', 'mon-bucket', true);

const { data, error } = await supabase.storage.createBucket('mon-bucket', {
  public: true,
  allowedMimeTypes: ['image/png'],
  fileSizeLimit: '500KB',
})

Supprimer un bucket

DELETE FROM storage.buckets WHERE id = 'mon-bucket';

const { data, error } = await supabase.storage.deleteBucket('mon-bucket')

Gérer les fichiers Supabase

Vous souhaitez héberger des fichiers tels que des images, des vidéos ou des documents pour votre application web ? Supabase vous permet de le faire de manière sécurisée et optimisée.

Cela peut se faire directement via le dashboard à la manière de n’importe quel service de stockage de fichiers ou encore via un SDK Supabase.

Uploader un fichier

const logoFile = event.target.files[0]
const { data, error } = await supabase.storage.from('mon-bucket').upload('brand/logo.png', logoFile)

const { data, error } = await supabase.storage.from('mon-bucket').upload('brand/logo.png', logoFile, {
  upsert: true
})

Récupérer un fichier

Quand on cherche à récupérer des fichiers sur Supabase, la méthode varie si le bucket est public ou privé.

Bucket public

Les fichiers stockés dans des buckets Supabase publics sont accessibles via l’URL suivante :

https://<project_id>.supabase.co/storage/v1/object/public/<bucket>/<asset-name>

Néanmoins, vous avez aussi la possibilité de générer ces URLs via le client JS Supabase.

Le client JS Supabase permet de récupérer des fichiers publics dans un bucket avec la méthode getPublicUrl() de l’instance supabase.storage.

const { data, error } = await supabase.storage.from('mon-bucket').getPublicUrl('brand/logo.png')

Bucket privé

Si le bucket est privé, il faudra :

1. Signer une URL temporaire côté serveur, par exemple avec des Edge Functions.
2. Faire une requête GET sur l’URL https://<project_id>.supabase.co/storage/v1/object/public/<bucket>/<asset-name> en incluant le header d’autorisation de l’utilisateur.

Nous nous intéresserons ici à la signature d’une URL temporaire avec la méthode createSignedUrl() afin de rendre le fichier accessible temporairement.

const { data, error } = await supabase.storage.from('mon-bucket').createSignedUrl('brand/logo.png', 60)

60 : le délai d’expiration de la signature en secondes. Au-delà de ce délai, le fichier sera inaccessible.

Télécharger un fichier

Pour télécharger une image public ou privée, il faudra ajouter l’option download à la méthode getPublicUrl() ou createSignedUrl() selon la visibilité du bucket :

const { data, error } = await supabase.storage.from('mon-bucket').getPublicUrl('brand/logo.png', { download: true })

const { data, error } = await supabase.storage.from('mon-bucket').createSignedUrl('brand/logo.png', 60, { download: true })

Supprimer un fichier

Vous pouvez supprimer un fichier via le dashboard Supabase ou via le client JS Supabase.

const { data, error } = await supabase.storage.from('mon-bucket').remove(['brand/logo.png'])

Organiser ses fichiers dans des dossiers

Les dossiers permettent de mieux organiser les fichiers au sein des buckets.

Les dossiers peuvent être créés, renommés et supprimés via le dashboard Supabase ou lors de l’upload de fichiers, notamment via le client JS.

const { data, error } = await supabase.storage.from('mon-bucket').upload('brand/logo.png', logoFile)

Copier un fichier, déplacer un fichier… de nombreuses autres actions sont possibles sur les fichiers uploadés. Je vous invite à explorer cela en profondeur dans la documentation officielle pour devenir un boss du stockage avec Supabase.