How to delete files from Supabase storage?

 

Step 1: Set Up Supabase Client in Your Project

 

To interact with Supabase storage, you first need to set up the Supabase client in your application. If you haven’t already set up a Supabase project, follow these steps:

Create a Supabase account, and create a new project there. Once the project is created, you'll find the API keys on the project’s settings under the "API" tab. These will be used to set up the client.

Next, set up your project. If you're using Node.js, you can install the Supabase client library using npm:

npm install @supabase/supabase-js

After installing, set up the Supabase client in your code:

// Import the Supabase client
import { createClient } from '@supabase/supabase-js'

// Use your Supabase URL and API Key from your project by replacing the placeholders below
const supabaseUrl = 'https://your-supabase-url.supabase.co'
const supabaseKey = 'your-anon-key'

// Create the Supabase client
const supabase = createClient(supabaseUrl, supabaseKey)

 

Step 2: Access the Storage for Deleting Files

 

With the Supabase client set up, you can now proceed to delete files from your Supabase storage bucket. Assume you have already uploaded some files into a bucket, and you know the file paths of these files.

If you need to list files to find the correct path, you can do the following:

// List files in a storage bucket
async function listFiles() {
  const { data, error } = await supabase.storage.from('your-bucket-name').list('')
  if (error) {
    console.error("Error listing files: ", error.message)
  } else {
    console.log("Files: ", data)
  }
}

// Call the listFiles function
listFiles()

Simply replace 'your-bucket-name' with the actual bucket name you want to access.

 

Step 3: Delete a File from Supabase Storage

 

To delete a file, you need to know the path to that specific file within the storage bucket. Use the following function to delete a file:

// Delete a file
async function deleteFile() {
  const filePath = 'path/to/your/file.ext'
  const { data, error } = await supabase.storage.from('your-bucket-name').remove([filePath])

  if (error) {
    console.error("Error deleting file: ", error.message)
  } else {
    console.log(`File deleted successfully: ${filePath}`)
  }
}

// Call the deleteFile function
deleteFile()

Replace 'path/to/your/file.ext' with the path to the file you want to delete, and 'your-bucket-name' with your actual storage bucket name.

 

Step 4: Handle Possible Errors

 

While performing operations, you should always handle potential errors gracefully. You might want to implement more advanced error handling based on your application's needs.

Consider using try-catch blocks for better control and longer processes:

// Improved file delete function with try-catch
async function improvedDeleteFile() {
  try {
    const filePath = 'path/to/your/file.ext'
    const { data, error } = await supabase.storage.from('your-bucket-name').remove([filePath])

    if (error) throw error

    console.log(`File deleted successfully: ${filePath}`)
  } catch (error) {
    console.error("Unexpected error occurred while deleting file: ", error)
  }
}

// Call the improved file delete function
improvedDeleteFile()

By properly handling errors, you can improve user experience and enhance the reliability of your application.

 

Step 5: Finalize and Test

 

Once everything is set up, you should test your delete functionality to ensure it works as expected. Try deleting a few files, checking the operation’s result, and ensuring that the files are indeed removed from your storage.

By following these steps, you have successfully set up a way to delete files from Supabase storage. Happy coding!