Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Le stockage des images dans une base de données n'est généralement pas recommandé. Cela peut rapidement devenir coûteux en raison de la quantité de puissance de stockage et de traitement requise. L'utilisation d'un service de stockage rentable et évolutif comme le stockage Supabase est préférable.

Vous apprendrez ci-dessous comment télécharger des images dans un compartiment de stockage à l'aide de la bibliothèque client JavaScript Supabase et comment diffuser les images dans une application Next.js.

Création d'un projet Supabase

Si vous n'avez pas encore d'application Next.js prête, suivez l'officiel Guide de démarrage de Next.js pour créer votre application.

Une fois que vous avez fait cela, suivez ces étapes pour créer une base de données Supabase :

  1. Accédez au site Web de Supabase et créez un nouveau compte. Si vous avez déjà un compte, connectez-vous.
    2. instagram viewer
  2. Dans le tableau de bord Supabase, cliquez sur le Créer un nouveau projet bouton.
  3. Donnez un nom à votre projet et cliquez sur le Créer un projet bouton. Une fois que Supabase a créé le projet, il vous redirigera vers le tableau de bord du projet

Après avoir créé le projet, créez un bucket de stockage.

Création d'un compartiment de stockage Supabase

Un bucket de stockage vous permet de stocker des fichiers multimédias tels que des images et des vidéos. Dans Supabase, vous pouvez créer un bucket de stockage sur le tableau de bord ou utiliser la bibliothèque cliente.

Pour utiliser le tableau de bord, procédez comme suit :

  1. Allez à la Stockage Supabase page dans le tableau de bord.
  2. Cliquez sur Nouveau seau et entrez un nom pour le compartiment. Vous pouvez le nommer images puisque vous y stockerez des images.
  3. Cliquez sur Créer un compartiment.

Ensuite, vous allez configurer un client Supabase dans votre application pour interagir avec le bucket.

Configuration du client Supabase

Commencez par installer la bibliothèque cliente supabase-js via le terminal :

npm install @supabase/supabase-js

Créez ensuite un nouveau dossier nommé lib à la racine de votre application ou dans le dossier src si vous l'utilisez. Dans ce dossier, ajoutez un nouveau fichier nommé supabase.js et utilisez le code suivant pour initialiser le client Supabase.

importer { créerClient } depuis'@supabase/supabase-js'
exporterconstante supabase = créerClient('', '')

Remplacez l'URL du projet et la clé anon par vos propres détails que vous pouvez trouver dans le Paramètres du projet Supabase. Vous pouvez copier les détails dans le fichier .env et les référencer à partir de là.

SUPABASE_PROJECT_URL="your_project_url"
SUPABASE_PROJECT_ANON_KEY="votre_projet_anon_key"

Maintenant, dans supabase.js, vous devriez avoir :

exporterconstante supabase = créerClient(
 processus.env. SUPABASE_PROJECT_URL,
 processus.env. SUPABASE_ANON_KEY
);

Une fois que vous avez fait cela, créez un formulaire qui acceptera les images.

Créer un formulaire qui accepte les images

À l'intérieur le dossier de l'application Next.js de votre application, créez un sous-dossier nommé télécharger et ajoutez un nouveau fichier nommé page.js. Cela créera une nouvelle page disponible sur la route /upload. Si vous utilisez Next.js 12, créez upload.js dans le pages dossier.

Dans la page de téléchargement, ajoutez le code suivant pour créer le formulaire.

"utiliser le client";
importer { useState } depuis"réagir";
exporterdéfautfonctionPage() {
constante [fichier, setfile] = useState([]);


constante handleSubmit = asynchrone (e) => {
 e.preventDefault();
// télécharger l'image
 };


constante handleFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
retour (


"déposer" nom="image" onChange={handleFileSelected} />

Lorsque vous sélectionnez un fichier et cliquez sur le bouton Soumettre, le formulaire doit appeler la fonction handleSubmit. C'est dans cette fonction que vous téléchargerez l'image.

Pour les formulaires volumineux avec plusieurs champs, il peut être plus facile de utiliser une bibliothèque de formulaires comme formik gérer la validation et la soumission.

Téléchargement d'un fichier image dans un compartiment de stockage Supabase

Dans la fonction handleSubmit, utilisez le client Supabase pour télécharger l'image en ajoutant le code ci-dessous.

constante handleSubmit = asynchrone (e) => {
 e.preventDefault();
constante nom de fichier = `${uuidv4()}-${file.name}`;
constante { données, erreur } = attendre stockage supabase
 .depuis("images")
 .upload (nom de fichier, fichier, {
 cacheControl: "3600",
 insérer: FAUX,
 });
constante filepath = data.path;
// enregistre le chemin du fichier dans la base de données
 };

Dans cette fonction, vous créez un nom de fichier unique en concaténant le nom de fichier et un UUID généré par le package uuid npm. Ceci est recommandé pour éviter d'écraser des fichiers qui partagent le même nom.

Vous devrez installer le package uuid via npm, copiez et exécutez la commande ci-dessous dans le terminal.

npm installer uuid

Ensuite, en haut de la page de téléchargement, importez la version 4 de uuid.

importer { v4 comme uuidv4 } depuis"uuid";

Si vous ne souhaitez pas utiliser le package uuid, il existe d'autres méthodes que vous pouvez utiliser pour générer des identifiants uniques.

Ensuite, utilisez le client supabase pour télécharger le fichier dans le compartiment de stockage appelé "images". N'oubliez pas d'importer le client supabase en haut de votre fichier.

importer { supbase } depuis"@/lib/supabase";

Notez que vous passez le chemin vers l'image et l'image elle-même. Ce chemin fonctionne de la même manière que dans le système de fichiers. Par exemple, si vous enregistriez l'image dans un dossier du compartiment appelé public, vous spécifieriez le chemin comme "/public/filename".

Supabase renverra un objet contenant les données et l'objet d'erreur. L'objet de données contient l'URL de l'image que vous venez de télécharger.

Pour que cette fonction de téléchargement fonctionne, vous devez créer une politique d'accès qui permet à votre application d'insérer et de lire des données dans un bucket de stockage Supabase en suivant ces étapes :

  1. Sur le tableau de bord de votre projet, cliquez sur le Stockage onglet dans la barre latérale gauche.
  2. Sélectionnez votre compartiment de stockage et cliquez sur le Accès languette.
  3. Sous Politiques de compartiment, clique le Nouvelle politique bouton.
  4. Sélectionnez le Pour une personnalisation complète possibilité de créer une politique à partir de zéro.
  5. Dans le Ajouter une politique, entrez un nom pour votre stratégie (par exemple, "Autoriser l'insertion et la lecture").
  6. Sélectionner INSÉRER et SÉLECTIONNER les autorisations de la Opérations autorisées menu déroulant.
  7. Clique le Examen bouton pour passer en revue les politiques.
  8. Clique le Sauvegarder bouton pour ajouter la stratégie.

Vous devriez maintenant pouvoir télécharger des images sans générer d'erreur d'accès.

Servir les images téléchargées dans votre application

Pour diffuser l'image sur votre site, vous avez besoin d'une URL publique, que vous pouvez récupérer de deux manières différentes.

Vous pouvez utiliser le client Supabase comme ceci :

constante chemin du fichier = "chemin_vers_fichier_dans_buckey"
constante { données } = supabase
 .stockage
 .depuis('images')
 .getPublicUrl(`${filepath}`)

Vous pouvez également concaténer manuellement l'URL du bucket avec le chemin du fichier :

constante chemin du fichier = `${bucket_url}/${filepath}`

Utilisez la méthode que vous préférez. Une fois que vous avez le chemin du fichier, vous pouvez l'utiliser dans le composant image Next.js comme ceci :

"" largeur={200} hauteur={200}/>

Ce code affichera l'image sur votre site.

Créer des applications robustes avec Supabase

À l'aide de ce code, vous pouvez accepter un fichier d'un utilisateur via un formulaire et le télécharger sur le stockage Supabase. Vous pouvez ensuite récupérer cette image et la diffuser sur votre site.

En plus de stocker des images, Supabase a d'autres fonctionnalités. Vous pouvez créer une base de données PostgreSQL, écrire des fonctions de périphérie et configurer l'authentification pour vos utilisateurs.