Afbeeldingen uploaden naar een Supabase-opslagbucket vanuit een Next.js-app

Het opslaan van afbeeldingen in een database wordt over het algemeen niet aanbevolen. Dit kan snel duur worden vanwege de hoeveelheid opslag en verwerkingskracht die nodig is. Het gebruik van een kosteneffectieve en schaalbare opslagservice zoals Supabase-opslag is beter.

Hieronder leert u hoe u afbeeldingen kunt uploaden naar een opslagbucket met behulp van de Supabase JavaScript-clientbibliotheek en hoe u de afbeeldingen kunt weergeven in een Next.js-toepassing.

Een Supabase-project maken

Als je nog geen Next.js-applicatie bij de hand hebt, volg dan de officiële Next.js handleiding om aan de slag te gaan om uw applicatie te maken.

Als je dat eenmaal hebt gedaan, volg je deze stappen om een ​​Supabase-database aan te maken:

1. Navigeer naar de Supabase-website en maak een nieuw account aan. Als je al een account hebt, log dan in.
2. Klik in het Supabase-dashboard op de Maak een nieuw project aan knop.
instagram viewer
3. Geef je project een naam en klik op de Project aanmaken knop. Zodra Supabase het project heeft gemaakt, wordt u doorgestuurd naar het projectdashboard

Nadat u het project hebt gemaakt, maakt u een opslagbucket.

Een Supabase-opslagbucket maken

Met een opslagbucket kunt u mediabestanden zoals afbeeldingen en video's opslaan. In Supabase kunt u een opslagbucket op het dashboard maken of de clientbibliotheek gebruiken.

Volg deze stappen om het dashboard te gebruiken:

1. Ga naar de Supabase-opslag pagina in het Dashboard.
2. Klik Nieuwe emmer en voer een naam in voor de bucket. Je kunt het afbeeldingen noemen, omdat je er afbeeldingen in opslaat.
3. Klik Emmer maken.

Vervolgens stelt u een Supabase-client in uw app in om met de bucket te communiceren.

De Supabase-client instellen

Begin met het installeren van de supabase-js-clientbibliotheek via de terminal:

npm installeer @supabase/supabase-js

Maak vervolgens een nieuwe map met de naam lib in de hoofdmap van uw toepassing of in de map src als u deze gebruikt. Voeg in deze map een nieuw bestand toe met de naam supabase.js en gebruik de volgende code om de Supabase-client te initialiseren.

importeren { createClient } van'@supabase/supabase-js'
exporterenconst supabase = maakKlant('', '')

Vervang de project-URL en de anon-sleutel door uw eigen gegevens die u kunt vinden in de Supabase-projectinstellingen. U kunt de details in het .env-bestand kopiëren en van daaruit ernaar verwijzen.

SUPABASE_PROJECT_URL="uw_project_url"
SUPABASE_PROJECT_ANON_KEY="uw_project_anon_key"

Nu zou je in supabase.js het volgende moeten hebben:

exporterenconst supabase = maakKlant(
 proces.env. SUPABASE_PROJECT_URL,
 proces.env. SUPABASE_ANON_KEY
);

Zodra je dat hebt gedaan, maak je een formulier dat de afbeeldingen accepteert.

Een formulier maken dat afbeeldingen accepteert

Binnen de app-map Next.js van uw toepassing, maakt u een submap met de naam uploaden en voeg een nieuw bestand toe met de naam pagina.js. Hierdoor wordt een nieuwe pagina gemaakt die beschikbaar is op de /upload-route. Als u Next.js 12 gebruikt, maakt u upload.js in het Pagina's map.

Voeg op de uploadpagina de volgende code toe om het formulier te maken.

"klant gebruiken";
importeren { useState } van"Reageer";
exporterenstandaardfunctieBladzijde() {
const [bestand, setbestand] = useState([]);
const handleSubmit = asynchroon (e) => {
 e.preventDefault();
// afbeelding uploaden
 };
const handleFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
opbrengst (


"bestand" naam="afbeelding" onChange={handleFileSelected} />
"indienen">Afbeelding uploaden</button>
 </form>
 );
}

Wanneer u een bestand selecteert en op de verzendknop klikt, moet het formulier de functie handleSubmit aanroepen. Het is in deze functie dat u de afbeelding uploadt.

Voor grote formulieren met meerdere velden kan het eenvoudiger zijn om gebruik een formulierbibliotheek zoals formik validatie en indiening afhandelen.

Een afbeeldingsbestand uploaden naar een Supabase Storage Bucket

Gebruik in de functie handleSubmit de Supabase-client om de afbeelding te uploaden door de onderstaande code toe te voegen.

const handleSubmit = asynchroon (e) => {
 e.preventDefault();
const bestandsnaam = `${uuidv4()}-${bestand.naam}`;
const { gegevens, fout } = wachten supabase.opslag
 .van("afbeeldingen")
 .upload (bestandsnaam, bestand, {
 cacheControle: "3600",
 opsteken: vals,
 });
const bestandspad = data.pad;
// bewaar het bestandspad in de database
 };

In deze functie maakt u een unieke bestandsnaam door de bestandsnaam samen te voegen met een UUID die is gegenereerd door het uuid npm-pakket. Dit wordt aanbevolen om te voorkomen dat bestanden met dezelfde naam worden overschreven.

U moet het uuid-pakket via npm installeren, dus kopieer en voer de onderstaande opdracht uit in de terminal.

npm installeer uuid

Importeer vervolgens bovenaan de uploadpagina versie 4 van uuid.

importeren { v4 als uuidv4 } van"uuid";

Als u het uuid-pakket niet wilt gebruiken, zijn er andere methoden die u kunt gebruiken om unieke id's te genereren.

Gebruik vervolgens de supabase-client om het bestand te uploaden naar de opslagbucket genaamd "images". Vergeet niet om de supabase-client bovenaan uw bestand te importeren.

importeren { supabase } van"@/lib/supabase";

Merk op dat u het pad naar de afbeelding en de afbeelding zelf passeert. Dit pad werkt hetzelfde als in het bestandssysteem. Als u bijvoorbeeld de afbeelding opslaat in een map in de bucket met de naam public, geeft u het pad op als "/public/filename".

Supabase retourneert een object dat de gegevens en het foutobject bevat. Het gegevensobject bevat de URL naar de afbeelding die u zojuist hebt geüpload.

Om deze uploadfunctie te laten werken, moet u een toegangsbeleid maken waarmee uw toepassing gegevens kan invoegen en lezen in een Supabase-opslagbucket door deze stappen te volgen:

1. Klik op uw projectdashboard op de Opslag tabblad in de linkerzijbalk.
2. Selecteer uw opslagbucket en klik op de Toegang tabblad.
3. Onder Bucket-beleid, Klik op de Nieuw beleid knop.
4. Selecteer de Voor volledig maatwerk optie om een ​​nieuw beleid te maken.
5. In de Beleid toevoegen voert u een naam in voor uw beleid (bijv. "Invoegen en lezen toestaan").
6. Selecteer INVOEGEN En SELECTEER machtigingen van de Toegestane bewerkingen drop-down menu.
7. Klik op de Beoordeling knop om het beleid te bekijken.
8. Klik op de Redden knop om het beleid toe te voegen.

U zou nu afbeeldingen moeten kunnen uploaden zonder een toegangsfout te veroorzaken.

De geüploade afbeeldingen in uw toepassing weergeven

Om de afbeelding op uw site weer te geven, heeft u een openbare URL nodig, die u op twee verschillende manieren kunt ophalen.

U kunt de Supabase-client als volgt gebruiken:

const bestandspad = "pad_naar_bestand_in_buckey"
const { gegevens } = supabase
 .opslag
 .van('afbeeldingen')
 .getPublicUrl(`${bestandspad}`)

Of u kunt de bucket-URL handmatig samenvoegen met het bestandspad:

const bestandspad = `${bucket_url}/${bestandspad}`

Gebruik de methode die u verkiest. Zodra u het bestandspad hebt, kunt u het als volgt gebruiken in de Next.js-afbeeldingscomponent:

"" breedte={200} hoogte={200}/>

Met deze code wordt de afbeelding op uw site weergegeven.

Robuuste applicaties maken met Supabase

Met deze code kun je via een formulier een bestand van een gebruiker accepteren en uploaden naar Supabase-opslag. U kunt die afbeelding vervolgens ophalen en op uw site weergeven.

Naast het opslaan van afbeeldingen heeft Supabase nog andere functionaliteit. U kunt een PostgreSQL-database maken, edge-functies schrijven en authenticatie voor uw gebruikers instellen.