Next.Js 14 - AWS S3 Image Upload using API Route

hey welcome everybody in this video I will guide you through the process of creating an AWS S3 bucket and applying public permissions so that the files are available to anyone on the internet in the second half of the video I will demonstrate creating a file upload form using nextjs and the official AWS S3 client SDK I will use the client side approach to create the form component and for the file uploads I will Implement a backend API and point using rout handlers I've already logged into my AWS account and I am currently on the homepage which is the AWS console in this part of the video we will need to do two things first create our S3 bucket and then create a user which we can use in our application to interact with the storage so first of all let's go to the S3 bucket I've already got it here in my favorites but you can search for S3 and then you'll pop up in here click on it and inside here you have your buckets listed let's create a new bucket give give it a name this name is actually going to be used in the URL so I'm going to put radis web storage for the AWS region I'm going to leave it as Europe London scroll down object ownership I'm going to leave the default to AC LS disabled which is the recommended option then here is the block public access settings for this bucket now the S3 bucket comes secured as default but in this case I want my bucket to be publicly accessible so people can see the images on my website and I'm going to unblock all public access of course we need to acknowledge this and then go down for the bucket versioning for this one I'm going to disable it and then feel free to put some tax this is optional and then for the default encryption I'm going to go with server site encryption with Amazon S3 managed keys and the bucket key is enabled that's pretty much it let's create our bucket and now as you can see here on my top bucket you will see that this one is public but the one that we just made says objects can be public now what we need to do is go inside this bucket and in fact I'm going to upload an image and demonstrate that this is not yet public so let's go to upload and then let's drag an image inside here so add files I'm going to add this cut and then let's upload okay the upload is successful let's go to the image by clicking on the file here and now this will give us the object URL which contains the name of the bucket that we created R's web storage and then at the end is the actual file name I'm going to click on this and as you can see we getting access denied which means that our image is not public so what we need to do now is go back to the bucket and then go to permissions and then from here we need to go down to bucket policy and we need to edit it if you click on the edit button you'll be able to see a lot of policy examples and also they have a policy generator I'm going to copy the policy and I will paste this policy in the description below as well but essentially this policy will allow all files to be publicly readable inside here the only thing that we need to change is this line here where we have bucket name you can find your bucket name from here is basically R web storage the one the name that you gave it so let's replace it don't replace the Slash and the star here just leave them as they are and now we need to go down and then save changes at this point we should be able to go back to object and if we click on the cut one more time and if we click on the URL you'll be able to see that the images are now working which means that oriles are now publicly available and anybody can download them the next thing that we need to do is to create a user for this bucket which we can give permissions to upload files edit files and all that and also that will give us access Keys which we can use in our application later on in this tutorial so for this we're going to be using the IM am which stands for for identity and access management so search for I am am and this is the one here so click on it navigate down here to uses and then as you can see I've already got one user that I've been using but I'm going to create a new one here create user and then let's give it a name radis storage user maybe I don't know what to call it and then let's go next from here we need to as you can see I've already got two groups I was testing one earlier but essentially we need to create a new group because you don't you probably won't have one yet so I'm going to create a new group and from here we need to give it a group name RIS RIS S free demo and then from here we need to give it the permissions and I'm going to give it full access permissions so search for Amazon S3 full access click on this and then create user group okay and now you can add many users to this user group which will have the same uh attached policy very much and the next thing that we need to do is Click next create user and that's it now we need to click on the user and from here we need to create or access key this access key is going to be used in our application so let's click create access key from here I'm going to use the command line interface and then let's scroll down to the bottom confirm your choice and then click next from here you can give it a little description this is optional and I'm just going to create the access key now we actually need to save the access key and the secret key from here you can either copy and paste it into another file or you can just download the XL file so click this and I'm going to open this super quickly and as you can see this has the access key ID and the secret access key which is great also one more thing that I wanted to do is if you go to the S3 bucket and if you click on it super quickly then the thing that I wanted to show you is that under properties we have the AWS region which we selected earlier I'm going to copy the name from from here just this bit here because we're going to need it in all nextjs application so I'm going to copy this and put region and paste it in here and we should be good to go save this so we can use it later on in this tutorial in this part we're going to create all nextjs application from scratch just so everybody can follow along I'm under NEX js. org and from here let's copy the script and let's create the application I'm already selected a fold the way I want to install my project and I'm going to do left shift right click and open in terminal and this is going to CD to this folder you can use your CD command of course to navigate I'm going to dog this to the left side and now let's paste the command which is MPX create-- app at latest press enter I will name mine A3 demo press enter typescript no a yes lint no TN TSS no Source directory okay up rout yes and then theault import Port Alias is no and this will install the project for us if I go back to the folder here you will see the newly created folder S3 demo and this is where we need to go now so let's CD to that folder CD S3 demo and from here we need to install the Amazon SDK so I'm going to clear this so you can see a little bit better here at the top and then I'm going to go to the official documentation which is docs. aws.amazon.com after selected the S3 client in here as you can see and this will basically have pretty much everything that you need to get started and I'm going to copy the mpm installation guide here so copy this paste it using right click so mpm install at aw- SDK client DS3 press enter and they should install everything that we need awesome now let's open this project in VD code I'm going to do code spirit and open and this should open VD code let's zoom in quite a bit so you can see I've got the project here on the left side and the last thing that we need to do is run this project by doing mpm run def this should start a local server on Port 3000 here it is and I can do control and click on it and this will open the website here on the right side as I was finishing editing this video next just released the next version which is version 14 but there is no breaking changes the code should work absolutely fine and also server actions are now stable so potentially if you wish I can do another video with Ser actions just comment below for now let's clear everything up just so we have a blank document and to do this we can go under the Explorer Source app and then page.js and I want to remove pretty much everything from here I'll leave the main but delete everything else so let's remove everything like so and this is where our form is going to be so form I'm going to type it and we don't need the image and that's it we are pretty much done I will leave the default Styles because when I save this it looks like the form is going to be centered which is fine with me of course you can do whatever you want with your styling now let's close this and let's have a look at the route handlers obviously in this project we using the latest nextjs 13 with the app router and if you want to have a look at the API stuff it's basically called route handlers it took me a while to find it this is what was allow us to create the API for this project so if you scroll down a little bit further you will see the basic usage so you can swap to JavaScript and copy this from here if you scroll down a little bit more you will see some of the supported HTTP methods we have get post and all the standard ones pretty much and let's start by testing all route with get and then I'll show you how to do the post because this is what we're going to be using let's minimize this and open VD code in big screen let's go to or app and let's create a new folder called API so this is where all of our API endpoints are going to live and also the next folder is basically what all API endpoint is going to be called so I'm going to call my S3 upload and this is going to be the actual URL as well and inside here we need to create another file called route. JS and that's it so this is going to be our API let's close the page.js and let's focus on the rjs from here let's paste the code that I copied just now and this is going to be an export async function which has the get method and then we have the request inside here just to test application we can do return and then we're going to be doing next response and when I press enter this is going to import next response from next SL server and all I want to do is display a message just to test out so do Json and then inside here we can do something like MSG for message and then hello API and now if I go to the browser by the way save this make sure that your project is running and you don't have any errors and if you go to the browser if you go to the browser if we do API SLS s3- upload you'll be able to see that we getting a Json message of hello API which means that our API is now working but we're going to be using Post in this tutorial because we're going to be posting data instead so this needs to change the post and obviously browses the default method is get hours to refresh this it won't work just so you know and we can use client like the Thunder client here or you can use insomnia or poan whatever you have available but basically Thunder CL is going to allow us to make the request and you can get it from the extensions here just search for where is it where is it search for tender client like this and just install it if you wish to now let's go to the tender client Collections and from here I've already created one earlier because I was testing but I'm going to delete it so delete and let's create a new one so here we click on this menu button new collection let's do S3 upload like so inside here I'm going to do a new request well it won't let me because I'm zooming so much let's try again so new request and this is going to be post file like so and here we go let me Zoom back in and let's minimize this instead of get we need to change this to post and we need to enter the API URL if I send this now we should be able to get the same message which is message and then hello API which is great now let's go back first of all we need to import the S3 client that we installed earlier so import and then here we can do s free client like so and then that would do the rest basically from at aws-sdk client DS free but we also want the put object command which is going to allow us to upload the files put object command this one here and that's it the next thing that we need to do is to set our credentials for the S3 client so let's do it in here cons S3 client give it a different name by the way for the cons and then new S3 client from here so that needs to match that but this one can be good whatever you like pretty much inside here we need to put the region you can either paste them in here or the better way would be to put it in an EMV file which we'll do a second and then I'm going to do credentials like so and then for the credentials we're going to have two options access key ID like so and then we're going to have the Ed up option which is secret access key just so you can see like that and we add them in here so what I'm going to do is create a EMV file that needs to be in the root of the folder so new file and we can do em. local and then inside here we need to create a couple of variables so we're going to create basically all of these let's see if I can copy them can I copy them yeah kind of so that's going to be there that's going to be there and then we have the region wow okay let's uh create the variables now but basically we need to do nextcore public and then I'm going to call this one AWS S free region and then this is going to be equal EU Westy and then the next one is going to be very much the same so next public AWS S3 and I'm going to do underscore access underscore key _ ID and then this is going to be equals this ID here and then the last one is going to be very similar so we're going to do underscore secret underscore access underscore key and that is going to be this key here uh just like that we need to remove the rest and also we're going to need the bucket name which I almost forgot so I'm going to copy this one as well and next public uncore S3 and then I'm going to do bucket name now the bucket name is going to be under your in fact this is it so the bucket name is what we pretty much call there you can also see from the URL is this here for me R web storage I'm going to copy this that's it we done with the environment variables and now if we go back to the route we can replace everything here by doing process em and then this is going to be the region so next so I'm going to paste the next public region the access key is going to be process EMV and then next public and then access key ID and now we need the secret so process. env. next AWS S free secret access key that's prettyy much everything that we need for the credentials and now let's focus on our route here so we getting the request when we post and and let's wrap everything into a try catch like so and I'm going to copy this and put it inside the arrow and maybe we can do error and we can either display the error or we can just do error uploading file and you can also display the error as well if you wish to you can grab it from here for the next one inside the try let's make some space so we can see a little bit better and we need to start with the form so basically we're going toate create a form and then inside this form we're going to have different fields and different fields are going to have different names for example in this case we're going to have a field with uh the name file so we want to grab the file and to do this we can do con and we can store all the form data into a const of form data to be descriptive as possible and then a wait because this is an asynchronous function we can do that and then we can use the request from here which comes from the server and then we use phone data data like so now this is going to give us access to the input so for example uh you might want to have an image or whatever in this case I'm just going to keep a generic and have file so we want to grab the file from the form and then in this case we're going to be using the form data and then to get the file we can just use the whoops we can just use the field name in this case which is going to be file or you can call it whatever you like I'll demonstrate this in a second from here and now at this point inside here you can do your checks now you might want to allow your users to upload zip files or images uh you might want to restrict them from uploading certain files or restrict them from uploading big files small files you know so you have to do your checks in here so in this case is but if we don't get a file then we want to return something so I'm going to do return next response and then inside here I'm just going to do Json let's do error and then this error is just going to say file is required so we basically check in if we have file and then if we don't we return the error and also you can put a status here if you wish to by doing status of 400 now the next thing that we need to do is if we have a file I'm going to be using buffer and buffer it's almost like this YouTube video that you're watching now instead of the whole video being downloaded first so you're able to watch it YouTube does is they load bits to start with so you can start watching it it kind of works that way and then buffer and then from here we do from await and then file which we grabbing from here so from the form and then this is going to be a right buffer like so and then from here we're going to do const file name equals await and we're going to have to create a function here which is going to upload the file foras so inside this function let's call it something like upload load file to S3 and then inside here we're going to pass two things we're going to pass the buffer and we're going to pass the file do name like so and I'll show you how this works in a second I think that's fine and now we need a next response as well inside here if we're successful so I'm going to copy and paste one and instead of error we can put success set this to true we can also pass the file name like so awesome I think this is looking good so now we need to create this function we can create pretty much anywhere we like so let's create it around here so this is going to be an asynchronous function async function and then it's going to have the file it's going to have the name of upload file to S3 and from here we can grab the file that we're passing and then the file name like so now from here we can store the file into a const const file buffer and this is going to be equals the file that we grabbing from here and then if you wish to you can even conso log the file name like let's do console do log and then we do file name like so okay um technically speaking technically speaking we can potentially test this if everything is looking good yep we can test this so if I go back to the tender client and if I click on body and then on the form if we look here on the right side you can select file so this is going to open this option to upload file and this is the field name this is what we are basically where is it where is it this is what we are getting from the phone this is going to be the field name so the field name is file like that and now we can upload an image or well a file I'm going to grab this image here cut. JPEG and let's click Send okay success true so this is good and also wanted to show you because we locked uh console lock the file name hopefully if I go back to the console of nextjs you should be able to see that we're getting cut. jpeg which was the name of the file so you can definitely use this to store it into your database and retrieve it later on the next thing that we need to do is set up the bucket parameters so we are able to upload file and we can also say where to upload it change the namings and all that com params and then inside here we need to put a few parameters so the first one is going to be the bucket name bucket and then from here we can do process EMV and then I forgot what it's called so I'm going to go to the EMV local and it's called bucket name let's paste the inside here then we need the key now the key here is basically your folder and your file name you could potentially create a folder by doing in I don't know my folder and in fact we can maybe test this or you can just put your file name inside here I've got single slanted quotes just so I can do template liters so it's a little bit easier but essentially I can grab the file name which is cat. jpeg in this case and literally this will save us cut. JPEG but if you want to have unique names you can use other libraries or you can just do dollar sign and then date dot uh now that's it and then we put comma and then for the body is basically the actual file so we can grab it from here we can just use file so I can grab file buffer uh this could be quite useful in here if you want to optimize before upload but again I don't know what you're going to be uploading so we just going to upload the normal file as it is image buffer and then the last thing that we can set is the content type and then for the content type I'm going to put image in this case and then jpeg J go and that's it of course you can change this to whatever you want wish the last thing that we need to do is to use this put object command which essentially is going to upload the file to our bucket will allow us to do that we can do const command equals new and then put object command like so and then inside here we pass the parameters that we just created now we can do a wait and then we can grab the S free client which is this one here don't mistake it don't put it like that put it with small name is something else so S3 client like so and then do send that's it and then we can send the entire command from here and I think that's pretty much it also we can return file name like so and that's it now if we TI things up let's save this let's go back to the browser let's go back to my bucket super quickly so we have object and earli in this tutorial I showed you that I uploaded this cat but I'm going to refresh right now and as you can see this was uploaded 12 or 1250 47 let's try to upload an image so I'm going to go to post file here from tender client and then obviously make sure that you select so that needs to be good file select your file it's already the cut. jpeg is already selected so I'm just going to press send okay now the file is successfully uploaded and if I go back to to my S free bucket then ready web storage and here we go we have the previous card that we uploaded and we have the one that we just done with the current date obviously the this is how it looks unformatted and if I click on the image you can see here the size and you can click on it and it will display in the browser which is great one thing that I wanted to show you super quickly is that if you go back to or route. JS here and inside here is where you can specify your folder if you wish to so I can do my folder slash and then the file name in fact we can remove the date now I just do the file name save it and let's reaort the file so success true file name cat. jpeg if we go back refresh we should be able to see my folder here at the bottom click on it and you see that we're getting cut jpeg now the problem with not having unique name is that if I re-upload this file it's going to replace it so look at the time right now if I just send another one and if we refresh it will just reupload this file which means that the old file will be replaced so watch out for that make sure that you have unique names if you need to and that's pretty much it for this part so in the next part we're going to create the front end form inside nextjs let's go to local host of 3,000 and this is where we have our form now I'm going to close this I'm going to close the environment variable and we have all API working now in this case it's pretty much uh up to you how you want to do it you can do as a component or whatever let's just do a component and inside here I'm going to create a new component and I can name it S3 upload form do jsx and that's it let's close this now let's import this component inside all page so I'm going to do import S3 upload form and then this is going to be from we can use the ad symbol and then app uh components and then S3 up form and now we can use this form inside here just by doing this and that's and you can pass properties if you wish to and so so obviously this is not going to work just yet so let's create the form here and for this I'm going to be using client so use client by the way I have done this with server actions as well if you wish I can show you in another video just comment below it works really well actually I prefer with Ser actions but they're still in development so potentially they might change so that's why I'm doing it with an API anyways inside here we're going to have to create a function cons upload form and then this is going to be another function like so we need to export it so export and then default and then this is going to be upload form like so inside here we need to do a return and then inside the return we can put all form okay let's have a look whether this works form great so everything is working so far and we can start building all form let's do a right click and format this document and I'm going to remove this to B two okay so the first thing I'm going to do is inside here I'm going to create an H1 and I'm just going to do upload files to s fre bucket and now we need to create our form so this is going to be form like so open and close and inside this form we're going to have a onsubmit event listener and then this is going to be handle file oh no handle submit and then we're going to have an input this input is going to be the type of file and this is going to be accept we can just accept any files if you wish or you can just do image and all sorts of images like that or we can list the files and then we're going to do on change handle file change like so and we need to close it so we're going to have to create a button for this form so let's do a button with the type of submit and then this is going to be having a disable so when we upload the file we want to disable it and enable it so I'm going to do we want to say uploading uploading and then inside here we're going to do uploading question mark and then we can check when the file is uploading or or if it's not uploading we can just have the button as uploaded so dot and then or upload cool so this is probably going to break if I save it let's have a look yep that's absolutely fine because we don't have any of the functions and now let's create the functions here at the top we're going to have to import use state so import use state from react like so oh that looks weird let's remove it and now inside here we're going to do com file set file and then we're going to do use State and the original state is going to be equals n and now we need to do the same thing for the um uploading so we can do another one uploading and then set uploading and then the use state for this will be false or true false as default now we need to create the handle file change here so when we change the file we want to uh grab the actual file from the form and to do this there multiple methods but we can do con hand the file change event this is where we can grab the actual file from and then this is going to be so set file from all you state here we want to set the file to e. Target and then file file sorry and then we grab the first file because we are only allowing one upload in this case and then we need to create the last thing the handle on submit form which is going to be here so this is going to be a const handle submit and we're going to do an i sync E and then inside here we can do e do prevent the default because we don't want the phone to be kind of like refreshing the browser that's the default behavior and we can check if we if we don't get a file then we return but if we do get a file we can set the uploading to true so we getting this message uploading dot dot dot you can put a nice animation here as well now we need to grab the form data by doing pretty much the same thing with uh like in the router so we can do const form data equals new form data and from here we can do form data do append and then we're going to append the file and then the actual file so inside here we can do our fetch let's wrap it into a try catch for the catch we can do console. log and then we can just log the error or you can put a nice message instead and we can set the uploading to FS set uploading to FS like so and now inside here we can do all fetch so const and then response equals a weit Fetch and then inside here we need to paste the API route which is going to be API SL uh S3 upload and now from here we need to put the method oops and now inside here we need to put the method of post because we're posting data and in body we need to paste the form data so let's do that okay and this is screaming because I messed up with this we need to remove this and just have the comma this was put at the back okay yeah and the last thing that we need to do is Con data equals wait and we wait for the responsejson like so and then console log we can do data do status the last thing that we need to do is reset the set upload into F so we no longer uploading because the file is uploaded so set upload into false and I think that's it if I save this right click format super quickly that's looking better okay and I spotted and just now I spotted one more mistake in here I don't need that make sure that you remove it so this is how your code should look like and now if I go back to the website and let's upload a new file so let's rename this to rename cat new and let's upload this upload upload in and then done so if I go back to my re bucket click on Ready's web storage and I'm not sure which one it is actually let's have a look here okay here we go so it was inside the folder here cut new and this was because in my route I think I left the folder here so if I remove this uh and we just have the file name hopefully now if we go back to my storage hopefully we should see it inside here in fact I'll delete everything so I'll delete permanently delete cool so we have absolutely nothing here I'm going to I'm going to go to the website refresh here browse cut new upload if I go back to the bucket refresh and as you can see we have the picture of the cat here you have everything about it and if I click on it you will see that the cut appears and that's pretty much everything from this tutorial I hope that you found it useful consider subscribing to my channel and hopefully I will see you in the next video bye [Music] you

Channel: Raddy

Views: 4,415

Keywords: next.js, nextjs, aws, aws s3, file upload, nextjs aws s3 upload, s3, s3 bucket, s3 tutorial, nextjs 14, image upload, jpg upload, next file upload

Id: inzUefvk2RE

Length: 35min 5sec (2105 seconds)

Published: Wed Nov 01 2023