Build An Image Gallery With Supabase Storage and React (Upload Images with Supabase)

Thanks so much to Supabase for having me as a content creator for their content storm ⛈️! Get ready for Supabase Launch Week 6 here: supabase.com/launch-week
In this video I show how to create a React application with Supabase that allows users to store images in their own image galleries. Users will log in with Supabase Magic Link authorization, and then we handle image upload with PostgreSQL and Supabase Storage. This project is great for any React developers interested in large file storage, and creating a system like this video is a great step forward when creating apps that can scale with massive traffic. You can apply the concepts in this video to creating social media feeds, creating sharable MP3s, sharing 3D objects across users, and many other use cases involving larger files! End of story: Supabase bucket storage is epic.
Full Code: github.com/coopercodes/Supaba...
Enjoying my videos? Sign up for FREE content here: www.thecoopercodes.com/
0:00 Intro
1:40 Initialize Supabase app
2:38 Setup React app + Supabase initialization
4:50 Creating Magic Link login page
11:57 Creating Image Gallery page
13:45 Setting up Supabase Storage
15:59 Image upload to gallery
21:15 Get images from Supabase Storage
24:30 Explaining CDN links
27:15 Showing images to user
30:37 Delete user image
32:49 Functionality test, thanks for watching!

[@ghassenlabidi5171]

Very well explained and straight to the point! Thanks!

[@joscfc9719]

Really enjoyed the vid, I've been following supabase database and auth tutorials and this is just the tutorial i needed to get started with supabase storage!

[@grzegorzmozdyniewicz410]

Very helpful video, now supabase is much more easier !

[@FaizalHeesyam]

simple and clear tutorial. nice pace, easy to understand. keep it up! 👍🏻

[@elliottkan]

I've just started learning how to code a few months ago. I love your energy and way of breaking things down with pseudocode! Keep it up Cooper, you've got a new subscriber :)

[@CooperCodes]

Hey Elliot I appreciate the kind words! This channel has a bunch of videos designed for those who know the basics, and want to go to the next level with some projects! Glad it’s useful for your situation, and thank you for the sub :)

[@georgelucasribeiro3696]

Man... you saving me again.
Thank you so much for this nice tutorial

[@paulthomas1052]

I really enjoy these tutorials - great content and nice time-frame. Look forward to your next one. Thanks :)

[@CooperCodes]

Glad they're helping you! Thanks for the support :)

[@rajsoni8555]

Nice one. Helped me get past the hindrance in my ongoing project. Thank you for making this.

[@CooperCodes]

Glad to help you get past that hurdle, thanks for watching!

[@roxo1763]

Best tutorial, thank you so much.

[@maskman4821]

Very useful and practical tutorials, thank you so much 🙏

[@CooperCodes]

You're very welcome! Thanks for watching :)

[@brianwalsh7040]

can you make this exact thing but with nextjs 13 (using the app router)

[@revaprasetya]

Great video, thank you sir

[@correiapas]

Great video, It was super clear. Thanks.

[@CooperCodes]

Thanks so much Pedro, glad the video was helpful :)

[@RaldCodeVBNET]

Your one of the best youe teaching react, your clearly delivered and ex[lain

[@psyferinc.3573]

thanks cooper more of supabase please with nextjs

[@Deus-lo-Vuilt]

Nice bro , I liked supabase and react !

[@CooperCodes]

Glad you enjoyed using the technologies! Thank you for watching :)

[@thekannadacoder8134]

thank you so much , it really helped

[@CooperCodes]

Glad to hear it! I found the bucket storage stuff confusing initially so glad it helped you :)

[@rodrigoorellana2389]

amazing explanation... question: amazing explanation... question: what happen if we remove a imagen the bucket from the supabase dashboard? I remember firebase takes the changes instantaneously and reflect them in the frontend

[@devardilshad3944]

amazing thanks for the clarification very insightful. I want to implement a delete image feature but supabase gives an error and i hope you make a short video about that if possible.

[@hendrywilliam]

Hello sir, how do we connect table (lets say i created a user table which contains username and password) and storage, and every file uploaded by specific user has its own id? Thanks

[@yourdailyanimalfact]

Cooper how would one use image bucket data in a table of. products like we created in another video of yours. How can we upload a product image and combine it with product name and description table data.

[@Holsp]

Hey, I tried logging in with Supabase email authentification, and when I tried to put the new image into the bucket. I get this error:
"401" "Invalid JWT" "new row violates row-level security policy for table"
I don't really know what to do with it. I have my cookie so I don't know why it's not taking my JWT. I am a beginner in Auth and don't know if I am missing something. Would you have any ideas?

[@dungsidietpi]

when I put the website on github, when I click on the link to login in gmail, I can't navigate to the "Your image" page

[@adamor993]

Could you explain this when i use nextjs? I have a error between server and client components

[@ThomazMartinez]

Using UUID will also solve caching issues on client

[@user-jx4wv9ee8b]

Brother, is this java code?

[@user-ye4ut8bb2v]

How could I print the file name without calling the entire supabase URL? Just the user's file name

[@APerson-d5s]

Can you do the same thing with Nhost Image hosting and Hasura?

[@CooperCodes]

Going to look into Nhost soon, will check out their image hosting and hopefully make some content regarding that :)

[@APerson-d5s]

@@CooperCodes thanks!

[@LazriYouness-vr6ej]

@everyone how to this with next js please

[@khaqim4148]

you did not create any table?

[@raynosebastian6275]

bro do you have any react + supabase google auth tutorial ?

[@CooperCodes]

Yup, this one: m.th-cam.com/video/tgcCl52EN84/w-d-xo.html

[@raynosebastian6275]

@@CooperCodes yoo thanks for the reply bro ♥️, im new in this web dev world so rn i kinda lost 😫

[@CooperCodes]

​@@raynosebastian6275 It can be intimidating at first! The projects on my channel aim to take you from a beginner skillset (knowing some fundamentals) to bring you to an intermediate understanding (with the ability to build your own projects!). Best of luck on your web dev journey :)​ Thanks for watching

[@RaldCodeVBNET]

CReate more videos

[@studioph5.6]

steap by step with your video and "new row violates row-level security policy for table "objects"" again and again =\

[@studioph5.6]

turned out you have to apply policy for objects, not just policy for yout bucket. Not sure why it works for @CooperCodes. For example, to upload images use following policy for table.objects via sql editor:
ALTER TABLE storage.objects ENABLE ROW LEVEL SECURITY
CREATE POLICY objects_insert_policy ON storage.objects FOR INSERT
WITH CHECK (auth.role() = 'authenticated')