Jak nahrát obrázky do úložiště Supabase z aplikace Next.js

Ukládání obrázků do databáze se obecně nedoporučuje. Pokud tak učiníte, může se to rychle prodražit kvůli množství potřebného úložiště a výpočetního výkonu. Je lepší používat nákladově efektivní a škálovatelné úložiště, jako je úložiště Supabase.

Níže se dozvíte, jak nahrát obrázky do úložiště pomocí klientské knihovny Supabase JavaScript a jak obrázky obsluhovat v aplikaci Next.js.

Vytvoření projektu Supabase

Pokud ještě nemáte připravenou aplikaci Next.js, postupujte podle oficiálních Příručka Začínáme s Next.js k vytvoření vaší aplikace.

Jakmile to uděláte, vytvořte databázi Supabase takto:

1. Přejděte na webovou stránku Supabase a vytvořte si nový účet. Pokud již máte účet, přihlaste se.
2. Na řídicím panelu Supabase klikněte na Vytvořte nový projekt knoflík.
3. Pojmenujte svůj projekt a klikněte na Vytvořit projekt knoflík. Jakmile Supabase vytvoří projekt, přesměruje vás na řídicí panel projektu

Po vytvoření projektu vytvořte úložiště.

Vytvoření úložiště Supabase

Úložný prostor vám umožňuje ukládat mediální soubory, jako jsou obrázky a videa. V Supabase můžete vytvořit segment úložiště na řídicím panelu nebo použít klientskou knihovnu.

Chcete-li použít řídicí panel, postupujte takto:

1. Přejít na Úložiště Supabase stránce na hlavním panelu.
2. Klikněte Nové vědro a zadejte název kbelíku. Můžete jej pojmenovat obrázky, protože v něm budete obrázky ukládat.
3. Klikněte Vytvořit kbelík.

Dále ve své aplikaci nastavíte klienta Supabase pro interakci s bucketem.

Nastavení klienta Supabase

Začněte instalací klientské knihovny supabase-js přes terminál:

npm install @supabase/supabase-js

Poté vytvořte novou složku s názvem lib v kořenovém adresáři vaší aplikace nebo ve složce src, pokud ji používáte. Do této složky přidejte nový soubor s názvem supabase.js a použijte následující kód k inicializaci klienta Supabase.

import { createClient } z'@supabase/supabase-js'
vývozníkonst supabase = createClient('', '')

Nahraďte URL projektu a anon klíč svými vlastními podrobnostmi, které najdete v Nastavení projektu Supabase. Podrobnosti můžete zkopírovat do souboru .env a odtamtud na ně odkazovat.

SUPABASE_PROJECT_URL="url_vašeho_projektu"
SUPABASE_PROJECT_ANON_KEY="your_project_anon_key"

Nyní byste v supabase.js měli mít:

vývozníkonst supabase = createClient(
 proces.env. SUPABASE_PROJECT_URL,
 proces.env. SUPABASE_ANON_KEY
);

Jakmile to uděláte, vytvořte formulář, který bude obrázky přijímat.

Vytvoření formuláře, který přijímá obrázky

Uvnitř složku aplikace Next.js vaší aplikace, vytvořte podsložku s názvem nahrát a přidejte nový soubor s názvem page.js. Tím se vytvoří nová stránka dostupná na trase /upload. Pokud používáte Next.js 12, vytvořte upload.js v stránky složku.

Na stránce pro nahrávání přidejte následující kód, abyste vytvořili formulář.

"použít klienta";
import { useState } z"reagovat";
vývoznívýchozífunkceStrana() {
konst [soubor, setfile] = useState([]);
konst handleSubmit = asynchronní (e) => {
 e.preventDefault();
// nahrát obrázek
 };
konst handleFileSelected = (E) => {
 setfile (e.target.files[0]);
 };
vrátit se (


"soubor" jméno="obraz" onChange={handleFileSelected} />
"Předložit">Nahrát obrázek</button>
 </form>
 );
}

Když vyberete soubor a kliknete na tlačítko Odeslat, formulář by měl volat funkci handleSubmit. Právě v této funkci nahrajete obrázek.

U velkých formulářů s více poli to může být jednodušší použijte knihovnu formulářů, jako je formik zvládnout validaci a odeslání.

Nahrání souboru obrázku do úložiště Supabase

Ve funkci handleSubmit použijte klienta Supabase k nahrání obrázku přidáním kódu níže.

konst handleSubmit = asynchronní (e) => {
 e.preventDefault();
konst název souboru = `${uuidv4()}-${file.name}`;
konst { data, chyba } = čekat supabase.úložiště
 .z("snímky")
 .upload (název souboru, soubor, {
 cacheControl: "3600",
 upsert: Nepravdivé,
 });
konst cesta k souboru = data.cesta;
// uložit cestu k souboru do databáze
 };

V této funkci vytváříte jedinečný název souboru zřetězením názvu souboru a UUID generovaného balíčkem uuid npm. To je doporučeno, aby nedošlo k přepsání souborů se stejným názvem.

Budete muset nainstalovat balíček uuid přes npm, takže zkopírujte a spusťte příkaz níže v terminálu.

npm install uuid

Poté v horní části stránky pro nahrávání importujte verzi 4 uuid.

import { v4 tak jako uuidv4} z"uuid";

Pokud nechcete používat balíček uuid, existují další metody, které můžete použít ke generování jedinečných ID.

Poté pomocí klienta supabase nahrajte soubor do úložiště s názvem „images“. Nezapomeňte importovat klienta supabase v horní části souboru.

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

Všimněte si, že předáváte cestu k obrázku a obrázek samotný. Tato cesta funguje stejně jako v systému souborů. Pokud byste například obrázek ukládali do složky v kbelíku s názvem public, zadali byste cestu jako „/public/filename“.

Supabase vrátí objekt obsahující data a chybový objekt. Datový objekt obsahuje adresu URL obrázku, který jste právě nahráli.

Aby tato funkce nahrávání fungovala, musíte vytvořit zásadu přístupu, která vaší aplikaci umožní vkládat a číst data do úložiště Supabase podle následujících kroků:

1. Na hlavním panelu projektu klikněte na Úložný prostor na levém postranním panelu.
2. Vyberte svůj úložný prostor a klikněte na Přístup tab.
3. Pod Zásady bucketu, klikněte na Nová politika knoflík.
4. Vybrat Pro úplné přizpůsobení možnost vytvořit politiku od začátku.
5. V Přidat zásady dialogovém okně zadejte název zásady (např. „Povolit vkládání a čtení“).
6. Vybrat VLOŽIT a VYBRAT oprávnění od Povolené operace rozbalovací nabídka.
7. Klikněte na Posouzení pro zobrazení zásad.
8. Klikněte na Uložit tlačítko pro přidání zásady.

Nyní byste měli být schopni nahrávat obrázky bez vyvolání chyby přístupu.

Poskytování nahraných obrázků ve vaší aplikaci

K zobrazení obrázku na vašem webu potřebujete veřejnou adresu URL, kterou můžete získat dvěma různými způsoby.

Klienta Supabase můžete použít takto:

konst cesta k souboru = "path_to_file_in_buckey"
konst { data } = supabase
 .úložný prostor
 .z('snímky')
 .getPublicUrl(`${filepath}`)

Nebo můžete ručně zřetězit adresu URL segmentu s cestou k souboru:

konst cesta k souboru = `${bucket_url}/${filepath}`

Použijte kteroukoli metodu, kterou preferujete. Jakmile budete mít cestu k souboru, můžete ji použít v komponentě obrázku Next.js takto:

"" šířka={200} výška={200}/>

Tento kód zobrazí obrázek na vašem webu.

Vytváření robustních aplikací pomocí Supabase

Pomocí tohoto kódu můžete přijmout soubor od uživatele prostřednictvím formuláře a nahrát jej do úložiště Supabase. Poté můžete tento obrázek načíst a zobrazit na svém webu.

Kromě ukládání obrázků má Supabase další funkce. Můžete vytvořit databázi PostgreSQL, zapisovat okrajové funkce a nastavit ověřování pro své uživatele.