How to Upload Images to a Supabase Storage Bucket From a Next.js App
Storing images in a database is generally not recommended. Doing so can quickly become expensive due to the amount of storage and processing power required. Using a cost-effective and scalable storage service like Supabase storage is better.
Below you’ll learn how to upload images to a storage bucket using the Supabase JavaScript client library and how to serve the images in a Next.js application.
Creating a Supabase Project
If you don’t already have a Next.js application ready, follow the officialNext.js getting started guideto create your application.
Once you’ve done that, follow these steps to create a Supabase database:
After creating the project, create a storage bucket.
Creating a Supabase Storage Bucket
A storage bucket allows you to store media files like images and videos. In Supabase, you can create a storage bucket on the dashboard or use the client library.
To use the dashboard, follow these steps:
Next, you will set up a Supabase client in your app to interact with the bucket.
Setting Up the Supabase Client
Begin by installing supabase-js client library via the terminal:
Then create a new folder named lib at the root of your application or in the src folder if you are using it. In this folder, add a new file namedsupabase.jsand use the following code to initialize the Supabase client.
Replace the project URL and the anon key with your own details which you can find in theSupabase project settings. You can copy the details in the .env file and reference them from there.
Now, in supabase.js, you should have:
Once you’ve done that, create a form that will accept the images.
Creating a Form That Accepts Images
Insidethe Next.js app folderof your application, create a subfolder nameduploadand add a new file namedpage.js. This will create a new page available at the /upload route. If you are using Next.js 12, create upload.js in thepagesfolder.
In the upload page, add the following code, to create the form.
When you select a file and click the submit button, the form should call the handleSubmit function. It’s in this function, that you’ll upload the image.
For large forms with multiple fields, it can be easier touse a form library like formikto handle validation and submission.
Uploading an Image File to a Supabase Storage Bucket
In the handleSubmit function, use the Supabase client to upload the image by adding the code below.
In this function, you are creating a unique file name by concatenating the file name and a UUID generated by the uuid npm package. This is recommended to avoid overwriting files that share the same name.
You will need to install the uuid package via npm so copy and run the command below in the terminal.
Then, at the top of the upload page, import version 4 of uuid.
If you don’t want to use the uuid package, there are some othermethods you can use to generate unique ids.
Next, use the supabase client to upload the file to the storage bucket called “images”. Remember to import the supabase client at the top of your file.
Note that you are passing the path to the image and the image itself. This path works the same as it does in the file system. For instance, if you were saving the image to a folder in the bucket called public, you would specify the path as “/public/filename”.
Supabase will return an object containing the data and error object. The data object contains the URL to the image you just uploaded.
For this upload function to work, you must create an access policy that allows your application to insert and read data in a Supabase storage bucket by following these steps:
You should now be able to upload images without raising an access error.
Serving the Uploaded Images in Your Application
To serve the image on your site, you need a public URL, which you can retrieve in two different ways.
You can use the Supabase client like this:
Or you can manually concatenate the bucket URL with the file path:
Use whichever method you prefer. Once you have the file path, you’re able to use it in the Next.js image component like this:
This code will display the image on your site.
Creating Robust Applications With Supabase
Using this code, you could accept a file from a user through a form and upload it to Supabase storage. You can then retrieve that image and serve it on your site.
Besides storing images, Supabase has other functionality. you’re able to create a PostgreSQL database, write edge functions, and set up authentication for your users.
Enable fast project set up with Supabase in React.js applications.
Not all true crime is about hacking, slashing, and gore.
Unlock a world of entertainment possibilities with this clever TV hack.
It’s not super flashy, but it can help to keep your computer up and running.
Who asked for these upgrades?
Your iPhone forgets what you copy, but this shortcut makes it remember everything.
