How to upload files to Supabase storage?

 

Step 1: Set Up Your Supabase Project

 

First, ensure you have an account on Supabase and set up your project:

• Head over to the Supabase website
• Log in and create a new project
• Choose a suitable database location and name for your project

 

Step 2: Install Supabase Client

 

You'll need the Supabase client installed in your project to interact with Supabase services. Here’s how you can do it if you are using Node.js:

npm install @supabase/supabase-js

 

Step 3: Initialize Supabase Client

 

After installing the client, initialize it in your JavaScript/Node.js project:

const { createClient } = require('@supabase/supabase-js');

const supabaseUrl = 'https://your-project-ref.supabase.co';
const supabaseKey = 'your-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

Replace 'https://your-project-ref.supabase.co' with your actual Supabase project URL and 'your-anon-key' with your Supabase public anon key from the settings.

 

Step 4: Create a Storage Bucket

 

Buckets in Supabase Storage are used to organize your files. To create a bucket:

• Navigate to the Storage section in the Supabase dashboard
• Click on New bucket and provide a name

 

Step 5: Configure Bucket Policies (Optional)

 

To ensure proper access control, you may need to set policies for your bucket:

• Select your newly created bucket
• Click on the Policies tab and adjust your policies for access rules (such as read, write access for authenticated or anonymous users)

 

Step 6: Upload a File

 

To upload a file using the Supabase client, you’ll need to use the from and upload methods provided by Supabase. Here's an example of how to upload a file:

async function uploadFile(filePath, bucketName) {
  const { data, error } = await supabase
    .storage
    .from(bucketName)
    .upload('public/' + filePath.name, filePath, {
      cacheControl: '3600',
      upsert: false
    });

  if (error) {
    console.error('Error uploading file:', error);
    return;
  }
  
  console.log('File uploaded successfully:', data);
}

// Example usage
uploadFile('path/to/your/file.txt', 'your-bucket-name');

Replace 'path/to/your/file.txt' with your actual file’s path and 'your-bucket-name' with the name of your storage bucket.

 

Step 7: Verify the Upload

 

After uploading, you can confirm that your file has been successfully uploaded by checking:

• Directly in the Supabase dashboard, under your bucket files
• Using a Supabase client method to fetch and list files in your bucket

 

Step 8: Accessing Files

 

To access a file that has been uploaded, use the getPublicUrl method provided by the client:

const { publicURL, error } = supabase
  .storage
  .from('your-bucket-name')
  .getPublicUrl('public/' + filePath.name);

if (error) {
  console.error('Error getting public URL:', error);
} else {
  console.log('Public URL:', publicURL);
}

 

By following these steps, you should be able to successfully upload and manage files in Supabase Storage using a Node.js environment. Adjust the steps according to your specific environment setup or language (such as Python or other supported languages) as necessary.