Next.Js 14 - AWS S3 File Upload using Server Actions

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 anybody on the internet in the second half of the video we will create a file PL form using nextjs and the official AWS S3 client SDK this time as requested we will use server actions to do the file uploads hey welcome everybody and let's get started I've already logged into my AWS account and I'm currently here on the dashboard now let's create o S3 bucket so search S3 find the service here click on it from here let's click create bucket choose your region for me this is going to be Europe London the bucket name I'm going to put as my next js- website and leave everything else as it is then scroll down for the object ownership I'm going to leave it as the recommended here acos disabled let's scroll down a little bit more we have public access settings for this bucket so as of now I'm going to leave the this the way it is so this is going to be ticked but later on I'm going to show you how we can change this so all files are publicly available and If you scroll down a little bit more from here if you wish to you can enable bucket versioning I'm going to disable mine if you wish you can add some tag and for the default encryption I'm going to leave mine serice site encryption with Amazon S3 manage Keys bucket key is enabled and that's pretty much it let's click create bucket okay now that our bucket is created let's select it and from from here let's upload a file so I'm going to click upload add files I'm going to select an image that I downloaded from one Splash and then scroll down and upload and now we have the images here at the bottom if I click on the name of the image here this should lead you to the properties of this specific image and from here you can see the type the size when it was last modified and here on the right side we have the actual URL if I was to click on the URL right now and open this in another browser basically here you will see that we getting access denied so if you wish to you can make this file publicly available and If you go back what we need to do is go back to a bucket so I'm going to click on destination here and then we here under bucket as you can see my nextjs website and we need to go to permissions from here we need to go to block Public Access and click on edit unblock all public access and so basically everything here is in ticked and we need to save changes confirm and then confirm okay now that our Public Access is enabled we still won't be able to see the image just yet if I refresh on the image you'll see still access denied and this is because we need to apply a bucket policy so again under permissions here under bucket permissions scroll down and we have bucket policy from here if you click edit you'll be able to see that they have the policy generator which you can use it's quite complex but if you know what you're after you should be able to to use this and make it work alternatively obviously you can use AI to generate one for you and you can test it or you can go here under policy examples and if you click on this on another tab here you will see that if you scroll down a little bit you'll see that they have a lot of different policies here so you can scroll down and find maybe you can find one that works for you as you can see you can allow access to only your organization you can manage access based on specific IP which can be quite useful and so on so I've already created the policy which I'm going to have in the description below and I'm going to close this so let's go back to the policy here so I'm going to copy my policy and paste it here and essentially this policy is going to allow the public rate access and one thing that you need to change from here is the resource so we need to select which resource we want to use and in order to find your resource is basically here so copy this don't replace the star here just before the slash remove everything everything and paste and that's it so now if I save this policy save changes here at the bottom okay successfully edited bucket policy and now if I go back to the image and refresh you should be able to see that the image is now loaded and this is actually a fairly large image and that's why I get a lot of scroll let's close this and now basically if you go to objects you can literally select on an object you'll be able to see that this is going to be the prefix of your bucket and then you have the actual file name here at the end which means that you can use this to save to your database and then um maybe display images on your website if you wish to okay that's all cool now in order to be able to upload images from our application we need to do one more thing we need to create a user and give that user access to a bucket and that user is going to give us the API keys but the first thing that we can do from here is make a note of AWS region so what I've done is I've already created a notepad file which I'm going to zoom in here I can copy this as well in the description below but essentially we're going to need a region access key secret access key and a bucket name for the region I can just copy it from here eu- west-2 and I'm going to paste in here and for the bucket name we already know it from here so my nextjs website I'm going to copy it here and now we just need the access key and the secret key so I'm going to move this and let's go back to our dashboard here and from here we need to search for identity and access manager for short I am am I am am and here it is Select this and now we can create a new user from here you can either scroll down and select here users or here on the left side you have also users under access management so I'm going to click on users and essentially we need to create a new user from here so I'm going to click create user and let's give this user a name ready nextjs server actions and then let's click next from here I've already created a group which gives which I can select but because you won't have this let's create a new one and I'm going to search for this as well so let's create a new group by clicking create group and from here we need to give it a name maybe I can do nextjs tutorial and then Amazon S3 full access and this is what we need to search for so permission policies we need to search for this permission policy Amazon S3 for Access and select it so we're basically allowing this user to manage or S3 bucket create this user group and of course as you can see I've applied this previous one to two users and you can do the same thing for the one that you just created so from here make sure that you select this don't forget it because you do need to add your user to to this user group I'm selecting it now and let's click next okay everything is looking good here all I need to do is create the user and we should be good to go now let's click on our newly created user from here and here on the top right corner you should have access key one click on create access key from here I don't think that it matters which one you select I've used the command line interface before and I've also used uror so I'm going to select Ur this time and then click next I'm going to skip the tag value here I don't need this and let's click create access key okay and now we have our access key from here let's copy it and let's paste it into notepad so this is going to be my access key here and let's copy the secret access key so I'm going to show and copy and let's paste the inside here whoops okay that's all looking good make sure that you save this file somewhere for now just so you don't lose it and that's it I'm going to minimize this and now just click done okay we are pretty much done with with this let's just go back to a bucket let's select our bucket here and now we can start working on our nextjs project let's start by creating a new project I'm going to blast through this super quickly so left shift right click open in terminal I'm going to paste the command which is npx create D next- app at latest press enter I'm going to give my project a name next GS S3 server actions press enter tab script now link no T CSS no Source directory yes app router yes import LS no and that's it I'm going to copy the name of the project and CD to it so CD and paste the project name here and we are now inside the project folder and I'm going to open this with Visual Studio code here we have our newly created project I've zoomed in quite a bit just so I can fit stuff on the screen really and now I'm just going to run the project so I'm going to do npm run Dev and it looks like the Port of 3,000 is already been taken but I don't to restart my PC so 3001 is going to do the job I'm going to copy this and then let's open it in the browser and our project is working so I'm going to put the visual studio code here on the left side and the browser on the right side so we can see what's happening as we code along right before we get one thing I wanted to talk about is the approach that I'm going to be using today if I go to server actions and mutations here and if you scroll down a little bit you'll be able to see that the two main methods of doing this you can either use server components and write it in line like they have an example here you just have to do your action here and use your server and you probably end up if you have a big form you probably end up splitting your form into multiple files if you have a small form you can even leave it in here and the other way is by using a client component and here you have to separate your files into three so you can separate your file into actions button and then form actually really like this approach now so I'm going to use this second approach but either way if you'll follow along you'll be able to potentially convert it into this method if you have a smaller form and if that's something you want to do close this and let's go to our project the first thing I'm going to do is remove the Styles so I'm going to go to source and then Global CSS let's remove everything and save this will break the front page but it doesn't really matter I'm just going to create a new page and create the form from here I'm going to copy and paste a little bit of CSS and it's super basic I'll show you what it is so I'm going to copy and paste it if I zoom out a little bit it just makes the form a little bit better basically if you wish to you can copy the CSS from the main repository but essentially I'm just creating a wrapper so we can give the form a Max width some of the inputs have a little bit of spacing at the bottom here we have a little bit of styles for the input and button and then we have different states for the messages so we have state message which gives it a pting sentence detects in the middle then we have two states of State message success which is Green State message error which is red and then we have the submit button which has just changed pretty much to a green color and I've also used the native CSS nesting here but you don't need to do that too I'm sure that you'll come up with better Styles save this zoom in and close it all right let's open the explor here and the first thing that we need to do is to add all environment variables that we recorded earlier in the first part of the so here they are so I'm going to copy this and I'm going to create a new file here in the main directory called env. local and that should do the job and inside here is where I'm going to paste the environment variables so paste them and we have the region the access key the secret key and the bucket name that's it save this close it let's go back to the Explorer and then inside the app order here let's create a new page so you can call this page whatever you like it can be dashboard upload whatever for me I'm just going to stick to upload and press enter in order to create a basic page we need to create a file called page.js and inside this page we need to do the very Standard Export default function and col page like so and then we just need to return simp so in this case I'm just going to open and close fragment here and then this is going to be an H1 let me just change my spaces to two don't know why that keeps changing okay that's much better and now here I'm just going to say an H1 upload files to S3 bucket and that's it all page is done let's visiting the browser by doing SL upload and press enter and as you can see we have upload files to S3 bucket here this is the name of the page all right so we need to split our form into multiple files and our form is basically going to be inserted in here if I go to the Explorer and then inside uploads I'm actually going to group The actions uh this is really up to you how you organize your files but because this upload action is only going to be used in this upload page I'm going to group them by doing parentheses and then form like so so we're just going to goup the form all the form files inside here and as I said feel free to to organize your files however you like now from here let's create a form I'm going to create a new file and let's just call it form. JS let's focus on the form and let's create something very basic to start it so I'm going to do export function and this is going to be called upload form like so and then inside here we can do return and then we can just return a form I'm going to wrap this into a div with the class name of form wrapper as this is what I added to my CSS and let's close the div here let's add all form so form we need to give it a action just so for doesn't break I'm going to add the action in a second let me fix the spaces one more time so I'm going to remove this move that okay inside of form we need to create our input which is going to take the file so input type of file and then you can give it an ID of file if you wish a name of file and then what do you want to accept in this case I'm just going to be using images but you can use whatever you like and I'm just going to say I want to accept only images of all formats of course you can specify them in here and I'm just going to close this this is a safe closing tag so that should be good to go and the last thing that we need here is to create our button for the button let's create something basic to starty it so I'm going to create a button and close it so this button is going to have the type of submit and I'm just going to write upload upload file for now and save it all right now that we have a very basic form let's insert this into our page here so at the top because we're using the client method of server actions we're going to have to add use client here at the top otherwise this won't work and now we need to import our form so let's do import curly bracket we can do upload form price Center and we need to do at slash n then app slash upload slash form and then slash form and now we should be able to set of form into this file by copying the name from here and replacing it here so open upload form and close it save it and as you can see we now have our form in here all right on and our CSS is actually working but I didn't add a class name to our button here so if we add the class name of submit button should make it look a little bit more presentable and that's it there is not much styling on this form all right we almost done with the skeleton of our form but the last thing that we need to do is the action and then we'll build on every single file if I go back to the form here we need to create one more file and this is going to be called actions. JS and to start with this needs to be use server and the first thing that we need to import is revalidate PA so let's do Import in curly brackets revalidate path from next cache so essentially when we submit a form we want to clear the cash and revalidate the basically it's going to be working kind of like a redirect to the same page without a refresh it's pretty cool and now we need to create all form so let's do export async function and our function is going to be called upload file and this function is going to have a preview State and form data so if we go back to the documentation super quickly basically we're going to be using use form state which is a react hook that allows you to update State based on the result of a form action and here we have bypassing the action from use form State the actions function signature changes to receive a new previous state or initial State parameter as its first argument it's a little bit confusing but you'll see how this works in a second let's minimize this and from here let's open and close K brackets wrap everything into a TR cach statement because this is going to be quite useful later and from here we can use the form data to grab the field and then and then use the file to upload to DS free bucket so in this case if we do console.log and then form data in a second you'll see how this works and also we can use the revalidate path here so when we submit you we revalidate the same path like so and we can return a message so return and then in this case we're going to have a status message of success and we're going to have a a message which is going to be hardcoded in this case File has been upload it like so and I'm going to copy this and paste it for the error here and I'm going to say error and then the message going to be failed to upload the file all right let's have a look at how this is going to work now now that we have the actions here go to form super quickly and we need to insert this file at the top so from here we're going to do import applo file and then this is going to be close but this is going to be at slash app SL upload slash form and then slash actions and that's it now we also need to import the use form state which I was talking about earlier so I'm going to do this at the top here import use form State and then this is coming from react Dom like so and now you see how everything is going to uh start with working together so first of all on the form we want to set an initial state so to do this I'm going to do a const let's call it initial State and this is going to be equals an object of message and this message is going to be set to know as default and now inside of form here we can do const state form action and then this is going to be using the use form State and then we're going to be using the action here which is the upload file and then then we're going to set the initial State it's a little bit confusing but you'll see how Works in a second and now essentially for our form action we can use this so instead of double quote we just put cly bracket and then put form action so as theault we have the form and the default message is no I going to press upload files you can see nothing is happening at the moment and one thing that we can do straight away is from actions if you remember we put status of success and status of error but you can also grab the error from the S3 bucket which we'll look into later on but inside form here we can create some sort of like a for example we can use State question mark. status and and and basically we are checking if this is not empty we want to display them so let's display a div in this case and I've already prepared a class name for this only in this tutorial where is it so Global CSS I've prepared a class name of State message and then we can just put success or error depending on what we get so from here incly bracket single sler quotes and I'm going to put State message as or css depending on the status we can put it in here with template liter so I'm going to grab this state question mark status status so depending whether this is success or error it's going to change green or red and then we can close this div and inside the div we can put the actual State message do state question mark. message which comes from here so message file to file has been uploaded or failed to upload file and then just close and save so now that I saved it as you can see F has been uploaded obviously file has not been uploaded because we haven't done any of the S3 stuff yet but if I refresh you will see that the current state of this is set to no so the message is no but if I click on upload file file has been uploaded and if I go here to the action. JS and if I make a an error I don't really know how to error this but let's just put a very bad error like so and save it so now if I upload file you will see that this block has errored and now we have failed to upload file here in red and of course you can sty this however you like okay we're getting close so let's remove this and let's now focus on one problem that we're going to have with the button the problem that we're going to have with the button is that uh when I click on file upload from here we won't be able to actually change the state from it so what I mean by this is that uh when I click on the button you might want to change this so you can't double press it and maybe you want to change the inside here and unfortunately in order for this to work we're going to have to move this button into another file otherwise we won't work which is a little bit weird but it's not so bad cut this save this form and let's create a new file here so inside form let's create a new file and I'm going to call it submit button.js and let's create it for a button this is going to be use client and then we're going to import the use form status from and then this is going to be react D and this is going to allow us to do a pending button so export function let's call it submit button so it's Prett here and then from here we can set a const of pending and then this is going to be equals use form status like so now we just need to return and we return the actual button like so and in order to use the pending there are two things that we can do first of all the most important thing here let me format my document because again four spaces format doc okay much better so the first thing that we can do is you don't want to double press the actual button and in order to stop that we can use the pending from here and put it inside Area disabled so area Das disabled like so and we can just set the status here in cly brackets of pending which is awesome so that should stop you from double clicking the button and the other thing that we can do is changing the message here let's leave as it is and we'll change in a second so let's import this into a form as well so I'm going to go back to the form here and let's import the button to import the button it's going to be very much the same as this I'm going to all shift down and I'm going to put here submit button and this needs to be changed to submit button like so and now we can grab the button here and insert it into all form like so for some reason we getting an error let's have a look at it so submit button and I have a spelling mistake here so use instead of use form of Miss spelled it here so it's use form like so status okay my fault and let's paste it in here save it and as you can see we have all button now if I press the button here you'll see that that nothing is happening file has been uploaded all good but if you wanted to change this we can also do that now okay so there are two ways of doing this and the first one would be to just put file upload and then inside here we can use the pending so I'm going to do pending and then and and and then in double codes I can just do three dots so now if I press the file upload if I zoom in super quickly and if I press it you'll be able to see that we are adding the Dots here as you can see it changes and you can also do something like file file upload ink dot dot dot and that will work if I save it and that would probably work in English but uh in other languages that might not work so what I'm going to do is let's remove this and let's just do pending if it's pending then we want to set uploading dot dot dot and then if it's not we just say file uplo and that would be the same thing basically so now we have file uplo and if I click on it you will see that it changes really quick but later on we'll change the internet connection and you'll see that it changes okay your form is finally complete and finally we can start using the AWS SDK for JavaScript V3 so the first thing we need to do is install it you can use npm Yan or pnpm and I'm going to copy this one here with mpm let's stop the process of our application let me see if I can here we go npm is at aws-sdk client-3 press enter let's run our project npm run Dev press enter and we should be good to go okay let's go back to the project and by the way the documentation that I just showed you has a lot of examples so if you wish to you can pause the video and have a look into it all right in this case we pretty much done everything and now we can focus on the action of a form so we can upload a file Let me refresh it just so we can see the application is working yep everything is working fine so let's close everything except the actions close close close and this is where we're going to do all S3 bucket logic from here let's import all S3 clients so import S free client and this is coming from aws-sdk client-3 we also need to import put object command which is going to allow us to insert a file so put object command like so and that's it now we need to set up all credentials so all credentials are going to be inside em. local in this case and I'm going to copy all of them and super quickly I'm going to paste them and just remove everything else we don't want them and that's it let's see if I can comment them super quickly yep okay I can comment them so we need to set up all credentials using the S3 Clan now to start with I'm going to do const and you can name this whatever you like just don't name it the same as this or what I'm going to do is put small s and then free client and then this is going to be equals new and now we can use the S3 client from here to create a new object and set up the credentials so the first thing that we're going to have is the region and then we're going to have the EMV file from here so process the EMV and then the region that we have in our EMV comma and then from here we need credentials and for the credentials we going to have an object which contains the access key ID like so and the access key ID is this variable here so process EMV do access yep that's it comma and then we need the last one which is secret access key and this is going to be the secret access key so process EMV do next year secret access key like so that's all looking good we definitely don't want those first fre here because we just need to add the bucket name in The Next Step before we do that let's focus on the form so when we submit the form we can grab all of the data from the form data here that's why I'm actually conso logging in and what I'm going to do now is I'm going to choose a file here and I'm going to submit this cut and let's click file upload let's go to the console super quickly and you will see that we are getting that we getting all these messages so we actually get in here at the bottom as you can see name file and then we have value of file which we can access so it's actually picked up the image and this name file comes from or form which is here so here it is so this is where it comes from and in fact if we do another input just so I can show you input let's give it a tape of text and let's give it an ID of let's say username and then name of username just for the example all right if I save this and if I was to submit red and file upload if you go back to the console you should be able to see that here at the bottom now we have another input which we can access here which is the name of username and the value of R which comes from the input this was just an example I'm going to remove it just so you can see the difference here so I'm going to remove this and let's save this let's go back to the actions here and let's set up the rest so I'm going to remove the console lock here and let's just make sure that we select the file so we can upload it in this case I'm going to do const file and this is going to be equals the form data and we're going to get D file and now what we can do is do a quick check to see whether we have selected a file and we can upload it and if we don't maybe we can just display a message so what I'm going to do here is I'm going to do if there probably other ways of doing this but but the solution I came out here is that we can grab the file and each file actually has a size so I'm going to do size in fact I can C Lo this in a second for you and if the size is equals equals equals zero then can return the status from here so I'm going to do the error like so and it's hardcoded but status is going to be error message failed to upload file now we need to change this to please select a file and what I can show you here is that if we conso loog the file if I do console the log file super quickly and if I do let's select one let's select the cut here and file upload okay if I go back here you will see that when I come console log the file we have the file and this file has a size image type name and last modify so we can definitely use this two advantage to check whether uh the file is zero and then we can also use the name to insert it into database if we have one we don't in this case or we can use this name to insert it into S3 bucket so pretty useful information here and I'm going to remove this tidy things up and now if we get a file we also want to continue and we're going to do const buffer this is for file and we're going to be using buffer do from and we're going to await file do array buffer and if we go super quickly to the uh developer. mozilla.org you will see that the array buffer object is used to represent a generic Ro binary data buffer it's an array of byes often refer refer to another language as B array let's close this that's how we're going to be able to upload the file and now we need to create or upload function so I'm going to do a wait and then this is going to be called upload file to S3 S3 and then we're going to grab the file from here buffer and then as I showed you earlier when we conso log the file we can grab the name but doing file. name as well so we can pass those two into the function that I'm going to create now so let's create this function I'm going to copy the name and we can create around here so this needs to be an asynchronous function and so async function and let's give it the name of upload file to S3 I'm going to make some space here just so we can see we're going to grab the file and then we're going to grab the file name from here file file name that comes in this function and then from here from here I'm going to do const and I'm going to create a a variable called file buffer and this is going to be equals the file this can be quite useful if you want to use elaborate like sha for example to crop your images or to optimize your images that can be quite cool and then from here we're going to do const and we need to set up the bucket parameters so params equals and then in an object we're going to do bucket and this is going to be the bucket name so I'm going to grab a from or EMV file we remove this so this is going to be process EMV nextore AWS S3 bucket name then we're going to have comma we need the key and the key is essentially or file name so inside here we're going to grab the file name and I can put it in template ritual for now and I'm going to show you why in a second so we're grabbing the file name for example cut. JPEG and then the body is where we actually insert the file so you can either use file from here just put file or you can use the file buffer and put it inside here like so and that's going to upload the image and then the last thing that we need to do is the content type for me I'm just going to be using images in this case so I'm going to do image- JPEG and then make sure that you see the content types available from the official documentation should be easy to find and the last thing that we need to do is use this put object command in order to insert the actual image or file so in this case this is is going to be inside the same function here and we're going to do const command equals new put object command and then we pass the parameters inside here so you can pass it inside here or you can copy the whole object and put it inside here whatever you prefer this seems a little bit cleaner and then here I'm going to do a try catch in this case just in case the file doesn't get uploaded so I'm going to do const response equals a wait and then we're going to wait for for the S3 from here S3 client with the small letter do send so we sending and we sending this command with all the parameters and from here you can conso log your response if you wish to and just return the file name so return file name like so and then for the error you can just do throw an error or whatever you wish and that's it so now after all this let's right click and format this document it's all looking good hopefully we won't have any errors but now if I open my bucket here super quickly let's put it to the left let's put on the left side super quickly and and as you can see we only have the first file that I uploaded manually but now if I click on choose file and let's select the cut super quickly and press file upload uploading and it finished file has been uploaded it if I refresh hopefully we we should see the cut and here it is so we have the so we have the cut inside here we have the kilobytes so if I click on it we have everything about the image here and if I click on the object you will see that we're getting the kitty here so let's do one more and in this case I'm going to open the inspector tool and if I can undock this I'm going to unog this super quickly and what I want to do is mimic a slow connection so let me remove the mobile and if you go to network here I don't know if you can see here we go if you go to network here you can uh do a slow internet connection so no throttling I can do it as potentially slow fry and maybe I can choose one of the larger images let's see what happens now I'm going to refresh the browser and now okay everything is loading it's taking a while all right this is slower than I expected all right this was a little bit slower than I expected so now that our page has finished loading let's select a bigger file like this one here and let's do file upload I'm going to click on it as you can see we're getting uploading of course you can change the color of this you can change you can add animation here or whatever but we have uploading and this I think it's a fairly large image so I'm assuming that this is going to take a while and I'll come back to it once it's done all right this is taking gently too long so what I'm going to do is let's switch to let's switch to 3G all right no frl now let's refresh and now let's set this to fast 3G and now let's upload the cut one more time I'm going to select it because those two files are too big I'm going to select the cat and then file upload as you can see these changes to uploading and as you can see yep you probably saw the request here and then we have file has been uploaded yeah and that's how it works and the last thing I'm going to remove the front Lin let's close this so if we go back to here as you can see I uploaded the c a couple of times now but we only got it once and the reason for this is because every time I upload a file with exactly the same name it just replaces it instead of uploading a new file and the reason for this is because of the name so what you can do here in the params file name is you can set up unique name you can use a third party library or you can do something like I don't know something like date now let's do in dollar sign curly bracket date now and see whether we can upload another cat so I'm selecting the cat here file upload it's uploaded and now if I go back to the files here and let's refresh we should be able to see cat. jpeg with the random numbers now which is the date now and the photo should still work here it is all right and if you wanted to upload this file into another folder what we can do is let's remove the date for now we don't need it and literally we can just put the folder name here so let's say images or whatever and then slash and then the file name in here so if I save this and let's upload one of the big files so I'm going to choose this one here it's like it's fairly large so it's going to take a while to upload in fact let's refresh everything so everything is clean I'm selecting a new file it's fairly large file upload uploading and now if you go to the file uploaded and if I go here if I refresh we should be able to see that we have another folder here called images and if I click on the images we have the file that I just uploaded here it is and yeah it's one of the big files which is pretty cool before we end the video I wanted to show you a really cool library for image optimization and manipulation so the library is called sharp and you can do quite a lot of things with it you you can resize images you can optimize images you can uh do some color manipulation Channel manipulation and so on for example if you click on resize image you'll see that you can do resize extend extract trim and so on and if I scroll down here you'll see from here some of the values that you can use and I'm just going to demonstrate super quickly how you can use this to optimize your images so the first thing that we need to do is to install the library so if you use an mpm you can just do mpm install shop and they have some other options in here so let's copy this one let's go back to the terminal right click to install this and then let's do mpm run Dev okay application is back and running and now let's see how we can optimize our file let's include it at the top of our project here so let's do import Shar and then this is going to be from shop like so so now to use shop we're going to go here to the upload file to S3 and we can already grab the file so this is just before we uploading the file and if you wish to you can create another function for this but I'm just going to do a in line here and in order to do this I'm going to do cons file buffer equals and then we can do a wait because this is an asynchronous function then we can use Shar and then inside the Shar we can put the file that we want to optimize and now we can start chaining some of the options that we want to do so for example if you do do we can do if you do dot jpeg inside the jpeg there is an option for Quality so for example I can do quality and choose the value let's say 90 and then we need to chain one more and do two buffer like so and close this okay now let's try to upload another file but in this case let's just remove this folder we don't want that and let's try to upload another file so I'm going to grab one of the big files here I'm going to grab this file here and if I do properties you'll see that this is 11.6 MB so I'm going to grab this open it and then file upload okay it's uploading okay file has been uploaded now if I go to the S3 bucket and if I click on it let's refresh here we have our file which is 12.1 megabytes and if I click on it we'll be able to see it in a new tab here here is the file it is a very big F now let's do the same thing with let's say the quality of 50 for example save this and let's reupload the same file so I'm going to do choose file select this one again file uploading okay and now if you remember this one was 12.1 megabytes and if I refresh because this is just going to overwrite asum I can yep as you can see now this file is 7.4 megabytes uh and the quality should be more or less the same so this was the old one I'm not going to refresh here and let's open a new one you probably wouldn't be able to tell the difference but here it is but yeah it's going to be hard to put a side by side it's going to be hard to put it side by side but as you can see there is barely any difference in quality but in terms of size it's quite a huge different and you can do a lot more stuff like this I'm just going to show you one more example let's put them on another line like so just so they're easy to see and we can chain more of for example resize and inside here we can put the width so let's say 800 and let's put the height of 400 I'm not sure what's going to happen but let's save this and let's try it out one more time so I'm going to grab the file file upload so it's going to optimize it and resize if it is and if we go if we go back let's see so last time was 7.4 megabytes let's refresh and now it's 36.9 kiloby which is insane and now let's click on this and as you can see the quality there is totally different now um let me just save it super quickly I'm going to save it here and let's have a look so if we put details yeah it seems like it's resized as well dimensions are 800 by 400 which didn't seem like in the browser maybe stretches it but as you can see the dimensions have changed and the file size has changed as well which is pretty cool and that's going to be everything from this tutorial

Channel: Raddy

Views: 2,041

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, server actions, server side

Id: 3TaknF1kiN0

Length: 45min 24sec (2724 seconds)

Published: Tue Jan 02 2024