Utilisation du Storage - Supabase

Par oregistresainvilus, 3 mars, 2024

Les documents numériques

Dans le monde numérique actuel, le partage de documents en ligne est devenu un pilier essentiel de la communication et de la collaboration. Que ce soit pour échanger des images, des vidéos, des fichiers PDF ou d'autres formats, les plateformes de partage de documents offrent une connectivité instantanée et une accessibilité sans précédent. Ce phénomène révolutionne la manière dont nous interagissons, que ce soit dans un cadre professionnel ou personnel. Ces outils ont changé la façon dont les équipes travaillent ensemble en facilitant la transmission rapide et efficace d'informations, ce qui a permis une collaboration à distance transparente et une productivité accrue. Dans ce chapitre, nous explorerons plus en détail comment organiser ses documents numériques avec Supabase.

Storage

Supabase met à disposition un système de « Storage » ou plutôt Stockage, en français. L'endroit où tous les fichiers numériques seront stockés et organisés, pour qu'ils puissent être consultés ultérieurement via un lien public. Dans ce chapitre, il sera question de comprendre la notion des « Buckets », la création de certaines règles pour pouvoir manipuler ces documents, comment enregistrer ces documments avec Vue.js.

Buckets

Dans Supabase, le therme « Bucket » est utilisé pour décrire les documents numériques. Ils ont exactement le même fonctionnement que les explorateurs de fichiers sur les différents systèmes d’exploitation qui consiste à placer des fichiers numériques dans des documents numériques « Bucket » dans le cas de Supabase. Tout comme la base de données de Supabase, il est possible d’établir certaines règles concernant l’accesibilité de ces « Bucket » avec des « Policies » qui vont décrire si l’utilisateur a le droit d’ajouter, de modifier, de consulter ou de supprimer certain fichier, par exemple.

Policies (Sécurité)

Dans Supabase, il est crucial de redéfinir les politiques Policies du stockage Storage pour que plus d’utilisateur y est accès. Étant donné que tous les dossiers et fichiers dans le Stockage sont considérés comme privés de base, seul l'administrateur peut y accéder. En redéfinissant les politiques, les développeurs peuvent spécifier qui a accès aux fichiers stockés, qu'il s'agisse de les rendre publics ou de restreindre l'accès à des utilisateurs spécifiques ou à des rôles définis dans l'application. Pour ce projet, il a été établi que n’importe peut créer des Buckets. Chose à ne pas faire bien évidemment dans des projets sérieux.

Créer un Bucket

Ce code définit une fonction asynchrone nommée créerUnBucket() qui utilise la bibliothèque Supabase pour créer un Bucket de stockage. La fonction attend la réponse de la création du bucket, puis retourne les données du Bucket créé. Il est possible d’établir certaine règle pour ce Bucket créer. Par exemple, définir une règle pour accepter seulement les fichiers images (allowedMimeTypes: ['image/*'] oubien une règle pour contrôler la taille des fichiers télécharger dans le dépôt fileSizeLimit: '1MB'.

Voir le code l.56-67

Enregistrer un fichier

Ce code définit une fonction asynchrone nommée ajouterUnFichier() qui prend un fichier en entrée. Il utilise la bibliothèque Supabase pour télécharger ce fichier dans un Bucket de stockage supposé existé nommé "Quiz" avec la fonction from(). La fonction upload() s’occupe de télécharger le fichier dans le dépôt en prenant en compte deux variables. La première définit le dossier ou le fichier sera placé et son nom et la seconde défini le fichier en lui-même. Ensuite, il reste à vérifier si le téléchargement a réussi ou s'il y a eu une erreur. En cas de succès, il affiche les données téléchargées, sinon il affiche un message d'erreur indiquant un problème avec le serveur.

Voir le code l.70-84

Récupérer les fichiers dans un Bucket

Récupérer tous les fichiers

Ce code déclare une fonction asynchrone nommée getBucketFichiers() qui récupère tous les fichiers stockés dans le bucket de stockage "Quiz" sous le répertoire images/. Il utilise la méthode list de la bibliothèque Supabase pour récupérer les données, puis affecte les données récupérées à une variable bucket.value. En cas d'erreur, il affiche un message d'erreur dans la console.

Voir le code l.87-96

Récupérer le lien d’un fichier

Cette fonction getLienFichiers() prend en entrée le nom d'un fichier et tente de récupérer son URL publique. Elle utilise la méthode getPublicUrl() de la bibliothèque Supabase pour cela, en prenant en paramètre le chemin du fichier sélectioné. Ensuite, elle affiche le nom du fichier ainsi que son URL publique dans la console, puis retourne cette URL. En cas d'erreur, elle affiche un message d'erreur dans la console. Il est églamenet possible d’utiliser la fonction createSignedUrl('private-document.pdf', 3600) qui permet de configurer le nombre temps pour laquelle un fichier sera disponible.

Voir le code l.99-109