Supabase som Backend as a Service · Lektion

Lagra filer i Supabase-buckets

Förstå hur ni skapar och hanterar lagringsbucketar samt programmatiskt laddar upp olika filtyper till ert Supabase-projekt.

Lektion 1 av 411 steg

Lagra filer i Supabase-buckets är en gratis lektion i Supabase som Backend as a Service på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Supabase som Backend as a Service, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Supabase som Backend as a Service innehåller totalt 4 lektioner.

Välkommen till Supabase Storage

Att hantera filer som bilder, videor och dokument är viktigt för många appar. Supabase erbjuder en robust, S3-kompatibel objektlagringslösning direkt från start!

Den är utformad för skalbarhet och säkerhet och gör det enkelt att lagra och leverera användarskapat innehåll eller programtillgångar.

Förstå lagringsbucketar

Tänk på en bucket som en mapp eller behållare på toppnivå för dina filer. Varje Supabase-projekt kan ha flera bucketar.

Organisera filer efter typ (till exempel avatars, product-images).
Ange olika säkerhetsregler för varje bucket.
Bucketar är isolerade, vilket innebär att filer i en bucket inte blandas med filer i en annan.

Skapa en bucket i instrumentpanelen

Du kan skapa bucketar direkt från Supabase Dashboard. Gå till avsnittet Storage och klicka på ”New bucket”.

Ge den ett unikt namn och bestäm om den ska vara offentlig eller privat. Vi utforskar dessa alternativ härnäst!

Offentlig eller privat åtkomst?

Detta är ett viktigt beslut när du skapar en bucket:

Offentliga bucketar: Alla som har URL:en kan komma åt filerna. Passar bra för statiska resurser som profilbilder eller offentliga dokument.
Privata bucketar: Filer kräver autentisering och särskilda policyer för att kunna nås. Passar bra för känsliga användardata eller premiuminnehåll.

Du kan ändra den här inställningen senare, men det är bra att planera i förväg!

Konfigurera uppladdningar (JS)

För att ladda upp filer från appen använder du Supabase-klientbiblioteket. Kontrollera först att Supabase-URL:en och anon-nyckeln har initierats.

Vi använder ett enkelt JavaScript-exempel. Föreställ dig att supabase är din initierade klient.

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

const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

console.log('Supabase client initialized.');

Ladda upp en fil programmatiskt

Metoden storage.from().upload() är ditt förstahandsval för uppladdningar. Den behöver bucketens namn, sökvägen i bucketens filstruktur och själva filen.

Vi simulerar uppladdning av en enkel textfil. I en riktig app skulle du hämta filen från ett HTML-<input type="file">.

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

const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

async function uploadFile() {
  // In a real app, 'file' would come from an input element
  const mockFile = new File(['Hello CoddyKit!'], 'hello.txt', {
    type: 'text/plain',
  });

  const { data, error } = await supabase.storage
    .from('my-first-bucket') // Replace with your bucket name
    .upload('public/hello_world.txt', mockFile);

  if (error) {
    console.error('Upload error:', error.message);
  } else {
    console.log('Upload successful:', data);
  }
}

uploadFile();

Filsökvägar och överskrivning

”Sökvägen” i .upload('path/to/file.txt', file) avgör var filen hamnar i bucketens filstruktur.

'my-image.jpg': Laddar upp filen i bucketens rot.
'avatars/user123.png': Skapar mappen avatars om den inte redan finns.

Som standard skriver en uppladdning till en befintlig sökväg över den gamla filen. Du kan styra detta med alternativet upsert.

Styra överskrivningar med Upsert

Alternativet upsert i uppladdningsmetoden låter dig bestämma vad som händer om det redan finns en fil med samma sökväg.

upsert: true (standard): Skriver över den befintliga filen.
upsert: false: Returnerar ett fel om det finns en fil med samma sökväg, vilket förhindrar oavsiktlig överskrivning.

Använd upsert: false när du vill säkerställa att filnamnen är unika.

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

const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

async function uploadUniqueFile() {
  const mockFile = new File(['Unique content!'], 'unique.txt', {
    type: 'text/plain',
  });

  // This will fail if 'public/unique.txt' already exists
  const { data, error } = await supabase.storage
    .from('my-first-bucket') // Replace with your bucket name
    .upload('public/unique.txt', mockFile, { upsert: false });

  if (error) {
    console.error('Upload failed (file exists or other error):', error.message);
  } else {
    console.log('Unique upload successful:', data);
  }
}

uploadUniqueFile();

Hanterar alla era filbehov

Supabase Storage är inte begränsat till bilder eller textfiler. Det kan hantera alla filtyper som ni använder!

Bilder: PNG, JPG, GIF, SVG
Videor: MP4, MOV, WebM
Dokument: PDF, DOCX, XLSX
Ljud: MP3, WAV

Se bara till att koden på klientsidan tillhandahåller rätt filobjekt.

Snabbtest om buckets

Ni har lärt er om Supabase Storage-buckets och hur man laddar upp filer. Nu testar vi era kunskaper!

Besvara frågan i den interaktiva lektionen

Sammanfattning: lagra filer

Bra jobbat! Ni har lärt er grunderna i Supabase Storage:

Vad buckets är och hur man skapar dem.
Skillnaden mellan public och private buckets.
Hur man laddar upp filer programmatiskt med Supabase-klienten.
Hur filöverskrivning styrs med alternativet upsert.

Härnäst ska ni lära er hur ni skyddar era filer med Storage Policies!

Gratis att börja

Lär dig Supabase som Backend as a Service med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 11
Lektioner: 40

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Lagra filer i Supabase-buckets” gratis?

Ja – hela texten till ”Lagra filer i Supabase-buckets” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Supabase som Backend as a Service, kan Ni uppgradera till CoddyKit PRO. Kursen i Supabase som Backend as a Service innehåller totalt 4 lektioner.

Vad lär jag mig i ”Lagra filer i Supabase-buckets”?

Förstå hur ni skapar och hanterar lagringsbucketar samt programmatiskt laddar upp olika filtyper till ert Supabase-projekt. Ni övar på Supabase som Backend as a Service med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Supabase som Backend as a Service?

Du behöver inga förkunskaper. Utbildningen i Supabase som Backend as a Service på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Lagra filer i Supabase-buckets”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Supabase som Backend as a Service-lektionen?

Ja. Varje Supabase som Backend as a Service-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Lagra filer i Supabase-buckets
Hantera åtkomst med policyer
Ladda upp och hämta media
Bildtransformeringar och signerade URL:er

← Tillbaka till Supabase som Backend as a Service