Step 1: Set Up Supabase

• Go to the Supabase website and sign up for an account if you haven't already done so.
• Once logged in, create a new project. Provide a project name and choose the desired region.
• When the project is created, navigate to the project dashboard. Here, you will find your API keys, which you will need for the setup.
• Enable the "Storage" feature in the left-hand sidebar under "Database" to start using file storage capabilities.

Step 2: Configure Storage Buckets

• In the Supabase dashboard, click on "Storage" in the left-hand sidebar.
• Create a new storage bucket by clicking on "New bucket" and provide a name for your bucket. Make sure the name is descriptive, as you will reference this name in your app.
• Optionally, configure policies for public access or define specific rules for file access as needed.

Step 3: Install Supabase Client

• In your project, install the Supabase JavaScript client library using npm or yarn, depending on your preference:
• For npm: npm install @supabase/supabase-js
• For yarn: yarn add @supabase/supabase-js

Step 4: Initialize Supabase Client

• Create a new file for your Supabase configuration, typically named supabase.js or supabaseClient.js.
• Inside this file, initialize the Supabase client with your project URL and API key:
• Import the client: import { createClient } from '@supabase/supabase-js';
• Initialize the client:

  
  const supabaseUrl = 'YOUR_SUPABASE_URL';
  const supabaseKey = 'YOUR_SUPABASE_ANON\_KEY';
  const supabase = createClient(supabaseUrl, supabaseKey);
          

Step 5: Create an Upload Form

• Create a simple HTML form with a file input to allow users to upload files:

  
  Upload

    

Step 6: Handle File Upload

• Add an event listener to handle the form submission and upload the file to Supabase:

document.getElementById('upload-form').addEventListener('submit', async (event) => {
  event.preventDefault();
  const fileInput = document.getElementById('file-input');
  const file = fileInput.files[0];

  if (file) {
    const { data, error } = await supabase
      .storage
      .from('YOUR_BUCKET_NAME')
      .upload(public/${file.name}, file);
if (error) {
  console.log('Error uploading file:', error.message);
} else {
  console.log('File uploaded successfully:', data);
}

  }
});
    

Step 7: Retrieve Files

• To list or retrieve files, use the following Supabase Storage methods:

const { data, error } = await supabase
  .storage
  .from('YOUR_BUCKET_NAME')
  .list('public', { limit: 10, offset: 0 });

if (error) {
  console.log('Error listing files:', error.message);
} else {
  console.log('Files:', data);
}
    



• To get the URL of a specific file, use:



const { publicURL, error } = supabase
  .storage
  .from('YOUR_BUCKET_NAME')
  .getPublicUrl('public/YOUR_FILE_NAME.jpg');

if (error) {
  console.log('Error getting file URL:', error.message);
} else {
  console.log('File URL:', publicURL);
}
    

Step 8: Manage File Deletion

• To delete a file, use the following method:

const { data, error } = await supabase
  .storage
  .from('YOUR_BUCKET_NAME')
  .remove(['public/YOUR_FILE_NAME.jpg']);

if (error) {
  console.log('Error deleting file:', error.message);
} else {
  console.log('File deleted successfully:', data);
}
    

Step 9: Secure File Access

• To secure file access, ensure that your bucket and file policies are correctly set up. In Supabase, navigate to the "Policies" tab under "Storage" and configure access rules based on roles and permissions.
• To generate signed URLs for secure access, use:

const { signedURL, error } = supabase
  .storage
  .from('YOUR_BUCKET_NAME')
  .createSignedUrl('public/YOUR_FILE_NAME.jpg', 60); // URL valid for 60 seconds

if (error) {
  console.log('Error creating signed URL:', error.message);
} else {
  console.log('Signed URL:', signedURL);
}