Using supabase storage for media upload with nextjs and form submission

In this post we would be reviewing using supabase to store media files when building a web application. A practical example would be using it to store the images uploaded with a journal for a travel journal web application i'm currently building.

I started off by creating a row in the table for where i needed to store uploaded image link as i was retrieving the image as a cdn link

I then proceeded to make a bucket in the storage section of supbase and made it a public bucket as well

After making the bucket i then gave the created bucket a RLS policy that assigns a folder to every authenticated user to store their files. It is a set template by supabase so this was really helpful and saved me some time.

Assuming everything had been done correctly we should then be good enough to move to the code to create the upload function image. I would be using typescript with nextjs and zod for my form. In my client form component i create a cdn link using my project reference id which can be found in the project settings in the supbase dashboard under the reference Id section

i then proceed to create my upload image function just like this below

and a function to get the images from the bucket to display them with this code

while this gets image from the cdn link to enable you delete it from the bucket with the click of a button

and then for the form button to upload the image to the subabase bucket using this code

while we display the image and also a button to delete said image if need be

and since we have thjis form fields inside our form we can submit the image link along with the other sections of the form as it is cdn link is extracted from the storage bucket and stored in the imageUrl row to be called upon at any point in time. If all the steps are followed accordingly we should then see the image a user uploads to their individual supabase folder like the image below