Comment télécharger des images vers un seau de stockage Supabase depuis une application Next.js ?

Stocker des images dans une source de données n’est généralement pas conseillé. Le faire peut rapidement devenir coûteux en raison de la quantité de stockage et aussi de la puissance de traitement demandée. Utiliser un service de stockage économique et évolutif comme l’espace de stockage Supabase est préférable.

Ci-dessous, vous apprendrez juste comment soumettre des images à un seau d’espace de stockage en utilisant la collection de clients JavaScript Supabase et aussi exactement comment servir les images dans une application Next.js.

Création d’un projet Supabase

Si vous n’avez pas encore préparé une application Next.js, conformez-vous à l’officiel. Guide de démarrage de Next. js pour produire votre application.

Une fois que vous avez fait cela, respectez ces étapes pour produire 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. À partir du panneau de contrôle de Supabase, cliquez sur le bouton Créer un nouveau projet interrupteur.
3. Donnez un nom à votre tâche ainsi que cliquez sur le bouton Créer un projet bouton. Dès que Supabase produit la tâche, il vous redirigera certainement vers le tableau de bord de la tâche.

Après avoir développé la tâche, développez un seau de stockage.

Création d’un seau de stockage Supabase

Un seau de stockage vous permet de conserver des documents multimédia comme des images et des vidéos. Dans Supabase, vous pouvez développer un seau de stockage sur le panneau de contrôle ou utiliser la collection client.

Pour utiliser le panneau de contrôle, respectez les étapes suivantes :

1. Allez dans le Stockage de la Supabase page web dans le tableau de bord.
2. Cliquez sur Nouveau seau ainsi que d’entrer un nom pour le seau. Vous pouvez le nommer photos car vous allez y enregistrer des photos.
3. Cliquez sur Créer un godet.

Ensuite, vous allez établir un client Supabase dans votre application pour s’engager avec le seau.

Mise en place du client Supabase

Commencez par installer la bibliothèque client supabase-js au moyen du terminal :

Produisez ensuite un tout nouveau dossier appelé lib à l’origine de votre application ou dans le dossier src si vous l’utilisez. Dans ce dossier, incluez un nouveau document appelé supabase. js et utilisez également le code suivant pour démarrer le client Supabase.

Remplacez l’URL de la tâche et également la clé anon par vos propres informations que vous pouvez découvrir dans la section de l’URL de la tâche. paramètres de la tâche Supabase. Vous pouvez répliquer les informations dans les données .env ainsi que les recommander à partir de là.

Maintenant, dans supabase.js, vous devriez avoir :

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

Créer un formulaire qui accepte les images

À l’intérieur du dossier Next.js app de votre application, produisez un sous-dossier nommé télécharger ainsi que l’ajout d’un nouveau document nommé page. js. Cela va certainement créer une toute nouvelle page facilement disponible à la route/ upload. Si vous utilisez Next.js 12, créez upload.js dans le fichier pages dossier.

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

Lorsque vous sélectionnez une donnée ainsi que le bouton d’envoi, le type doit appeler la fonction handleSubmit. C’est dans cette fonction, que vous allez poster l’image.

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

Télécharger un fichier image vers un seau de stockage Supabase.

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

Dans cette fonctionnalité, vous créez un nom de documents distinct en concaténant le nom des documents et également un UUID produit par le package uuid npm. Ceci est pour empêcher l’écrasement de documents qui partagent le même nom.

Vous devrez monter le paquet uuid par le biais de npm donc copier et exécuter la commande ci-dessous dans l’incurable.

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

Si vous ne voulez pas faire usage du paquet uuid, il y a quelques autres méthodes que vous pouvez utiliser pour produire des ids distincts.

Ensuite, utilisez le client supabase pour poster le fichier dans le seau de stockage appelé « photos ». N’oubliez pas d’importer le client supabase au-dessus de vos données.

Notez que vous passez le parcours à l’image et aussi l’image elle-même. Ce parcours fonctionne comme il le fait dans le système de données. A titre d’exemple, si vous conserviez l’image dans un dossier du seau appelé public, vous spécifieriez certainement le parcours comme « / public/filename ».

Supabase retournera un élément ayant l’information ainsi que l’objet d’erreur. L’élément de données a l’URL de l’image que vous avez simplement téléchargée.

Pour que cette fonction de téléchargement fonctionne, vous devez produire une politique d’accessibilité qui permet à votre application de mettre ainsi que de vérifier les informations dans un seau de stockage Supabase en adhérant à ces étapes :

1. Sur votre tableau de bord des tâches, cliquez sur le bouton Stockage sur la barre latérale gauche.
2. Sélectionnez votre conteneur d’espace de stockage et cliquez sur le bouton Accès onglet.
3. Sous Politiques des seaux , cliquez sur le bouton Nouvelle politique bouton.
4. Sélectionnez le bouton Pour une personnalisation complète choix pour développer une politique à partir de zéro.
5. Dans le Ajouter une politique , entrez dans un nom pour votre politique (par exemple, « Autoriser l’insertion et aussi la lecture »).
6. Sélectionnez INSERER et SELECT des approbations de la Procédures autorisées menu déroulant.
7. Cliquez sur le Examen pour évaluer les plans.
8. Cliquez sur le bouton Enregistrer pour ajouter le plan.

Vous devez actuellement être en mesure de soumettre des photos sans soulever une erreur d’accès.

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

Pour proposer l’image sur votre site, vous avez besoin d’une URL publique, que vous pouvez obtenir de 2 manières différentes.

Vous pouvez utiliser le client Supabase de manière similaire à ceci :

Ou vous pouvez à la main concaténer l’URL du seau avec le cours de données :

Utilisez la technique que vous préférez. Dès que vous avez le chemin des documents, vous pouvez l’utiliser dans le composant image Next.js de manière similaire à ceci :

Ce code va certainement afficher la photo sur votre site web.

Créer des applications robustes avec Supabase

En utilisant ce code, vous pouvez approuver un fichier d’un client par le biais d’un genre et le télécharger sur l’espace de stockage Supabase. Vous pouvez ensuite récupérer cette photo ainsi que la servir sur votre site.

En plus de conserver les images, Supabase a d’autres fonctionnalités. Vous pouvez créer une base de données PostgreSQL, composer des fonctions de bord, ainsi que mettre en place une vérification pour vos clients.

S’abonner à notre newsletter