Supabase Backend as a Service · レッスン

Supabaseバケットへのファイル保存

ストレージバケットの作成・管理方法と、さまざまなファイル形式をSupabaseプロジェクトにプログラムからアップロードする方法を理解します。

レッスン 1/411 ステップ

「Supabaseバケットへのファイル保存」はCoddyKit上の無料Supabase Backend as a Serviceレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはSupabase Backend as a Service学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Supabase Backend as a Serviceコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Welcome to Supabase Storage

Managing files like images, videos, and documents is crucial for many apps. Supabase offers a robust, S3-compatible object storage solution right out of the box!

It's designed for scalability and security, letting you store and serve user-generated content or application assets with ease.

Understanding Storage Buckets

Think of a bucket as a top-level folder or container for your files. Each Supabase project can have multiple buckets.

Organize files by type (e.g., avatars, product-images).
Set different security rules for each bucket.
Buckets are isolated, meaning files in one bucket don't mix with another.

Create a Bucket in the Dashboard

You can create buckets directly from the Supabase Dashboard. Navigate to the Storage section and click "New bucket".

Give it a unique name and decide if it should be public or private. We'll explore these options next!

Public or Private Access?

This is a key decision when creating a bucket:

Public Buckets: Anyone with the URL can access files. Great for static assets like profile pictures or public documents.
Private Buckets: Files require authentication and specific policies to be accessed. Ideal for sensitive user data or premium content.

You can change this setting later, but it's good to plan ahead!

Setting Up for Uploads (JS)

To upload files from your app, you'll use the Supabase client library. First, ensure you have your Supabase URL and anon key initialized.

We'll use a simple JavaScript example. Imagine supabase is your initialized client.

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

Programmatically Upload a File

The storage.from().upload() method is your go-to for uploading. It needs the bucket name, the path within the bucket, and the file itself.

Let's simulate uploading a simple text file. In a real app, you'd get the file from an 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();

File Paths & Overwrite Behavior

The 'path' in .upload('path/to/file.txt', file) determines where your file lands within the bucket.

'my-image.jpg': Uploads to the bucket's root.
'avatars/user123.png': Creates an avatars folder if it doesn't exist.

By default, uploading to an existing path will overwrite the old file. You can control this with the upsert option.

Controlling Overwrites with Upsert

The upsert option in the upload method lets you decide what happens if a file with the same path already exists.

upsert: true (default): Overwrites the existing file.
upsert: false: Returns an error if a file with the same path exists, preventing accidental overwrites.

Use upsert: false when you want to ensure unique file names.

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

Handles All Your File Needs

Supabase Storage isn't limited to just images or text files. It can handle any file type you throw at it!

Images: PNG, JPG, GIF, SVG
Videos: MP4, MOV, WebM
Documents: PDF, DOCX, XLSX
Audio: MP3, WAV

Just ensure your client-side code provides the correct file object.

Quick Check on Buckets

You've learned about Supabase Storage buckets and how to upload files. Let's test your understanding!

対話的なレッスンで答える

Recap: Storing Files

Great job! You've learned the fundamentals of Supabase Storage:

What buckets are and how to create them.
The difference between public and private buckets.
How to programmatically upload files using the Supabase client.
Controlling file overwrites with the upsert option.

Next, you'll dive into securing your files with Storage Policies!

無料で開始

AI チューターと学ぶ Supabase Backend as a Service — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 11
レッスン: 40

無料で学習を始めるコース全体を表示

よくある質問

「Supabaseバケットへのファイル保存」レッスンは無料ですか？

はい。「Supabaseバケットへのファイル保存」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Supabase Backend as a Serviceコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Supabase Backend as a Serviceコースには全4レッスンが含まれています。

「Supabaseバケットへのファイル保存」で何を学びますか？

ストレージバケットの作成・管理方法と、さまざまなファイル形式をSupabaseプロジェクトにプログラムからアップロードする方法を理解します。ブラウザで直接実行するハンズオンコードでSupabase Backend as a Serviceを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Supabase Backend as a Serviceを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSupabase Backend as a Serviceは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Supabaseバケットへのファイル保存」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSupabase Backend as a Serviceレッスンでコードを書いて実行できますか？

はい。すべてのSupabase Backend as a Serviceレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Supabase Backend as a Serviceに戻る