Supabase som backend som tjeneste · leksjon

Lagre filer i Supabase-bøtter

Forstå hvordan De oppretter og administrerer lagringsbøtter, og laster opp ulike filtyper programmatisk til Supabase-prosjektet.

Leksjon 1 av 411 trinn

Lagre filer i Supabase-bøtter er en gratis leksjon i Supabase som backend som tjeneste på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Supabase som backend som tjeneste, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Supabase som backend som tjeneste inneholder totalt 4 leksjoner.

Velkommen til Supabase Storage

Det er avgjørende for mange apper å håndtere filer som bilder, videoer og dokumenter. Supabase tilbyr en robust, S3-kompatibel objektlagringsløsning rett ut av boksen!

Løsningen er utformet for skalerbarhet og sikkerhet, slik at du enkelt kan lagre og levere brukergenerert innhold eller ressurser for applikasjonen.

Forstå lagringsbøtter

Tenk på en bøtte som en mappe eller beholder på øverste nivå for filene dine. Hvert Supabase-prosjekt kan ha flere bøtter.

Organiser filer etter type (for eksempel avatars, product-images).
Angi ulike sikkerhetsregler for hver bøtte.
Bøttene er isolerte, noe som betyr at filer i én bøtte ikke blandes med filer i en annen.

Opprette en bøtte i kontrollpanelet

Du kan opprette bøtter direkte fra Supabase Dashboard. Gå til delen Storage og klikk på «New bucket».

Gi den et unikt navn, og avgjør om den skal være offentlig eller privat. Vi utforsker disse alternativene videre!

Offentlig eller privat tilgang?

Dette er et viktig valg når du oppretter en bøtte:

Offentlige bøtter: Alle som har URL-en, kan få tilgang til filene. Egner seg godt for statiske ressurser som profilbilder eller offentlige dokumenter.
Private bøtter: Filer krever autentisering og bestemte policyer for å kunne åpnes. Ideelt for sensitive brukerdata eller premiuminnhold.

Du kan endre denne innstillingen senere, men det er lurt å planlegge på forhånd!

Klargjøre for opplastinger (JS)

For å laste opp filer fra appen bruker du Supabase-klientbiblioteket. Sørg først for at Supabase-URL-en og anon-nøkkelen er initialisert.

Vi bruker et enkelt JavaScript-eksempel. Tenk deg at supabase er den initialiserte klienten din.

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.');

Laste opp en fil programmatisk

Metoden storage.from().upload() er det naturlige valget for opplasting. Den trenger bøttenavnet, banen i bøtten og selve filen.

La oss simulere opplasting av en enkel tekstfil. I en ekte app ville du hentet filen fra en 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();

Filbaner og overskrivingsatferd

«path» i .upload('path/to/file.txt', file) avgjør hvor filen plasseres i bøtten.

'my-image.jpg': Laster opp til roten av bøtten.
'avatars/user123.png': Oppretter mappen avatars hvis den ikke finnes.

Som standard overskriver opplasting til en eksisterende bane den gamle filen. Du kan styre dette med alternativet upsert.

Sty re overskrivinger med Upsert

Alternativet upsert i opplastingsmetoden lar deg bestemme hva som skjer hvis en fil med samme bane allerede finnes.

upsert: true (standard): Overskriver den eksisterende filen.
upsert: false: Returnerer en feil hvis det finnes en fil med samme bane, slik at utilsiktet overskriving forhindres.

Bruk upsert: false når du vil sikre unike filnavn.

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();

Håndterer alle filbehovene dine

Supabase Storage er ikke begrenset til bilder eller tekstfiler. Den kan håndtere alle filtyper du sender til den!

Bilder: PNG, JPG, GIF, SVG
Videoer: MP4, MOV, WebM
Dokumenter: PDF, DOCX, XLSX
Lyd: MP3, WAV

Du må bare sørge for at klientkoden oppgir riktig filobjekt.

Kort kontroll av buckets

Du har lært om Supabase Storage-buckets og hvordan du laster opp filer. La oss teste forståelsen din!

Besvar den i den interaktive leksjonen

Oppsummering: Lagring av filer

Godt jobbet! Du har lært det grunnleggende om Supabase Storage:

Hva buckets er, og hvordan du oppretter dem.
Forskjellen mellom offentlige og private buckets.
Hvordan du laster opp filer programmatisk ved hjelp av Supabase-klienten.
Hvordan du kontrollerer overskriving av filer med alternativet upsert.

Deretter skal du lære hvordan du sikrer filene dine med Storage Policies!

Gratis å komme i gang

Lær deg Supabase som backend som tjeneste med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 11
Leksjoner: 40

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Lagre filer i Supabase-bøtter» gratis?

Ja – hele teksten i «Lagre filer i Supabase-bøtter» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Supabase som backend som tjeneste-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Supabase som backend som tjeneste inneholder totalt 4 leksjoner.

Hva lærer jeg i «Lagre filer i Supabase-bøtter»?

Forstå hvordan De oppretter og administrerer lagringsbøtter, og laster opp ulike filtyper programmatisk til Supabase-prosjektet. Du øver på Supabase som backend som tjeneste med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Supabase som backend som tjeneste?

Ingen tidligere erfaring er nødvendig. Supabase som backend som tjeneste på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Lagre filer i Supabase-bøtter»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Supabase som backend som tjeneste-leksjonen?

Ja. Alle Supabase som backend som tjeneste-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Lagre filer i Supabase-bøtter
Håndtere tilgang med policyer
Laste opp og hente medier
Bilde-transformasjoner og signerte URL-er

← Tilbake til Supabase som backend som tjeneste