Kako učitati slike u Supabase spremnik za pohranu iz Next.js aplikacije

Pohranjivanje slika u bazu podataka općenito se ne preporučuje. To može brzo postati skupo zbog potrebne količine pohrane i procesorske snage. Korištenje isplative i skalabilne usluge pohrane kao što je Supabase pohrana je bolja.

U nastavku ćete naučiti kako prenijeti slike u spremnik pomoću klijentske biblioteke Supabase JavaScript i kako poslužiti slike u aplikaciji Next.js.

Stvaranje Supabase projekta

Ako već nemate spremnu Next.js aplikaciju, slijedite službenu Next.js vodič za početak rada za izradu vaše aplikacije.

Nakon što to učinite, slijedite ove korake za izradu baze podataka Supabase:

1. Dođite do web stranice Supabase i kreirajte novi račun. Ako već imate račun, prijavite se.
2. Na nadzornoj ploči Supabase kliknite na Napravite novi projekt dugme.
3. Dajte svom projektu naziv i kliknite Izradi projekt dugme. Nakon što Supabase izradi projekt, preusmjerit će vas na nadzornu ploču projekta

Nakon izrade projekta izradite kantu za pohranu.

Stvaranje Supabase spremnika za pohranu

Kanta za pohranu omogućuje pohranjivanje medijskih datoteka poput slika i videozapisa. U Supabaseu možete stvoriti kantu za pohranu na nadzornoj ploči ili koristiti biblioteku klijenta.

Za korištenje nadzorne ploče slijedite ove korake:

1. Idi na Supabase Storage stranici na nadzornoj ploči.
2. Klik Nova kanta i unesite naziv za kantu. Možete ga nazvati slikama jer ćete u njega pohranjivati ​​slike.
3. Klik Stvori kantu.

Zatim ćete u svojoj aplikaciji postaviti Supabase klijent za interakciju s spremnikom.

Postavljanje Supabase klijenta

Započnite instaliranjem klijentske biblioteke supabase-js putem terminala:

npm instalirajte @supabase/supabase-js

Zatim stvorite novu mapu pod nazivom lib u korijenu vaše aplikacije ili u mapi src ako je koristite. U ovu mapu dodajte novu datoteku pod nazivom supabase.js i upotrijebite sljedeći kod za inicijalizaciju Supabase klijenta.

uvoz {kreirajKlijenta} iz'@supabase/supabase-js'
izvozkonst supabase = createClient('', '')

Zamijenite URL projekta i anonimni ključ vlastitim detaljima koje možete pronaći u Postavke projekta Supabase. Možete kopirati pojedinosti u .env datoteku i uputiti ih tamo.

SUPABASE_PROJECT_URL="url_vašeg_projekta"
SUPABASE_PROJECT_ANON_KEY="vaš_projekt_anon_ključ"

Sada, u supabase.js, trebali biste imati:

izvozkonst supabase = createClient(
 proces.env. SUPABASE_PROJECT_URL,
 proces.env. SUPABASE_ANON_KEY
);

Nakon što to učinite, izradite obrazac koji će prihvatiti slike.

Stvaranje obrasca koji prihvaća slike

Iznutra mapu aplikacije Next.js svoje aplikacije stvorite podmapu pod nazivom Učitaj i dodajte novu datoteku pod nazivom stranica.js. Ovo će stvoriti novu stranicu dostupnu na ruti /upload. Ako koristite Next.js 12, kreirajte upload.js u stranice mapa.

Na stranici za učitavanje dodajte sljedeći kod za izradu obrasca.

"koristi klijent";
uvoz {useState} iz"reagirati";
izvozzadanofunkcijaStranica() {
konst [file, setfile] = useState([]);
konst handleSubmit = asinkroni (e) => {
 e.preventDefault();
// Učitaj sliku
 };
konst handleFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
povratak (


"datoteka" ime="slika" onChange={handleFileSelected} />
"podnijeti">Učitaj sliku</button>
 </form>
 );
}

Kada odaberete datoteku i kliknete gumb za slanje, obrazac bi trebao pozvati funkciju handleSubmit. U ovoj funkciji ćete učitati sliku.

Za velike obrasce s više polja može biti lakše koristite biblioteku obrazaca kao što je formik za rukovanje validacijom i podnošenjem.

Prijenos slikovne datoteke u Supabase spremnik za pohranu

U funkciji handleSubmit upotrijebite Supabase klijent za prijenos slike dodavanjem donjeg koda.

konst handleSubmit = asinkroni (e) => {
 e.preventDefault();
konst naziv datoteke = `${uuidv4()}-${file.name}`;
konst { podaci, pogreška } = čekati supabaza.skladištenje
 .iz("slike")
 .upload (naziv datoteke, datoteka, {
 cacheControl: "3600",
 upsert: lažno,
 });
konst filepath = data.path;
// spremite stazu datoteke u bazu podataka
 };

U ovoj funkciji stvarate jedinstveni naziv datoteke spajanjem naziva datoteke i UUID-a generiranog paketom uuid npm. Ovo se preporučuje kako bi se izbjeglo prepisivanje datoteka koje dijele isti naziv.

Morat ćete instalirati paket uuid putem npm-a pa kopirajte i pokrenite naredbu u nastavku na terminalu.

npm instalirajte uuid

Zatim, na vrhu stranice za učitavanje, uvezite verziju 4 uuid-a.

uvoz {v4 kao uuidv4 } iz"uuid";

Ako ne želite koristiti paket uuid, postoje neki drugi metode koje možete koristiti za generiranje jedinstvenih ID-ova.

Zatim upotrijebite supabase klijent za prijenos datoteke u spremnik pod nazivom "slike". Ne zaboravite uvesti supabase klijent na vrh svoje datoteke.

uvoz {supabase} iz"@/lib/supabase";

Imajte na umu da prosljeđujete put do slike i samu sliku. Ovaj put radi isto kao i u datotečnom sustavu. Na primjer, ako spremate sliku u mapu u spremniku pod nazivom public, naveli biste put kao "/public/filename".

Supabase će vratiti objekt koji sadrži podatke i objekt pogreške. Podatkovni objekt sadrži URL slike koju ste upravo učitali.

Da bi ova funkcija prijenosa radila, morate izraditi pristupnu politiku koja vašoj aplikaciji omogućuje umetanje i čitanje podataka u Supabase spremnik za pohranu slijedeći ove korake:

1. Na nadzornoj ploči projekta kliknite na Skladištenje karticu na lijevoj bočnoj traci.
2. Odaberite spremnik za pohranu i kliknite na Pristup tab.
3. Pod, ispod Politike kante, kliknite na Nova politika dugme.
4. Odaberite Za potpunu prilagodbu mogućnost kreiranja politike od nule.
5. u Dodaj pravilo dijaloškom okviru, unesite naziv za svoje pravilo (npr. "Dopusti umetanje i čitanje").
6. Izaberi UMETNUTI i IZABERI dopuštenja od Dopuštene operacije padajući izbornik.
7. Kliknite na Pregled gumb za pregled pravila.
8. Kliknite na Uštedjeti gumb za dodavanje pravila.

Sada biste trebali moći učitavati slike bez pokretanja pogreške pristupa.

Posluživanje učitanih slika u vašoj aplikaciji

Za posluživanje slike na vašoj stranici potreban vam je javni URL koji možete dohvatiti na dva različita načina.

Supabase klijent možete koristiti ovako:

konst put datoteke = "put_do_datoteke_u_buckeyu"
konst { podaci } = supabaza
 .skladištenje
 .iz('slike')
 .getPublicUrl(`${filepath}`)

Ili možete ručno spojiti URL spremnika s putanjom datoteke:

konst put datoteke = `${bucket_url}/${filepath}`

Koristite metodu koju želite. Nakon što imate putanju datoteke, možete je koristiti u komponenti slike Next.js ovako:

"" širina={200} visina={200}/>

Ovaj kod će prikazati sliku na vašoj stranici.

Stvaranje robusnih aplikacija uz Supabase

Pomoću ovog koda možete prihvatiti datoteku od korisnika putem obrasca i učitati je u Supabase pohranu. Zatim možete dohvatiti tu sliku i poslužiti je na svojoj stranici.

Osim pohranjivanja slika, Supabase ima i druge funkcije. Možete stvoriti PostgreSQL bazu podataka, pisati rubne funkcije i postaviti autentifikaciju za svoje korisnike.