How to create a public URL for Supabase storage file?

 

Step 1: Set Up Supabase Project

 

Before you can create a public URL for a Supabase storage file, ensure that you have a Supabase project set up. If you don’t have a project yet, go to the Supabase website and sign up or log in. Create a new project by following the on-screen instructions.

 

Step 2: Configure Supabase Storage

 

Go to the "Storage" section in your Supabase dashboard to configure storage for your project. Here, you can create a new "Bucket," which is a container for storing files.

• Bucket Configuration: Ensure the bucket has the appropriate name fitting your project requirements.

 

Step 3: Set Bucket Permissions

 

To allow public access to a file, you need to configure the bucket permissions accordingly. By default, files in a Supabase bucket are private, so you need to change this setting.

• Permissions Setup: Enter the bucket's settings and navigate to the "Policies" section.
• Policy Creation: Construct a policy to make the files within the bucket publicly accessible. Use the SQL editor provided by Supabase to write policies.

Here’s an example SQL policy that grants read access to all users:

BEGIN;
  CREATE POLICY "Public read access" 
  ON storage.objects
  FOR SELECT USING (bucket_id = 'your_bucket\_name');
COMMIT;

Be sure to replace 'your_bucket_name' with the actual name of your bucket.

 

Step 4: Upload Files to Supabase Storage

 

Upload your files to the configured bucket in Supabase storage.

• File Upload: Use the file upload tool in your Supabase dashboard under the "Storage" section. Choose the target bucket and upload the desired files.

 

Step 5: Obtain Public URL

 

Once the file is uploaded and the permissions are correctly set, you can generate a public URL.

• Fetch File URL: Navigate to the uploaded file in the Supabase dashboard and click on it.
• Copy Public URL: The dashboard will display a URL for the file. Copy this URL— it’s the public link you will use to access the file from anywhere.

For example, if your domain is 'xyz.supabase.co', your file's public path may look like this:

https://xyz.supabase.co/storage/v1/object/public/your_bucket_name/your_file_path

 

Step 6: Programmatic Access (Optional)

 

If you want to access the URL programmatically, you can use the Supabase client library.

• Client Initialization: Initialize Supabase in your project with your URL and key.

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

const supabaseUrl = 'https://xyz.supabase.co';
const supabaseKey = 'public-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

• Fetch File URL Programmatically: Retrieve the public URL using the API.

const { data, error } = supabase
  .storage
  .from('your_bucket_name')
  .getPublicUrl('your_file_path');

console.log(data.publicUrl);

Ensure 'your_bucket_name' and 'your_file_path' are replaced with your actual bucket name and file path.

By following these steps, you can create a public URL for any file stored within Supabase storage. Access to this URL will allow anyone on the internet to view the file provided they have the link.