Supabase backend palveluna · Oppitunti

Tiedostojen tallentaminen Supabase-säilöihin

Ymmärrä, miten tallennussäilöjä luodaan ja hallitaan sekä miten eri tiedostotyyppejä ladataan ohjelmallisesti Supabase-projektiisi.

Oppitunti 1/411 vaihetta

Tiedostojen tallentaminen Supabase-säilöihin on ilmainen Supabase backend palveluna-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Supabase backend palveluna-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Supabase backend palveluna-kurssilla on yhteensä 4 oppituntia.

Tervetuloa Supabase Storageen

Tiedostojen, kuten kuvien, videoiden ja asiakirjojen, hallinta on tärkeää monissa sovelluksissa. Supabase tarjoaa heti käyttövalmiin, S3-yhteensopivan objektitallennusratkaisun!

Se on suunniteltu skaalautuvaksi ja turvalliseksi, joten käyttäjien luoman sisällön tai sovelluksen resurssien tallentaminen ja tarjoaminen on helppoa.

Tallennussäilöjen ymmärtäminen

Ajattele säilöä tiedostojesi ylimmän tason kansiona tai säiliönä. Jokaisessa Supabase-projektissa voi olla useita säilöjä.

Järjestä tiedostot tyypin mukaan (esimerkiksi avatars, product-images).
Määritä kullekin säilölle omat suojaussääntönsä.
Säilöt ovat erillisiä, joten yhden säilön tiedostot eivät sekoitu toisen säilön tiedostoihin.

Säilön luominen hallintapaneelissa

Voit luoda säilöjä suoraan Supabase Dashboardissa. Siirry Storage-osioon ja napsauta ”New bucket”.

Anna säilölle yksilöllinen nimi ja päätä, onko sen oltava julkinen vai yksityinen. Tutustumme näihin vaihtoehtoihin seuraavaksi!

Julkinen vai yksityinen käyttöoikeus?

Tämä on tärkeä päätös säilöä luotaessa:

Julkiset säilöt: Kuka tahansa URL-osoitteen tietävä voi käyttää tiedostoja. Ne sopivat hyvin staattisille resursseille, kuten profiilikuville tai julkisille asiakirjoille.
Yksityiset säilöt: Tiedostojen käyttö edellyttää todennusta ja tiettyjä käyttöoikeuskäytäntöjä. Ne sopivat arkaluonteisille käyttäjätiedoille tai maksulliselle sisällölle.

Voit muuttaa tätä asetusta myöhemmin, mutta etukäteissuunnittelu kannattaa!

Latausten määrittäminen (JS)

Jotta voit ladata tiedostoja sovelluksestasi, käytät Supabase-asiakaskirjastoa. Varmista ensin, että Supabase-URL-osoitteesi ja anon-avaimesi on alustettu.

Käytämme yksinkertaista JavaScript-esimerkkiä. Kuvittele, että supabase on alustettu asiakkaasi.

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

Tiedoston lataaminen ohjelmallisesti

storage.from().upload()-metodi on ensisijainen tapasi ladata tiedostoja. Se tarvitsee säilön nimen, säilön sisäisen polun ja itse tiedoston.

Simuloidaan yksinkertaisen tekstitiedoston lataamista. Oikeassa sovelluksessa saisit tiedoston HTML-elementistä <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();

Tiedostopolut ja ylikirjoitustoiminta

.upload('path/to/file.txt', file)-kutsun ”path” määrittää, mihin tiedosto sijoitetaan säilön sisällä.

'my-image.jpg': Lataa tiedoston säilön juureen.
'avatars/user123.png': Luo avatars-kansion, jos sitä ei ole olemassa.

Oletusarvoisesti olemassa olevaan polkuun lataaminen ylikirjoittaa vanhan tiedoston. Voit hallita tätä upsert-asetuksella.

Ylikirjoitusten hallinta Upsert-toiminnolla

upsert-valinnalla upload-metodissa voit määrittää, mitä tapahtuu, jos samaa polkua käyttävä tiedosto on jo olemassa.

upsert: true (oletus): Korvaa olemassa olevan tiedoston.
upsert: false: Palauttaa virheen, jos samaa polkua käyttävä tiedosto on olemassa, ja estää näin tahattomat korvaukset.

Käyttäkää upsert: false -asetusta, kun haluatte varmistaa tiedostonimien yksilöllisyyden.

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

Kaikkiin tiedostotarpeisiinne

Supabase Storage ei rajoitu vain kuviin tai tekstitiedostoihin. Se käsittelee mitä tahansa sille annettavaa tiedostotyyppiä!

Kuvat: PNG, JPG, GIF, SVG
Videot: MP4, MOV, WebM
Asiakirjat: PDF, DOCX, XLSX
Ääni: MP3, WAV

Varmistakaa vain, että asiakaspuolen koodinne välittää oikean tiedosto-olion.

Pikakertaus bucketeista

Olette oppineet Supabase Storagen bucketit ja tiedostojen lataamisen. Testataanpa ymmärrystänne!

Vastaa interaktiivisessa oppitunnissa

Kertaus: tiedostojen tallentaminen

Hienoa työtä! Olette oppineet Supabase Storagen perusteet:

Mitä bucketit ovat ja miten niitä luodaan.
Miten julkiset ja yksityiset bucketit eroavat toisistaan.
Miten tiedostoja ladataan ohjelmallisesti Supabase-asiakasohjelman avulla.
Tiedostojen korvaamisen hallinta upsert-valinnalla.

Seuraavaksi perehdytte tiedostojenne suojaamiseen Storage Policy -käytännöillä!

Aloita maksutta

Opi Supabase backend palveluna tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 11
Oppitunnit: 40

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tiedostojen tallentaminen Supabase-säilöihin” ilmainen?

Kyllä – oppitunnin ”Tiedostojen tallentaminen Supabase-säilöihin” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Supabase backend palveluna-kurssin, päivitä CoddyKit PROhon. Supabase backend palveluna-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Tiedostojen tallentaminen Supabase-säilöihin”?

Ymmärrä, miten tallennussäilöjä luodaan ja hallitaan sekä miten eri tiedostotyyppejä ladataan ohjelmallisesti Supabase-projektiisi. Harjoittelet Supabase backend palveluna-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Supabase backend palveluna-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Supabase backend palveluna-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Tiedostojen tallentaminen Supabase-säilöihin”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Supabase backend palveluna-oppitunnilla?

Kyllä. Jokainen Supabase backend palveluna-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Tiedostojen tallentaminen Supabase-säilöihin
Käytön hallinta käytännöillä
Mediasisällön lataaminen ja hakeminen
Kuvamuunnokset ja allekirjoitetut URL-osoitteet

← Takaisin: Supabase backend palveluna