Supabase Storage API: A Practical Example

Hey guys! Today, we’re diving deep into the Supabase Storage API. If you’re building a modern application, chances are you’ll need a place to store files – images, videos, documents, you name it. Supabase Storage offers a scalable and secure solution, and in this article, we’ll walk through a practical example to get you up and running.

What is Supabase Storage?

Supabase Storage is a service provided by Supabase that allows you to store and serve files directly from your Supabase project. It’s built on top of Google Cloud Storage, meaning you get all the reliability and scalability of Google’s infrastructure without having to manage the complexities yourself. Think of it as your own cloud-based file server, but way easier to use.

Why use Supabase Storage? Well, for starters, it integrates seamlessly with the rest of the Supabase ecosystem. This means you can leverage Supabase’s authentication, database, and real-time features to build powerful applications. Plus, it offers features like access control, transformations, and versioning, making it a robust solution for managing your files. Imagine you’re building a social media app. Users need to upload profile pictures and share images. Supabase Storage provides a secure and efficient way to handle these files, ensuring they’re readily available when needed. Another common use case is storing documents for a document management system. Supabase Storage can handle various file types and offers features like versioning to track changes over time. Let’s say you are building an e-commerce platform where you need to host product images and videos. Supabase Storage can easily store and deliver these assets, ensuring a smooth user experience. So, whether you’re building a simple web app or a complex platform, Supabase Storage can be a valuable tool in your arsenal.

Setting Up Supabase

Before we start coding, let’s set up our Supabase project. If you don’t already have one, head over to supabase.com and create a new project. Once you’ve created your project, you’ll need to grab your Supabase URL and API key. You’ll find these in your project settings under the “API” section. Keep these handy; we’ll need them later.

First things first , sign up for a Supabase account. It’s free to get started, and the generous free tier is usually enough for initial development and testing. Once you’re logged in, create a new project. Choose a name, a region closest to your users (this helps reduce latency), and set a database password. Remember this password, as you’ll need it to connect to your database later. After creating your project, navigate to the “Storage” section in the Supabase dashboard. Here, you’ll see a default bucket named “public”. Buckets are like folders in your cloud storage. You can create additional buckets to organize your files. For this example, we’ll stick with the default “public” bucket. Now, locate your Supabase URL and API key. These are essential for connecting to your Supabase project from your application. You can find them in the “Settings” section under the “API” tab. Keep these values secure, as they grant access to your Supabase project. Once you have your URL and key, you’re ready to start integrating Supabase Storage into your application. Think of it this way : setting up Supabase is like preparing your workspace before starting a project. You need to gather your tools (URL and API key), organize your materials (buckets), and ensure everything is in place before diving into the actual work. With Supabase set up and your credentials ready, you’re now equipped to start building amazing things with Supabase Storage.

Installing the Supabase Client Library

Next, we need to install the Supabase client library for our chosen language. In this example, we’ll use JavaScript, so we’ll install the @supabase/supabase-js package using npm or yarn:

npm install @supabase/supabase-js
# or
yarn add @supabase/supabase-js

Make sure that you have Node.js and npm (or Yarn ) installed on your machine. These are essential for managing JavaScript packages. Open your terminal and navigate to your project directory. This is where your package.json file is located. Now, run the command npm install @supabase/supabase-js or yarn add @supabase/supabase-js , depending on your package manager preference. This command downloads and installs the Supabase client library along with its dependencies. Once the installation is complete, you can import the Supabase client into your JavaScript files and start interacting with your Supabase project. Think of the Supabase client library as a bridge between your application and the Supabase backend. It provides convenient functions and methods for performing various operations, such as authenticating users, querying data, and uploading files to storage. Without this library, you would have to write a lot of boilerplate code to handle the underlying API requests and responses. By using the client library, you can focus on building the core functionality of your application and let the library handle the low-level details. So, installing the Supabase client library is a crucial step in setting up your development environment and enabling seamless communication with your Supabase project. With the library installed, you’re now ready to start writing code that interacts with Supabase Storage.

Initializing the Supabase Client

Now that we have the client library installed, we need to initialize it with our Supabase URL and API key. This will allow us to connect to our Supabase project and start using the Storage API.

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

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY'
const supabase = createClient(supabaseUrl, supabaseKey)

Replace YOUR_SUPABASE_URL and YOUR_SUPABASE_ANON_KEY with your actual Supabase URL and API key. This code snippet imports the createClient function from the @supabase/supabase-js library. This function is responsible for creating a Supabase client instance, which we’ll use to interact with the Supabase API. We then define two variables, supabaseUrl and supabaseKey , and assign them the values of your Supabase URL and API key, respectively. Make sure to keep your API key secure and avoid exposing it in client-side code. For production environments, it’s recommended to store your API key in environment variables or a secure configuration file. Finally, we call the createClient function with the Supabase URL and API key as arguments and assign the returned client instance to the supabase variable. This supabase object will be our main entry point for interacting with the Supabase API. Initializing the Supabase client is like establishing a connection to your database. Once the connection is established, you can start sending queries and performing operations on the data. Similarly, once the Supabase client is initialized, you can start using the Storage API to upload, download, and manage files in your Supabase project. So, make sure to initialize the client correctly with your Supabase URL and API key to ensure that your application can communicate with the Supabase backend.

Uploading a File

Let’s start by uploading a file to our Supabase Storage bucket. We’ll use the upload method to upload a file to a specified path within our bucket.

const filePath = 'example.txt'
const file = new File(['Hello, Supabase Storage!'], filePath, { type: 'text/plain' })

const { data, error } = await supabase.storage
  .from('public')
  .upload(filePath, file, { upsert: true })

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

This code snippet demonstrates how to upload a file to Supabase Storage using the upload method. First, we define the filePath variable, which specifies the path where the file will be stored in the bucket. In this case, we’re uploading the file to the root of the public bucket with the name example.txt . Next, we create a File object, which represents the file we want to upload. The File constructor takes three arguments: an array of data, the file name, and an optional options object. In this example, we’re creating a text file with the content “Hello, Supabase Storage!” and setting the file type to text/plain . Then, we call the upload method on the supabase.storage.from('public') object. The from('public') method specifies the bucket we want to upload the file to, in this case, the public bucket. The upload method takes two arguments: the file path and the File object. We also pass an options object with the upsert property set to true . This tells Supabase to overwrite the file if it already exists at the specified path. The upload method returns an object with data and error properties. If the upload is successful, the data property will contain information about the uploaded file. If an error occurs, the error property will contain details about the error. Finally, we check if an error occurred and log the appropriate message to the console. Uploading files to Supabase Storage is like placing items into a storage container. You specify the path (location in the container), the file (the item), and any options (like whether to replace existing items). The upload method handles the process of transferring the file to the Supabase Storage bucket, and you can check the data and error properties to ensure the upload was successful. Always handle potential errors when working with APIs . This helps prevent unexpected issues and provides valuable information for debugging.

Downloading a File

To download a file from Supabase Storage, we can use the download method. This method returns a Blob object containing the file data.

const filePath = 'example.txt'

const { data, error } = await supabase.storage
  .from('public')
  .download(filePath)

if (error) {
  console.error('Error downloading file:', error)
} else {
  const url = URL.createObjectURL(data)
  console.log('File downloaded successfully:', url)
  // You can now use the URL to display the file or perform other operations
}

This code snippet demonstrates how to download a file from Supabase Storage using the download method. First, we define the filePath variable, which specifies the path of the file we want to download from the bucket. In this case, we’re downloading the file located at the root of the public bucket with the name example.txt . Then, we call the download method on the supabase.storage.from('public') object. The from('public') method specifies the bucket we want to download the file from, in this case, the public bucket. The download method takes one argument: the file path. The download method returns an object with data and error properties. If the download is successful, the data property will contain a Blob object representing the file data. If an error occurs, the error property will contain details about the error. Next, we check if an error occurred and log the appropriate message to the console. If the download was successful, we create a URL for the Blob object using the URL.createObjectURL method. This URL can be used to display the file in an <img> tag, download the file to the user’s computer, or perform other operations on the file data. Finally, we log the URL to the console. Downloading files from Supabase Storage is like retrieving items from a storage container. You specify the path (location of the item in the container), and the download method retrieves the file data as a Blob object. You can then create a URL for the Blob object to access and use the file data in your application. Remember to revoke the URL when you’re done using it to free up resources.

Deleting a File

To delete a file from Supabase Storage, we can use the remove method. This method takes an array of file paths to delete.

const filePaths = ['example.txt']

const { data, error } = await supabase.storage
  .from('public')
  .remove(filePaths)

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

This code snippet demonstrates how to delete a file from Supabase Storage using the remove method. First, we define the filePaths variable, which is an array of file paths to delete. In this case, we’re deleting the file located at the root of the public bucket with the name example.txt . Then, we call the remove method on the supabase.storage.from('public') object. The from('public') method specifies the bucket we want to delete the file from, in this case, the public bucket. The remove method takes one argument: an array of file paths to delete. The remove method returns an object with data and error properties. If the deletion is successful, the data property will contain information about the deleted files. If an error occurs, the error property will contain details about the error. Finally, we check if an error occurred and log the appropriate message to the console. Deleting files from Supabase Storage is like removing items from a storage container. You specify the path (location of the item in the container), and the remove method deletes the file from the bucket. Be careful when deleting files , as this action is irreversible. It’s always a good idea to double-check the file paths before calling the remove method.

Conclusion

And there you have it! We’ve walked through a practical example of using the Supabase Storage API to upload, download, and delete files. Supabase Storage provides a simple and powerful way to manage your files in the cloud, and with the Supabase client library, it’s easy to integrate into your applications. Happy coding!

Supabase Storage simplifies file management in modern applications by providing a scalable and secure solution for storing and serving files. Throughout this article, we have covered the essential aspects of using the Supabase Storage API, from setting up your Supabase project to uploading, downloading, and deleting files. By following the examples and explanations provided, you can effectively integrate Supabase Storage into your projects and leverage its features to enhance your application’s functionality. Remember to handle errors appropriately and secure your API keys to ensure the stability and security of your application. With Supabase Storage, you can focus on building amazing applications without worrying about the complexities of file storage management. So, go ahead and explore the possibilities of Supabase Storage and unleash your creativity!