Integrate AWS Storage in React App | S3 | Bucket | Cognito

[Music] what is up everyone here we are with another beautiful nice tutorial on amazon and react and in this tutorial we will be actually storing files on the cloud on amazon cloud and then viewing them retrieving them deleting them and all sorts of cool stuff so i guess let's just get started because i can explain to you a lot of things that i'll be boring so the first thing you will do is go to console.aws.amazon.com and we're right here at the dashboard and uh here are a couple of things we need to do so first thing we'll do is we'll go to iem i think it's the identity something something whatever and then you're gonna go over to roles and then you're gonna create a role okay so you have a couple of options here uh we're just gonna leave the first one as is but you want to select s3 and then you want to select s3 here at the bottom to give it full uh if actually s3 full access and then we will say next let it think okay then here you're going to select s3 and you want to do amazon s3 full access i'll do that and i'll say tags we're not going to do any tags for now okay so the role name will be let's say react and we'll say uh storage row right so that's that and then we'll leave everything as is then we'll create the roll beautiful so the roll has been created if you come here you're gonna see it here which is react storage roll so that's beautiful now with that done so we're gonna head back over to the console all right so the other thing we're gonna do is we're gonna go into the cognito and uh you know set up some stuff here so i'll go to cognito then what i'll do is i'll say manage identity pools and then we'll create a new identity pool all right so here we are and now we're going to give it a pool name so we'll just call it react storage demo so it's the same as the app name now we want to do unauthenticated access which means is anybody i guess which has access to your app can load the upload files if you want you can add the authentication flow but we'll leave that for next tutorial because this will involve somebody to actually log in the username and password and a little bit more so you're going to check that off and then we'll say create pool all right so when that is done then we're gonna head over to view details and there are two kind of details one is for the authenticated one for the unauthenticated so i'll come over here to come over here to the unauthenticated and then what you want to do is this is the role name that actually uh i think they append the story demo name to it and then you want to click on the view policy document and this is what we're going to change so i'll click edit and i'll say okay all right so over here on the docks uh they have a couple of uh you know um samples you can see or just some helpers so i'm here at the storage uh option and then if you come here there are two things you can do so there's is a automatic setup that that requires the amplify cli and then here's the manual setup so we're doing the manual setup the automatic setup uh i mean you can try it but i i i'm just gonna show you the manual setup today you're gonna come over here to manual setup uh we're gonna do this later uh but the thing that i want to do is the auth throw so here's the one for the authorized um object you want to do the unauthorized so here's the anathrol what i'll do is i'll just copy everything and then i'll come here i'll take everything and paste it so now here as you can see there's the bucket name we haven't created a bucket name yet so i guess we can go ahead and create that so i'll say console. i'll go to s3 all right so we're here in the s3 so what i'll do is i'll say create a bucket and let's give this bucket a name so we'll say react bucket uh we're going to select our uh region so i'm canada i'll do that and we'll just uncheck this because we want to allow public access and i guess that'll be it for yeah we're not going to bother the about the rest we'll see create bucket it says that bucket is taken so how about i add my name to it grab soft i'll copy this so yeah react bucket grabs off let's see create bucket oh okay yes so i yeah i'm gonna check that we'll say create bucket and here we go the bucket has been created so if i click on it there's currently nothing in it keep updating stuff in it so i'll come back here and then i will just populate this with the bucket name all right so once that's all done uh what it's doing is actually giving permissions the kind of actions uh that you can do in the bucket uh with this role so we can you know get the objects we can put object in it we can delete objects and then here you can see the effect on it uh you can read more on the inside of documentation so it's attached to this bucket so once we're done with that then we're just going to say allow and now it's going to you know give you your um i guess the identity pool id that's what we're going to use in our code so you can have different platforms the one i'm going to choose will be javascript so what i'll do i'll just copy this and i'll paste it somewhere and uh i think that's it for this part so just go to the dashboard so currently you can see the activity happening there's no activity so now let's go create a react project and hook this up to this bucket all right so here i am at the command prompt and what we will do is quickly create react projects all right here we are and i can see the source [Music] all right so i'll come here now and let's uh start this all right very nice so we have our project here and let's switch back here and to vs code and i guess we will take everything out and i'll just say for starters you can remove this i'll just say h1 react aws storage demo so that's good so that's got that got updated okay so the next thing we're going to do is we're going to install some dependencies and i guess the only dependency we need is the aws amplify just hit ctrl tick and i'll say npm install aws amplify [Music] cool so with that squared away let's go to package.json and make sure that it's been brought in yeah so that's good all right so now we're just gonna get cracking here so we're gonna do the in it first uh and that can be done is the use effect hook also use effect and i'll just uh close this so i have the uh what do you call this by the way the co-pilot and that thing is trying to help me sometimes so i'll do this and yeah there you go that's pretty good all right so what i'll do is i'll come here and i'll say import and let's say amplify and the other thing i want to bring is storage so i'm going to bring these two because they'll be helping us down the line so once i have that done then i can come over here and configure the amplify service so what you will do is you will say amplify that configure well look at that guys smart uh and then we're gonna you know throw in some configuration stuff so first of all let me just close this and we're gonna configure two things so we're gonna configure the auth object and we need to configure the storage object so for the auth object i'll just put that here and then i'll close that right and then the other thing we need is the storage now i'll come here and then close that off like that all right so within the storage what we need is the aws s3 all right so i'm going to put that here and then close that off now what do we put inside all right so for the odd we need the identity pool id and we need to the put the region these are these are like required fields the minimum that you need so i'll come here and i'll say identity pool id right and we're gonna plug that in i don't know why this guy is putting this one um very strange and then for the region all on speech recognition for the region uh what we will do is we will put ca central one it's for canada so if you're in uh some other region you're just gonna put that and i'll show you where we get that from if you weren't paying attention before uh and then over here we're gonna put the bucket so i'll say uh whatever the bucket name was so i forgot what bucket name we chose and go to info here it is react bucket grabs off i'll copy that come here and stick that in here so i have that and i think you have to put the region again so say region ca central good now for the identity pool id that's the id that we got when we created the pool so i think i copied it somewhere in my clipboard so i'll come here and copy and paste it and i would encourage you to do the same just copy it when you get at that time because i don't know how to get to it after so i'm going to paste that here and i'll save everything so that should configure the amplify service for us and after this we should be able to uh you know start loading files and all sorts of stuff okay so now what we can do is we can come here and maybe add an input right and i want to have an input of typical file and that's not the class i want all right so we gotta choose file you know what i should do i should bring this over to the side so we can see this all right so now that we have these things side by side so i can come here click on choose file and i can choose file from here so that's all good uh so i guess for starters we can actually you know start you know just let's spit out the file name or something so i can use the ref for that so i'll say const ref is equal to use ref and let's set it to null and then i can come here and i'll say ref equals ref all right and then i can come here and i say on change right now i'll say handle file load all right now we're going to define the uh handler so you can say const handle equal to lambda function and then what i can do is i can say console.log console.log and let's just file the or i guess log the ref.current.files right i'm going to save it and i'm just going to come here and let me just refresh and then let me choose a file and damn nice so we got our file so we're not doing multiple files we're just going to do one file but you can definitely add that so the file name which is the sn array and then the first thing is that so i guess i can come here and i can say cons file name is equal to i'll say ref.current.oh look at that thing is smart copilot sometime can be very helpful actually all right so i'm just going to split the file name um let me choose a different file and it'll give me that file if i choose this file in 1879 give me that file cool all right so now we've got the file name uh what we can do is start uh you know uh storing this in the cloud so what i can do is i can say it actually knows that i want to do that so i'll say storage dot put um and then what you want to do is you want to give it the a file name so i'll say file name right and then the file content so i'll say uh ref yeah that's exactly whoa so that's actually right that's what we want to do and i'm just going to bring this here now this returns a promise so let's return the promise so i think we can just do response response and then come on help me yep here we go and i'm going to close this and actually i want to do you know catch catch any error yeah and i want to do console the error that's right okay so i'll save this and uh there's an error storage is not exported from aws amplify core let's see i think you need to bring it from aws amplify if i'm not mistaken right so i think we just have to add aws amplify it's not in the core so i just added that and then we had to refresh the app for some reason it just got stuck i was spinning uh so that fixes that problem all right so now once we have that i think we can put the file and if everything went successful we should be able to see the response so i'm just gonna bring up my console clear it up and let's fire it away and let's see if i uploaded this image okay we got an error that's good all right so it's saying uh that's good this error came up so now it is saying that access to blah blah blah has been blocked by course policy and okay so that means we need to configure the course policy the cross origin resource sharing and to do that we will go back into where our project is actually okay here we are so i will come over here and do so this is the bucket right and we're trying to put in that bucket but there's no permissions so you're gonna click on permissions and then you what you want to do is can kind of come over all the way to the bottom and we need to paste in some stuff here so i'll say edit and then i can paste the stuff here so if you remember like the docs so we already did the configuration here and now what we need to do is we need to do the course policy so this was for the unauthorized access we did that so here's the course policy setup so uh we we're at the console we're already at this place so i'll just do copy i've copied that i'll come here and paste as plain text so basically we're saying is allow you know all these operations um and then from every from any origin if you want to ask let's say you're building this app for someone and you know what the domain is coming from then you can restrict it to that domain so i'll say save changes and these have been applied and i think we should be able to now upload our image to the cloud all right so we got an object back and let's see what's in the object all right so we got a key so if you get this it means the image upload was successful so let's go to the console and take a look so here i am at the console so so far there's nothing let me do a refresh and wow there's a public folder and here we have an image so 1879 that's the one i uploaded let's try another one that's so much fun so i'm just going to come here and let's choose this 1912 and then we'll say open all right so we have it here let's go to the console i'm going to do a refresh yes we have the image all right that's that's amazing how that's very exciting actually all right so why don't we go ahead now and um you know let's see if we can display the images and maybe we can delete the images and as a bonus uh let's add a progress uh simple progress bar or something uh indicator uh that when we upload the images we can actually see the progress so pretty exciting stuff so now we're just gonna display the number of files we have on the cloud so for that we can use uh let's let's start with the something simple we'll say file set files so state will say use state it's an empty array for now and then i can bring in the use state all right so i'm going to save this so let's come here and let's uh let me just spit this out so how about we do files dot length right and currently zero because we don't have any files okay so we're gonna use a use effect for that so i'll come here and i'll close everything like that and then i'll come here refresh this all right and then whatever not what i want to do is i want to come here i want to say storage dot list right i'm going to give it empty empty parentheses if you do that that means i'll get all the files uh once i have that then i'm just gonna do it and i'll say files and then we can close it off like that like that then cache error and i can just console those and for files let's just console that actually let's do set file smart enough okay so perfect we got two files that's exactly what we have uh and now what we're going to do is we can actually list them in a table or form and see them in action so what i'll do is i'm going to get rid of this and i'll create a table so i'll have table and then i'll have t had i'll just quickly create this table [Music] right so um i just had to zip through this because uh i mean i'm sure you guys know uh this this much react by now uh but what i just did is created a table then i map over the file that i get from the cloud and then i you know give it to you the index that i have and then the key is the actual image name and this is what we use to retrieve the image and then i have two buttons uh which are the actions so i can show an image and i can delete an image and then here i have at the bottom is a image source uh which currently knows because there's no image but we can use this to actually show our image so i'm just gonna set a width on it and uh let's just make it 600 because if it's a big image i don't want to show it so now when we click on the show button i want to be able to show that image alright so now when we click on the show button i want to be able to show that image so i can come over here and hook that up [Music] quickly right so what we have is a button and just on a handle when i click the uh button and i have a handle show so i should display the image name when i click on it so there you go there you go let's do the same for delete [Music] okay so with that done so if i click delete so i'm getting that if i click show then i'm getting this now all we have to do is actually show these images so to do the show yeah you come here and you basically do storage dot get right and what you want to get we want to get the file let's just get the file and see what happens so if i just do show well nothing happens because it's a promise so i can do then response and then in that case i can say set uh image and image will be file so i'll say file right uh and then we'll cache error and all that thing right so if everything worked well i should see the image show show nothing is happening so let's click on this and see what's going on actually you know what uh let me do this let me just come here and lock this so i'll say dot console.log and we'll see a response and see what we get maximize this a bit let me clear this okay so we are getting uh we are getting this object if i click on it then see the image got downloaded if i click on it so there you go that's the ugly garage so it is image is there but for some reason it's not showing in here so let me inspect this we have an image oh image is there too looks like we forgot to do something ah here it should be response not not that all right so let me close this and let's show show perfect so now we can upload images and we can show them and they're coming straight from the cloud okay perfect so now let's add a feature when we add an image on update this table okay so for that we what we could do is we could take this and put that in a separate function so i can come here and i can say uh let's say class load images load images is equal to so then i can put all this code here right and then i can call maybe this from here i can still load images and then also after i'm done with the upload i can just to load images again so that you know the list is always updated so let's uh refresh this okay so we have two images i'm gonna come here and let me add a third one and bam you got that if i show it it's here i show this one i show this one nice now so we're going to do the same thing on delete so here's the delete and what you do is you're just going to do storage dot delete uh i think it's remove yeah it's remove file that then the response and then the error so once you get the once you get a response then i want to load images it knows actually what i want to do so i'll just save it and let's uh delete this image perfect and i'm going to delete the 1912 now one thing you could do is maybe refresh this to you know remove that but i'll leave that as an exercise okay so now we have a show we have a delete uh the other thing i want to do is show a progress uh that happens when we are actually um uploading the image so for that i'll come here and right below the choose file i'll add a maybe something that we can use to show the progress so i'll just say call it progress right and of course we need to define this so like always it will be a state and i'll say progress just set progress all right use state zero um well i don't know if i want to do zero because it's going to show zero so what i'll do is initialize it to nothing i'm going to show nothing so that's my progress now uh when you catch that well the progress actually happens when we are doing the upload and it will be here within the put function okay so the way we're going to do this is we're going to do it here so i'll come here to the put function and it will be the third argument it's an object and i'll just bring it here all right so what do we do well we say progress callback right and you get a progress i'm gonna close this so for now let's just console log it just to make sure that we are getting uh some progress so let's say met that round right and let's see progress that loaded damn that's pretty cool okay so it looks like autopilot or co-pilot helped us all right so i'm gonna come here and i'll say choose file and let's choose this file say open look at that you see the progress so that's pretty awesome uh now what we need to do is we need to somehow display that over here all right so now that that is done so what we can do is i can say uh set progress to progress but i don't want to redo that so i'll come here and i'll do like this i think that should work okay so let's choose the file and see the progress in action oh nice i like this okay i don't know why it's stupid microsoft man is doing with crap i don't want to see you anyways um so now i can delete this and let's uh delete this let's delete this so everything is gone uh now i can see that the progress is staying here of course i don't want that so i would like to clear this so what we can do is maybe define a timeout let's see if this thing is smart and we'll do it no okay so i'll say set progress to nothing after a second just come here and let me choose this file again okay we have a nice progress uh it got set to zero we don't want that so i'm gonna clear this and let's try again so i'm gonna choose another file and let's choose this one all right so let's choose a big file let's choose a movie for this movie okay guys so you got to movie too so that's the thing you can upload movies images anything you want i don't know if i can show this because you need a movie thing i can delete that one and so far only have two images let's check the cloud and see if we actually have two images so here i am on the back end what do we have 1879 1964 and i'm going to refresh pretty cool so um that's i guess it for uh how to store images on the cloud on amazon cloud using react and using the storage uh api i guess and i hope it really helped if you want more tutorials i'll make one in angular as well and please like and subscribe and bye for now

Channel: Grepsoft

Views: 404

Keywords: amazon, react, cognito, s3, storage, amplify, iam

Id: 3CgZXVndL4k

Length: 28min 13sec (1693 seconds)

Published: Sat Jul 31 2021