Supabase, a popular open-source alternative to Firebase, provides users with a PostgreSQL database and also offers a storage function. This storage feature allows users to store pictures and files conveniently, as well as set read permissions. In this article, we will learn how to operate and utilize Supabase’s storage space.
To access the storage interface, users can navigate to the Storage page from the background tab. This page resembles a database table, and any newly added buckets will be displayed under “All buckets”. Buckets can be added either from the front-end or by clicking on the panel in the background. For this demonstration, we will add a bucket directly on the background by clicking the “New bucket” button.
When adding a new bucket, there are certain restrictions and guidelines to keep in mind, such as the inability to change the bucket’s name. For testing purposes, we will open the bucket to the public initially and set up Row Level Security (RLS) later. After successfully adding the bucket, a panel resembling a folder will appear on the right side of the page.
Once the bucket is added, users can proceed to upload their first picture. Simply drag and drop the desired image into the designated area to upload it. After successful upload, the file will be displayed in a list format in the background. By clicking on the image’s name, users can view the image information on the right panel. Furthermore, clicking the “Get URL” button allows users to directly copy the image’s URL and paste it into any browser tab to view the image.
At this point, the uploaded image can be viewed by anyone since the current bucket does not have RLS protection. To set RLS, users can click on the “Policies” button on the left-hand side to enter the settings. From there, users can target each file and set the appropriate RLS. A useful official storage space template provided by Supabase can be utilized to manage image and file permissions effectively. For demonstration purposes, the article sets the read permission for authenticated users only. The corresponding SQL is as follows: CREATE POLICY “Enable select for authenticated users only” ON “storage”.”objects” AS PERMISSIVE FOR SELECT TO authenticated USING (true).
Finally, users can go back to the bucket’s settings and click on “Edit” to close the public access. By pasting the previously copied image URL into a browser, users will still be able to view the image due to caching. However, if they attempt to upload a different image, it will not be visible because the appropriate permissions are not set.
One practical application of Supabase’s storage space is storing user-uploaded avatars. Users can prepare the screen by providing an option to select a file and then executing the upload action to transfer the image to Supabase’s storage space. Using the official SDK, uploading files is simplified by preparing the storage path and file person variables. Once the file is uploaded, a limited-time browsable link will be generated, and the image will be displayed accordingly.
However, it’s important to note that Supabase’s storage space has a limit on the free plan, allowing only 1GB per project. Considering the high-quality images produced by today’s smartphones, this storage capacity can quickly be filled. Therefore, the free plan is ideal for experimentation and learning purposes.
In conclusion, Supabase’s storage function is user-friendly, and with the support of the official SDK, front-end operations become effortless. The SDK offers functions suitable for various operating situations, making storage space management accessible to developers. Although there is a capacity limit on the free plan, it serves as an excellent platform for learning and practice.