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

what's going on guys it's Cooper codes and in this video we are going to be building an image gallery using react Superbass and postgard SQL the platform is going to allow users to authenticate using the Super Bass magic link which allows user to put in their email get a magic link then they can check their email press the login button and will bring us to our application and fully authenticate us from here we can see that this user has two images stored on their account we are using a super based storage to manage the images and also use a CDN we can then upload images to our Gallery by pressing choose file selecting one of the jpegs or pngs here and then you'll see it's fully loading in these images to our website and we can even look at the back end for a certain user we have a bucket which stores all of our images and each user has their own unique folder we can see right here is the image that we just loaded into this user's folder this is a great project for anyone who's interested in adding large files to their Super Bass applications whether you're planning on storing images is 3D objects pretty much any large file understanding how to use super based storage will help you out a bunch this video is officially sponsored by Superbass and I just want to say thanks so much to the Super Bass team for choosing my channel to be part of one of the content storms they're doing to promote their launch week 6. Super Bass is honestly a great project and I've worked with it in many of my projects unsponsored if that says anything about how good it is from December 12th to the 16th they're going to be having a launch week where every single day they announce new things about Super Bass so new functionality and just more stuff could create amazing web applications there will be a link in the description with this launch week and thanks so much again to Super Bass for sponsoring this video let's get started by initializing our Super Bass application so first we're going to go to superbass.com then we can press sign in in the top right you should eventually get to this app.superbase.com projects we're then going to press new project and you can use your current organization I'm going to name this project Image Wall video can really name it whatever you want I'm then going to generate a password here in this video we're not going to be using the database password so I wouldn't worry too much about it then choose the region that's closest to you and then press create new project Super Bass isn't going to set up our project so this will probably take a couple of minutes all right once your project looks something like this that means we're ready to go we can scroll down a little and find our project URL and our API key these two values are what we're going to need to initialize Super Bass in our application so let's get into creating our initial react application I'm going to get started by going into an empty folder in Visual Studio code and saying npx create Dash react Dash app and then we're going to name our react application client all right so now that our react application is fully initialized we can go into the client folder by saying CD client firstly I'm going to install all the packages we will need for Super Bass so I'm going to say npm install at Super Bass slash auth Dash helpers Dash react just some helper functions to make the authentication stuff easier then we can say at Super Bass slash Super Bass Dash js on top of that I'm going to npm install react Dash bootstrap and bootstrap alongside uuid the bootstrap libraries are going to help us make some front-end components and the uuid is going to help us create unique IDs as we upload images to our website so npm install those we now have everything we need to initialize Super Bass in our application we can go to the source folder and then go to index.js inside of index.js we are going to initialize Super Bass so we can start by saying import the session context Provider from at superbase auth helpers then we're going to also imp Port the creates client from Super Bass JS to create our super based client and save it to a variable we can say const superbase is equal to the create client this is going to take in two different parameters so if we go back to Super Bass right here on the main project page we can get our project URL here so copy that and that's going to be our first parameter here then the second parameter is going to be that super bass key you can go in here and you have to grab this API key the Anon public one we can copy it put some strings and then paste it into our application so you should have that URL first and then that long A non-key second we now need to provide a Super Bass client to our session to our application pretty much so our application has access to everything Super Bass can do so we can make that session context provider do just that and we want to wrap it around our application like this and we can tell it to provide the Super Bass client as this Super Bass variable we created a line 9. so as we use super bass operator operations it's going to use this client we created at line night alright so that's everything we need to do to set up Super Bass now we can get into creating our initial login page so we can head over to app.js we don't need any of the react boilerplate so we can just delete this we can start by heading over to source and then app.js at the top I'm going to import the container from react Dash bootstrap this is going to give us a container we can wrap around our whole application to keep the styling kind of consistent and when we use react bootstrap we have to make sure to import the bootstrap slash dist CSS slash bootstrap.min.css this is all the necessary CSS for creating these bootstrap components so we can make this return statement and just simplify it to a regular just container element from bootstrap I want to align all our content to the center of the screen and I also want to give it some bootstrap classes for example making it a container that is small so container Dash SM and also giving some margin to the top so margin top and I'm going to give it a value of 4. so I'm going to make a little comment here describing what we're going to do if the user exists then show them the Images slash upload images page like you guys saw initially if they don't exist for example then show them the login page because I'm just going to make this application super simple and pretty much make it within just the app just for simplicity's sake and so if we need to see if the user exists or not we need to use the use user Hook from superbase so we can import two hooks actually the first one is going to be use user and then to get access to the Super Bass client we can say use super bass client those are going to come from the at Super Bass slash auth helpers so to get access to the user that's currently in our Super Bass session which super base 100 manages by the way we can just say const user is equal to use user and as noted here it's either going to give us a Super Bass user or null and just because we're here I'm going to say const superbase is equal to use superbase client we're going to use this later in the tutorial so we know that if the user does exist it's going to give of us a user if they don't exist it's going to give us null so down in our container we can kind of split up our code by saying if the user is equal to null then with the ternary statement here we're going to show certain code so for example make a little react fragment saying H1 welcome to Image Wall so right when they initially go to your website they'll say welcome to the website after this colon is kind of like the else so if the user does exist we then want to show a little component that's going to say something else for example H1 your Image Wall and so if I wanted to make this comment just a little bit easier to read it's actually in this order is how I coded it out is if they don't exist show the login page so welcome if the user does exist show their own Custom Image Wall I'm now going to use a form from bootstrap to make a login form for our user to log in through so we can scroll to the top and then I'm going to get form and also a button from up here I'm going to go down here initialize the form component like this I'm then going to make a form.group to hold our text input I'm going to give it some margin on the bottom by saying class name is equal to MB which means margin bottom Dash 3 and I'm also going to set this form group to have a style of Max width 500 pixels so it doesn't span super wide because it's just a text input we can then use a form.label to show a little text label to what is this actual input we are making for example enter an email to sign in with a super bass magic link then we can use a form.control which is actually going to be our text input within our text input I'm going to say the type is equal to email the placeholder is just going to say enter email and then whenever our text input changes we want to save that change to a state so this is going to be an error for now just so we remember it so we can start by going to the top of our application and importing use State and I'm also just going to import use effect while we're up here from react and then I can say that the const email so the email they're typing in and then also set email is equal to a use state of an empty string and so if the user ever typed in a character for example changes our text input we want to take the event of the text input and then set our email value equal to the event.target.value which is going to get the value of whatever is currently inside of this form dot control we can then make a button which is going to allow the user to submit so I can say variant equals primary then I can make it say get magic link so now we can npm start our application just to see what it looks like so far alright looks pretty good we can also go in here and just do a little console.log email to see that value of our state whenever it changes so now if I type anything you guys will see that this value of our state is going to be equal to whatever the user is inputting pretty cool now we actually want to have it when you press get magic link Super Bass authentication is going to send the user an email to log into our website so let's go create that so we can start by going to our so we can start by going to before our return statement and creating an asynchronous function magic Link login inside of here we can make our first call to Superbass so we can get the data and the error out of our await statement here by doing this syntax where we can set it equal to a weight superbass.auth DOT sign in with one-time password is what this technically means then we can set up the email equal to the user's email so we're setting the email property of this object equal to the email value of our state up here and so we can say if there is an error from superbase I'm just going to do an alert error communicating with Super Bass and just because it's a common error I'm going to say make sure to use a real email address then just for developer's sake we can also just console.log the error then in the else statement if there are no errors we can assume things went well so we can do a little JavaScript alert saying check your email for a Super Bass magic link to log in and so now we can go down to where our button is and we can change this on click event to run so we can use an arrow function pointing to what Logics we want this on click to run with you can say magic Link login just like this so what's going to happen is when you press on this button it's going to run our code up here assuming we don't get any errors they're going to give us an alert to check our email there will be an email from superbase inside of there and when we press on that link in our email it's going to then show us your Image Wall because we're going to be a logged in user at that point so let's go check this out make sure to refresh your react application and I'm going to use Cooper codes 2 gmail.com I'm going to press get magic link it's going to tell me to check my email so let's go do that all right so I can press confirm your sign up and so when a user logs in for the first time it'll say confirm your sign up but this is going to work just the same as a regular magic link you're going to press confirm your mail and then we are now officially a logged in user into our site so it's not showing us anything about us right now user is not null anymore so it's showing us some different content on our page let's go add some more content such as showing the current logged in user and just a simple sign up button as well so I'm going to use a paragraph showing that the current user is equal to the user object.email which is a property from superbase I'm also going to make a button very simple bootstrap button that just says sign out and when this gets clicked so when the on quick event gets called we can make it call a function such as sign out which is something that we're about to go create so let's take this sign out scroll up to the top and now we can make an async function sign out like this and Super Bass is super easy with this I'm just going to make a const error so getting the error out of the Super Bass await statement here where we can say await superbase dot auth dot sign out and one of the main reasons why we can just make it this simple is this this use user hook at line 10 is handling all the different functionality of refreshing our user when superbase logged us out and also refreshing our user when we get logged in as well so all that functionality for handling new users logging in and logging out is all done within this line at line 10 so super bass makes it super simple so if we go to our react application we can see that our current user is you know this user who we are and so you guys don't have to do this but you know it's worth doing we can sign out right now by just pressing sign out we'll then go back to the page because our user is now gone and we can just type in our email again to get the magic link to get back in so I'm just following my new magic link I'm going to press log in and here we are we are logged in again so there you go the authentication is super simple and allows us to make something pretty fast and so I'm going to go into our styling here and then make a little HR to put a line in between our kind of content at the top and then also all the images from our users so I'm going to make an H3 saying your images now we're getting to the point where we need to set up up our Super Bass storage so let's get into that alright guys this is a super important part of the tutorial so make sure to pay attention to every step I do here but I'm going to make it as easy as possible we can start from our initial Super Bass dashboard here and we're going to want to go to the left under storage we then need to create a bucket which is going to hold all of our different information for our users images so we can press create a new bucket and I'm going to call it images so I'm going to make this a public bucket which is going to make our CDN public so you can go to a certain link for an image and pretty much send it to anyone an important part here is you can only edit or delete images or add new images if you're a verified user so once you have images and public bucket we can say create bucket right here right now we're going to have an empty images bucket which is exactly what we'd expect we can go to our policies here now we can create policies for how are users able to create images or delete images so go to the storage policies of images right here and then go to the right and press new policy you're then going to want to press get started quickly so this is going to help us get all the SQL stuff set up very fast thanks to some Super Bass templates so press create a policy from a template here and for this video we are going to be using the give users access to only their own top level folder named as the user ID so you can imagine every single user is going to have their own unique folder where they can store their own unique images so make sure to press this specific option and then press use this template I want to give users full access to any operation on their own images so I'm going to say select insert update and delete so that means users can do any of those operations Superbass handles everything else for you so now once these are all green you can go to the bottom right and press review these are pre-generated SQL policies we can just press save policy on the bottom right alright guys so if you have an images with four different policies that says select insert update and delete you're good to go this is going to allow our user from our react application to you know make images delete images look at certain images all that different type of stuff so now we can go back to react and work on uploading images to our database so under our current user here I'm going to make another paragraph saying use the choose file button below to upload and image to your gallery I'm then going to make a form dot group and I give it a class name of margin bottom three so it kind of has an emphasis on it just kind of splits up the content by putting some march on the bottom of it and I'm also going to give this a style of Max width 500 pixels so we don't have that super long input across our entire screen we're then going to make a form.control which is going to be a type of file we want to only accept image slash PNG and image slash jpeg here so if you try and upload a different type of image it's probably not going to work so make sure that you're working with pngs and jpegs for this project if you specifically want to upload other file formats look up form control file formats except it will probably give you a huge list of a bunch of different types of files and so when this file changes when the on change event happens that means someone uploaded to this actual file so when the upload happens we can take the event of the upload and point it to a function such as upload image with that certain event this event right here is very important because it's the event coming from the file input and so through this event we're able to get access to the file that the user uploaded so let's go create the actual Logic for upload image so we can roll up to the top I'm going to go under our authentication code here and make an async function upload image with the current event I'm going to let the current file that the user wants to upload equal to the e.target dot files of zero so this is getting that first file technically from what the user is trying to upload so this was kind of discussed plainly before I'm going to take a second to explain what's happening when we upload images right now our SQL only allows a certain user so let's say our user ID is equal to Cooper for example if my user ID is Cooper I'm only going to be able to access the Cooper folder and so when I upload images I want to upload them to Cooper slash my name of image.png for example and so if I ever wanted to you know mess up someone else like Lindsay slash you know my name of image.png it's not going to let me upload to Lindsay's folder because I'm currently logged in as Cooper and the SQL says I only get access to Cooper's folder I think that's worth explaining before we make this upload logic because now we can get the data and the error out of our Super Bass call here so I'm going to say await Super Bass and I'm going to do all these different dots on a different line to really separate it out we're going to access Superbass dot storage and going to say dot from this is going to ask which certain bucket do we want to use I want to use the images bucket that we just created I can then dot upload to the certain bucket and it's going to ask in what path in this bucket do you want to upload to well I know I have to upload to the user.id plus the slash so just like we have here and then I also need to add the name of my file in this video though we are going to use a uuid here to make a to make a universal identifier for our image to explain why you use uids over a image name for example is let's say someone wanted to upload Taylor swift.png and then they happen to have another file on their computer named Taylor swift.png and they wanted to upload them one after another when they upload this second file it's going to say yo you already saved Taylor swift.png to your database and so you can't do that again and so how do we solve that problem is we use uuid which is going to create a unique ID for the image for us and so to get access to the unique ID generator we can go to the top of our application and import V4 as uuid V4 from uuid which is a package we installed earlier so now we can scroll to the bottom here and add the unique ID of this image for example uuid V4 when you call like a function it's going to return a string which is just like a bunch of characters so it's going to make it like Cooper slash a bunch of random characters that uuid generates for us and you might be like uh where are we uploading the file well upload takes a second parameter which is the actual file and so we can get access to the file by look at this we already have the file at line 33 that we can just use here and so assuming that our user is fully authenticated and they're working through the correct folder which they are because it's their own user ID Super Bass is going to allow this operation and so if we get data back from this upload we want to then refresh our images and so I know it's kind of getting crazy guys but now we have to make a get images function to kind of load all of our images that we're getting as we upload them and then if we don't get any data back that means we have an error from this upload so we can say console.log error and so this get images is going to help us refresh our images and guys I know it's a lot of a bunch of different functions but hopefully you guys are kind of following one step at a time get images is going to get us all the images from a certain users folder so just like at line 37 here if I'm in the Cooper folder it's going to give me access to all the images inside of my folder so my own little image gallery so to make get images I'm going to go to the top of our code and create an async function get images this is going to talk to Superbass right away and so it's going to say const data comma error is equal to await Super Bass we're then going to access the dot storage go to the Dot from images then I want to get a list of all the different names of our images and so we can get this from saying user I'm going to say question mark because sometimes we won't know if they exist just to keep us safe here dot ID plus the slash Cooper slash same exact thing happening here then we want to put some options as to how we search for this thing that we're listing through our directory I want to make it a limit of a hundred I want an offset of zero it's going to give us 100 images and offset means directly from the top or directly from like the first part of your search then we need some sort by parameters this is going to be equal to an object that needs two different things it's going to ask for the column going to set equal to name and then the order which I'm going to set equal to ascending if you're interested in how to actually create more different types of ways to list I would recommend going and looking up super based list documentation they show you a bunch of different things related to these different search options and so this list is going to give us access to a bunch of image objects so it's going to look something like this and image one just to give an example is going to have a property that's very important here called the name so let's just say one of my names in my image is subscribe to coopercodes.png because we're being hosted on a CDN what we can do is this we can say okay to load image one we can take our cdnurl.com like you know it's that's not what it is but I'm going to show you guys what it actually is in a second slash subscribe to coopercodes.png and then this is going to give us that hosted image just like if you were to like look up an image on Google for example or if you've ever uploaded an image to a platform like Discord it's a very similar process and so in our array we're going to get access to all the names of our images which we can then point to our overall CDN and so I'm going to finish up this get images code here and then I'm going to discuss the actual CDN logic in a second so we'll be back to this don't worry guys so if the data does not equal null that means we have some data that we can set to where we want to store images so because we know that images is going to be a list like this array here we can make another use State at our top saying const images comma set images is equal to use state of an empty array we can then set the images equal to the data because if I didn't explain this well enough data is going to be equal to this array like this so that way we have access to all these images inside of our images State otherwise what we're going to do is we're going to say alert error loading images console.log error alright guys so that was a bunch of code let's go back and make sure to npm start your react application and we can upload an image to our Super Bass project so I'm still logged in as coopercodes to a Gmail I can choose a file I'm going to upload anywhere here and you guys will see it's uploading in the background and we didn't get any errors so that means we probably have a bucket that got created over on our super Bay Side so let's go check that out and before you guys get a headache for like five hours Super Bass does not refresh automatically so you have to press the reload button on your buckets here and boom here we go check this out we now have a user so their user ID isn't as simple as just Cooper for example but it is unique to the user so Cooper codes 2 a Gmail is represented by this string right here and in his account we now have an uploaded image which is this album cover over here so I'm going to show you guys something pretty neat these images get hosted through a CDN I would say for this video don't get too worried about what a CDN is but check this out we can copy the URL paste it into our search bar and get access to the image and so you'll see this is public to our user and we're able to get access to the image by pretty much going into this link and so we can copy this link and bring it over to our react application so I'm going to go to the top of our react application and comment this like this and paste it in so look at the link it's initially the URL of our Super Bass project under the storage V1 object Storage Public and then images which is the name of our bucket so here's some stuff to think about this image is right here is the name of our bucket this next slash is the name of the folder that's our user ID so this is the user ID then afterwards this is the actual unique ID created for that specific image and so let's break down that problem we can access certain images by making a const CDN URL equal to this whole initial part of the domain here so we can say it's equal to this string and if we ever want to grab an image we can say CDN URL plus the user.id because that's the name of the folder then we have to make a slash here because we're going into the slash let me show you guys this slash right here and then it's going to be the name of the image is what this ending part of the domain is plus the image.name that's how we're able to access the user's images and so right now when our images get uploaded we are running get images if it's successful and what does get images do it's taking all the images from that certain users folder and giving it to our set images state so right now we have data inside of images that we can show to our user so let's iterate through this data to show the actual images to our user and I'm going to copy this thing at line 13 and bring it down so I'm just going to take some notes and a comment here to make everything as simple as possible it's also important to note that images is going to be a list of images like image 1 image two kind of like I discussed before and so I'm going to use some rows and columns from bootstrap here so I'm going to scroll up get the row column and also card which we're going to store the image in we can then scroll back down and I'm going to create a row to store all our images on an extra small screen it's going to show only one column per row on a medium-sized screen or larger is going to show three different images per row and we're also going to give it a class name of g-4 to give some spacing around the columns now we can map through our images by saying images dot map and so this is looping through every single image and to get access to the image we're currently at we can make an image here and then we can point a function to some logic I'm just going to return some code right away and now we can make the actual column that's going to hold our image in this slot inside the column we are going to make a bootstrap card which is kind of a simple way to display information and it's going to have a card dot image and I'm going to give it a variant of top which is going to give it some different styling and the source of this image incredibly important is going to be equal to what we have right here it's going to get the full initial URL the user's ID the Slash and then the current image.name this image is coming from the Callback function right here which is accessing a specific image as we Loop through then close this image then we can make a simple card.body inside of this I'm also going to make a button just going to have a variant of danger and it's going to say delete image so we're going to give users the ability to also delete images from their Gallery delete image and it's going to want us to have a key on the this column one thing that I did just to kind of make a unique key is we know that the URL is going to be unique so we can just go in here and just make that key equal to the whole URL of our image before we go back and check out our react application one very important thing we have to do is we have to have it when the user loads our website then images get loaded as well right now we are currently only loading images when they upload images the only call we have to get images is within upload image and so I'm going to make a very simple use effect which is common for wanting to run code when we initially start our application and I'm going to have the effect run whenever our user gets changed so for example if a user went from null to logged in for example I want to run that use effect then and use effects also going to run initially regardless of if user is changed or not so I'm going to do one important thing if the user exists and this is important because the printers saying only when the user exists do we want to get images because if we have no you know image image if we have no user we have no images to get so if the user does exist we want to get the images of that certain user and this is important for pretty much grabbing data in general from a website so let's go back to our react application all right this is great so we can see that we have the image from our CDN being shown we can also upload another image boom and so it's going to update right away and there's ways to make it so the loading isn't so delayed you can kind of do some tricks but I'm not going to show anything like that in this tutorial it's very raw in that as soon as the CDN gets data then we're showing data to our user and we can even see that if we go back to our Super Bass bucket we can refresh and we will have our two different images inside of our application pretty cool and we can see we have our two different images inside of our application pretty cool but right now if you press delete image it's not going to do anything so let's go create the logic for deleting images so I'm going to go down to our actual jsx elements first and when we press delete image I want to run an on click function this is going to run a function call here that's going to be called delete image and I want to pass in the image.name so the current name of the image we want to delete so let's go Define this function by scrolling up and we can make our function called async function delete image I'm then going to put in an image name parameter here so we we can get that and so to delete an image we can say const error is equal to await Super Bass dot storage Dot from images so from the images bucket that we created what we want to do we want to remove an image and so remove is going to take in all the different paths that you want to remove from your bucket so it's actually going to take in an array and it's very important that it's an array even if you're doing just one thing or just one deletion we can then ask to remove something at a specific path for example the path of the user.id plus C slash plus the image name that we passed in as a parameter right here now when that's done we can say if there is an error we can then alert that specific error otherwise what I want to do is I want to run get images again so this is going to get our new list of images and kind of update everything so if we deleted an image it's going to show our images without that deleted image anymore it's a pretty simple functionality to get delete image running alright so we can now go go in here and let's delete this Nine Inch Nails cover here boom it's gone and so if we go over to our Super Bass and I'm actually showing you guys this so you don't get confused we need to reload before it shows us new changes and we will see the only image we have inside of here is our bonnivar cover no more Nine Inch Nails we can even delete all the different images from our buckets reload this Super Bass actually manages these folders for you when the user.id gets created it's managed during those SQL policies and so if you delete all the images from a user the folder is also going to get deleted but if we go to our react application and remember we're still authenticated we can choose another file to upload and you guys will see it's then going to show up in our bucket again alright guys so that is the full project hopefully this has been helpful when it comes to learning about how can you use super based storage in your actual react applications just to show off some functionality we can then sign out of our current user and I'm going to go to Cooper codes3 gmail.com so I was previously in Cooper codes 2. we can get a magic link here go confirm our sign up and and you'll see now that I'm inside Cooper codes 3 even though we have a different user that has an image inside of here since I'm in a different email I'm not going to see their images I can only see my own images in my own image gallery so if you're creating something like profiles for example with own unique content this can also be very interesting for that regard and if I decide to upload some stuff here for example I'll upload two different images we can then go to our buckets and we will see that we are going to have two different folders these first folder is going to be Cooper codes 2 with just as Taylor Swift album cover and then the other one is going to have the two other album covers that we just uploaded alright guys thanks so much for watching this video I know it's kind of a bit of a longer one but this is a relatively serious project Super Bass gives you access to some real tools and it's directly integrated with postgresql so you can have a bunch of different file storage have it on a CDN and have it inside of your application for example this time of the Creator album is 164 kilobytes that doesn't seem like a lot of data but in the terms of like the internet and how you know you make real web applications scale that is a bunch and so creating a system like in this video is super beneficial to actually making websites that scale especially when it comes to images and other large forms of content if you're interested in more Super based content or any other kind of programming related content feel free to subscribe to my channel and thanks so much for watching

Channel: Cooper Codes

Views: 16,507

Keywords: supabase file upload, supabase file, supabase tutorial, supabase v2 tutorial, supabase storage, react supabase, react supabase storage, react v18 tutorial, react tutorial, supabase beginner tutorial, supabase image storage, supabase postgresql tutorial, supabase, supabase launch week, launch week supabase, supabase launch week 6, supabase content storm, supabase storm content, supabase for beginners, intro to supabase, introduction to supabase, supabase in 100 seconds

Id: 8tfdY0Sf2rA

Length: 34min 26sec (2066 seconds)

Published: Wed Dec 07 2022