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 stockage et de la puissance de traitement nécessaires. Il est préférable d’utiliser un service de stockage rentable et évolutif tel que Supabase storage.


Ci-dessous, vous apprendrez comment télécharger des images vers un seau de stockage à l’aide de la bibliothèque client JavaScript Supabase et comment servir 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 le guide de démarrage officiel 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. Naviguez sur le site Web de Supabase et créez un nouveau compte. Si vous avez déjà un compte, connectez-vous.
  2. Depuis le tableau de bord de Supabase, cliquez sur le bouton Créer un nouveau projet bouton.
  3. Donnez un nom à votre projet et cliquez sur le bouton Créer un projet bouton. Une fois que Supabase a créé le projet, il vous redirige vers le tableau de bord du projet.

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

Création d’un seau de stockage Supabase

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

Lire  Comment synchroniser gratuitement votre coffre-fort Obsidian sur plusieurs appareils

Pour utiliser le tableau de bord, suivez ces étapes :

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

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 client 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.

 import { createClient } from '@supabase/supabase-js'

export const supabase = createClient('<project_url>', '<your-anon-key>')

Remplacez l’URL du projet et la clé anon par vos propres détails que vous pouvez trouver dans les 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="your_project_anon_key"

Maintenant, dans supabase.js, vous devriez avoir :

 export const supabase = createClient(
  process.env.SUPABASE_PROJECT_URL,
  process.env.SUPABASE_ANON_KEY
);

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

Création d’un formulaire acceptant les images

À l’intérieur du dossier Next.js app 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 répertoire pages dossier.

Lire  Comment installer l'environnement virtuel Proxmox sur un serveur Linux ?

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

 "use client";
import { useState } from "react";

export default function Page() {
  const [file, setfile] = useState([]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    // upload image
  };

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

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" name="image" onChange={handleFileSelected} />
      <button type="submit">Upload image</button>
    </form>
  );
}

Lorsque vous sélectionnez un fichier et cliquez sur le bouton d’envoi, le formulaire doit appeler la fonction handleSubmit. C’est dans cette fonction que vous allez télécharger l’image.

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

Téléchargement d’un fichier image vers un seau de stockage Supabase

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

 const handleSubmit = async (e) => {
    e.preventDefault();
    const filename = `${uuidv4()}-${file.name}`;

    const { data, error } = await supabase.storage
      .from("images")
      .upload(filename, file, {
        cacheControl: "3600",
        upsert: false,
      });

    const filepath = data.path;
    // save filepath in database
  };

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

Vous aurez besoin d’installer le paquet uuid via npm donc copiez et exécutez la commande ci-dessous dans le terminal.

 npm install uuid

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

 import { v4 as uuidv4 } from "uuid";

Si vous ne souhaitez pas utiliser le paquet uuid, vous pouvez utiliser d’autres méthodes pour générer des identifiants uniques.

Ensuite, utilisez le client supabase pour télécharger le fichier dans le seau de stockage appelé « images ». N’oubliez pas d’importer le client supabase au début de votre fichier.

 import { supabase } from "@/lib/supabase";

Notez que vous transmettez le chemin d’accès à 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 enregistrez l’image dans un dossier du seau appelé public, vous indiquerez le chemin « /public/filename ».

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

Lire  Comment créer de meilleures animations React Native

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 seau de stockage Supabase en suivant les étapes suivantes :

  1. Sur le tableau de bord de votre projet, cliquez sur le bouton Stockage dans la barre latérale de gauche.
  2. Sélectionnez votre seau de stockage et cliquez sur le bouton Accès tab.
  3. Sous Politiques des seauxcliquez sur le bouton Nouvelle politique bouton.
  4. Sélectionnez le Pour une personnalisation complète option permettant de créer une politique à partir de zéro.
  5. Dans l’onglet Ajouter une politique Dans la fenêtre de dialogue, saisissez un nom pour votre politique (par exemple, « Autoriser l’insertion et la lecture »).
  6. Sélectionnez INSERT et SELECT les permissions de la Opérations autorisées menu déroulant.
  7. Cliquez sur le bouton Revue pour réviser les politiques.
  8. Cliquez sur le bouton Enregistrer pour ajouter la politique.

Vous devriez maintenant être en mesure de 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 servir 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 :

 const filepath = "path_to_file_in_buckey"

const { data } = supabase
  .storage
  .from('images')
  .getPublicUrl(`${filepath}`)

Ou vous pouvez concaténer manuellement l’URL du seau avec le chemin du fichier :

 const filepath = `${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 :

 <Image src={filepath} alt="" width={200} height={200}/>

Ce code affichera l’image sur votre site.

Créer des applications robustes avec Supabase

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

En plus du stockage des images, Supabase a d’autres fonctionnalités. Vous pouvez créer une base de données PostgreSQL, écrire des fonctions périphériques et mettre en place une authentification pour vos utilisateurs.