Node.js Express AWS S3 Storage Bucket SDK File CRUD Project Using AJAX & Multer in Browser

uh Hello friends today in this tutorial I will be showing you that how basically we can upload delete read all files from Amazon S3 storage inside node.json Express and for this we will be using the malta Library so basically you can see that we have this interface out there and uh we have a interface out there where we can select files and directly upload these files to our bucket Amazon S3 storage bucket so this is basically the bucket guys we have created inside Amazon S3 and there are no files there you can see that there are no files present here I will now be going to my application inside node.js Express I will choose a file so inside Amazon S3 bucket guys as you all know you can directly upload any file it can be image video zip file any sort of file so this supports multiple files so guys so we can select here multiple four Images at one time if I select these four files click click on upload so it will take some time guys and it will directly upload these files and it will show you in the tabular structure these are the four files which are uploaded screenshot one PNG to PNG that's all and we have for these uh this this is a direct URL here where we can directly go to it so basically access is denied if you directly go to it and now we have download buttons as well basically if you click download button your image will be downloaded so now you will be able to see the image which you have uploaded right here and we also have a delete button as well guys so if you hit this button this will be deleted from the Amazon S3 storage so if I just refresh it you will now see all the four images that we uploaded right here is directly uploaded you will see in the Amazon S3 storage bucket right here you will see the extension of the type last modify is the size storage class all that stuff and you will see that guys we are basically storing it listing out all files which are there inside Amazon bucket and now we also have this delete button guys if I press the delete button are you sure you want to delete the this file click on OK so now guys this this file will be deleted as you can see the file is deleted so once again you can see that only two files are remaining right here so this is also proof so if I refresh here you will now see there are only two files available so we are performing all the operations guys we are reading all the files we are deleting the files we are downloading the files as well which we uploaded right here and we can even directly upload files as well so this is a all-in-one application that I will be showing you in node.js and express how to do this process and to create application it's basically it's list out on the files download the file delete the file and also it list out all the files from the Amazon S3 storage bucket so this is basically the application you are not uh you can even upload any sort of extension file guys you can even upload a audio file as well you can see it's a audio file if I click upload file a audio file will also get uploaded so just give some time to it it is saying that you will see that the file is uploaded because it was larger in size the file was larger that's why it took some time you can see the file is successfully uploaded you can now download this audio file right here you can now see if I click the download button the download process must start here so you will see the file is downloaded so now we have three files guys so the third one is the audio file you will see that AMR this is an audio file so you can even directly select this and delete it from here inside our dashboard also you simply need to write here permanent delete you can even perform this request from the AWS dashboard as well but we will be looking at how to do this inside node.js and express so let's start the application guys so we will be showing you from scratch how to do this process so let's start the process so now guys the very first thing in this process is to basically create some bucket where we can upload the files and also we need to create a user as well so first of all guys just go to your Amazon dashboard and in the services tab just select here S3 just search for S3 and inside this go to this S3 it's a scalable storage for Amazon S3 where we can store and retrieve any amount of data from anywhere so there is an option here called as create but bucket click this option and now you need to give your bucket a unique name so here I will give this bucket coding siksha this is my bucket and by default the region will be selected here of your own location so wherever you are you don't need to modify these settings so simply click on the create bucket option and your bucket will be created right here so now guys we can directly upload files to this bucket by selecting here upload option and it have add files option here and basically we can go to it directly upload the image file like this and click on upload you can see that it is directly uploaded this you can see succeeded so this is the file which gets uploaded we can even perform all these operations we can delete as well simply we just need to write here permanently delete so you can perform all these actions in the dashboard also but we will be looking at how to do this programmatically now as you created this bucket guys now you need to create go to user simply type search user and here you need to create a user guys so simply go to user and here we need to click on add user we need to create a root user you can give any name of your choice but I will be giving ad by default username is root click on next and after this guys you just need to click on next again and then again click on create user so now your user is created guys so after this you need to go to this user and here you need to basically add the permissions so the permission guy is basically click on ADD permission and we will attach the policies directly so select these third option and here we need to select for the permission guys which is S3 full axis this is basically the permission guys as we need to select here because we are working with S3 storage bucket engine you need to click on this option and select this permission that's all we need to select this permission guys and click on next so we need to click this option add permission simply add this permission and now guys your permission has been attached you have have this permissions so this you can create or upload files you can download files you can delete files all those permissions have been granted now guys we need to create a access access key here so how we can do that we need to go to security credentials and then we need to create this access key this is really important guys access key and here we need to select the second option here which is local mode and then just select this option I understand and click on next and then click on create access key so this will give you your own access key guys this is really important you need to store this information in a very uh I'll let me store it inside my notepad file so I will need this information access key and all this stuff so simply copy this access key and your secret key as well so this is your secret access key so this will be only be shown for this first time so you better store it somewhere else because you will need this secret key as well and now I will delete all this information once I finish this video so don't copy my information click on done and now your access key has been created that's all so this is a setup process guys is that you need to do for this Amazon S3 storage crud application so now we can start our node.js Express or any sort of application that we are building so so now to get started guys we will basically go to our directory and here we will create a new directory which will be AWS correct and we will go into the directory and the very first thing guys we will do here we will initialize the package.json file so npm in a dash why this will create with default options and now we need to install the dependencies which are available for this project Express will be the web server and we also need the AWS SDK AWS SDK this is the dependency and also we are using malter so these are the three dependencies which we will need for this project so simply install this by this npm command Express AWS SDK and malter so now we have installed this so we can start our Express server guys so we can simply right here so at the very top guys we can simply say Express and we need to require this Express dependency and also we need to require the malter dependency guys and also AWS so this way will require the AWS SDK and then we will instantiate a new Express app and then here guys we will make the public directory as static this is not necessary this is just for basically storing our static assets so here inside your root directory you can basically make a public folder and if you want the full source code guys of this application crud application that we built right here the link is given in the description of the video basically if you want to purchase the full source code you can go to the description and you can directly purchase a full source code and after that you will get the the full source code in a directly like this a zip file will get downloaded automatically whenever you make the payment while going to stripe.com you will get this directory structure which will get which will hold all the source code as well so I will also type the full source code in this video so don't worry about it so now let's get started so we just need to make this public folder right here in the root directory here so here we will store our index.html file that's also so here we need to first of all configure the access key and the Secret Key by using AWS SDK config update so here we need to pass three options here the first option is access key ID and the second one is the secret key secret access key and the third option is the region so whatever region that you selected so these three information will be coming from your own AWS dashboard so I just stored this information so this is the access key let me copy this and paste it this is the secret key that is obtained here simply copy this paste it and the reason uh basically of whenever you created your bucket just go to your dashboard so so once you go to your S3 bucket the region will be listed here let me go to the bucket and show to you so the reason is this one this is a reason U.S east one this is the region here simply copy this so after you do this process guys we just need to write here include the storage engine which is malter memory storage you will use the memory storage here and then we will say we'll pass the storage to the Walter Constructor that's all and here you will say app.get so whenever someone goes to the home page we will basically show this file which is index.html that's all so now we just need to start this server on a port number which is 5000. so we can now start this server guys by simply saying node Bond index.js so it will start this application here so app is listening on Port 5000 so if you now go to this so nothing will be there guys we haven't written the HTML code right here and right here just inside your HTML we do need to include the bootstrap CDN guys so we will use some bootstrap widgets out there for that we will include the CDN for bootstrap and after this guys basically we will have a container class of bootstrap and then we will have a heading in the center position and here you will say Amazon has three storage web app in node.js Express so here guys we will have a form which allows you to upload files to Amazon S3 storage we make this post request method will be post and encoding type will be multi-part form data so inside this guys we will have form group class or bootstrap input form control which again it's a bootstrap class input type file and we will be giving a name attribute of files and allows to multiple so this allows to upload multiple files here guys so this is required attribute and then we will have a simple button to submit the form we will simply say upload files that's all so if you now refresh guys you will now see this interface right here and if you don't do this you will say please select one or more files so this is our interface and right here we now need to basically write the JavaScript code guys somewhat we will use the concept of Ajax so here guys whenever for this this will be very simple we need to Simply have this upload route so just go to your index.js file and here we need to write a post request guys for uploading the files so we'll say app.post slash upload and we will say upload dot array because we have put this upload we are using the array method here in order to upload multiple files and files this is a name attribute that we have given right here files and then we are passing it as a middleware so we can say that request response a callback function and here we will compare if no files have been selected or the length of the files in the request is equal to 0 in either of these cases the file hasn't been selected so in that case we will return a 404 400 status code that no files versus uploaded so this is not mandatory but still if JavaScript is disabled then it's nice to basically have this validation in server side so then we will basically instantiate the AWS S3 like this and then we will use promises guys upload promises and here we will say request files dot map because this is an array of files guys if a user has selected multiple files so we will use the map method for each file we will upload the file like this the upload parameters will be upload params will be an object which will contain the bucket name the bucket name will be the simply the bucket name that you selected guys so we can simply create a constant here right here at the top you can say const bucket name so here my bucket name is coding siksha so we will provide the bucket name right here and then the key which will be file dot original name key K will be Capital here lastly will be the body guys so file dot buffer that's all this is actual content of the file that's also these are the upload params and here we will simply return as three dot upload it contains the upload method guys and we will upload it with these upload parameters and return a promise that's all and when all the promises are completed guys promise all upload params we will then returns again a promise data and here you will say data for each you will use the for each Loop the this will contain the result of the upload and here we will basically console log a message on the console that file uploaded successfully that's all so now basically if I select some files let's suppose if I select these two files click upload it is saying upload params is not defined let me just see guys what is the problem upload params is not defined oh sorry okay this needs to be upload promises guys sorry here we need to pass these promises upload promises that's all this is all that you need to do and just again do this process just choose these two files click upload so now check the console guys so now you can see missing credentials in configuration if using AWS config file set is AWS SDK load config to one missing credentials in config just wait guys let me see what is the problem here okay guys I figured out the error this was really silly silly mistake from me it is just a typo mistake so if you know go to your AWS config update line the second line here secret access keys I put here s here so it needs to be secret access key right here so just make this modification right here guys and now your code is correct so it was just a typo mistake and now if I basically refresh my application localhost 5000. click on choose file and basically guys if I choose to choose these two files click on upload you will now see basically file uploaded successfully file uploaded successfully and now if I check my uh bucket now this bucket will contain these two files you just need to refresh so now you can see that guys the file has been uploaded so now we need to display these two files guys which are uploaded right here in a tableau structure so whenever we open the home page we do need to basically show these files in a tableau like structure so how we can do that it's very simple we will basically make a request which will be app.get uh slash files basically it will get all the files from the Amazon S3 bucket this will be a simple get request slash files so now to do this process guys it's very simple we will put the bucket name for first of all we'll instantiate S3 new AWS as three and then we will simply say the list parameters which will be the bucket name here so here you will replace the bucket name that we have our coding section we need to get all the files which are present inside this bucket so we AWS SDK basically provide a op method which is list objects version 2 we will basically use this method and here we will use list params we will pass it and this returns say callback function holding all the files which are present inside this bucket so what we will do guys we will compare if any sort of error take place in that case we simply need to show a error message on the screen that error fetching files and then we will simply return a error message that internal server error if no error take place guys then we will simply return all these files we will say data dot content dot map this will be a array so we will Loop through by using the map method and right here guys what we will do right here we will have the name of the file which will be file dot key and the URL of the file which will be a dynamic URL so here you need to replace your bucket name guys so my bucket name is coding siksha so I can replace the bucket name like this also bucket name S3 dot Amazon aws.com slash this will be the file key that's all and the third that's all these will be the two properties guys that we will need for this okay we need do need to put this parentheses right here so now we have this and now we will return this as a Json response that's also this is our request guys slash file so now if I go to this request slash files this will return me this Json response to me you will now see this will be an array of files which are present inside our my Amazon aw3 storage bucket now there are two files if I now upload a third file by going to the Amazon dashboard let's suppose I need to add a file here the third file click on upload so this third file is also is uploaded right here so now if you see the bucket now you will see there are three files if I basically refresh it now this will return three files you can see that so now we need to use some Ajax guys asynchronous JavaScript and XML inside our HTML here so right here whenever we load the page we do need to call this get request slash files and one more thing guys we do need to basically whenever we upload files right here at the we can redirect the user back to the home page that's all so whenever we go to the home page this file will get called and right here inside our JavaScript code guys basically we need to call this function so yeah for this guys we do need to have jQuery as well alongside with bootstrap because we will be making use of jQuery as well simply include the CDN right here so after including the CDN we will basically include the custom JavaScript code so we will write this inside a separate file so just make a script.js file guys and right here guys basically we will have document.ready method of jQuery so right here guys we will call a method which will fetch files so whenever your web page is loaded this method will automatically gets called Fetch files so let me have a alert message hi so if you now refresh your uh page if you go to local is 5000 you will see high messages printed out so now we simply need to basically inside this method guys we need to make a Ajax request and inside this we will put the URL which will be slash files and the method here will be a get method and the success callback it will return a data and here we need to basically have a tabular structure guys inside our index.html just after the form we will have a table of all files we will display this table in the center position table table and table stripe so these are bootstrap classes so name of the file URL of the file and the action so these are three columns guys and right here we will give it an ID here pile table body so here we will be dynamically be putting the number of files here guys and now inside we will Target first of all we will basically clear out the previous step we will Target it by the ID that we have given file table body we will use the empty method and then we will basically construct a row so this is slightly complicated code guys the link is given in the description you can copy paste all the source code basically this is this is actual row we are talking about I will simply don't waste the time here and simply copy paste so this is actually hold the first of all the name of the file file dot name so for this we will be using it say area of objects so for this what we need to do here is that just wait date uh yeah straight down just wait guys I'm just doing that process here so as you all see guys basically it's an array of objects so for for this we need to run a for each Loop for this you will see we are using the for each Loop this is basically an array of objects we need to Loop through each object and for each object we are showing the properties the file name we are file URL and actually the download button we are having this download button here and the actual delete button as well and then lastly we are appending this row as a row here we are using the append method right here that's all so if you just refresh this application now you will now see these three files being having there we have the name of the file we have the URL of the file you can directly open this DirectX is not allowed so that's why if you click the download button nothing will happen because we haven't written these requests right here so now we do need to write these download button and delete buttons so for this we will need to invoke these methods attach download handlers and attach delete handlers and also guys we will have a error callback as well so if any sort of error takes place in that case we will console log error message that error fetching files so after this guys we will basically Define the methods that we declared attach delete handles this is really simple function attach delete handles attach download handles so these are the two methods and inside this method guys we will basically have a class which is delete button we have given this class to all the delete buttons so we are binding a on click listener to it to all those delete buttons so when whenever you click those delete buttons you will basically get the actual file name by this data attribute we have given the data attribute as well name so here we will be comparing a confirm pop-up are you confirm are you sure you want to delete the file so there will be this pop-up message which will be there and actual file name we will basically having the file name which is so this will ask this question And depending upon your answer if you select yes or no if you select yes in that case we will invoke a method which will delete file we will pass the file name directly and this function guys basically will delete the file from the sw3 Amazon S3 storage bucket will attach the file name and inside this we will make use of Ajax once again this time the URL will be slash files slash followed by your file name method here will be delete and here you will have the success callback function again we will call fetch files once again in order to refresh the list inside the table once the file is deleted so again you will have error callback as well you will say error deleting file so now we need to make this delete request guys so go to your index.js and this is really simple we will add this delete request app dot delete slash file slash this will be a dynamic parameter request response and file name so S3 new AWS S3 and we will construct the delete parameters this will actually again hold our bucket name and then we will have our key parameters so this will be request Dot params. name that's all this is the name here so then we will call the delete object method guys inside AWS SDK we'll pass the delete params so now basically it will simply return a response back that file delete it successfully if any sort of error take place in that case we can return the response which is error response internal server error that's all and if I now click this button guys delete button and are you sure you want to delete click on OK so now guys you will see that file will be deleted so what happened Let me refresh now you can see only two files have been remaining if I click this file also only one file will be there I think some mistake is happening because whenever I clicking the OK button we are once again calling that fetch files but method here let me check here what is the problem okay let me check our script.js file in the success callback you will see we are calling the fetch files method in the fetch files method we are okay that's the problem guys you will see we are this is again a typo mistake file table body that's all it it was not deleting the previous entries that's why so now if you check guys basically there is one file if I try to upload a second file click on upload this will upload the file there will be two files if I click delete here there will be one file if you will see that so now we have the to implement the download functionality if I click the download button it should download the file so it's very easy uh we need to write this function here which is attach download handlers similarly we have attached a download button class to all the download buttons so we will attach a callback function here e dot prevent default download URL will be dollar this attribute href and here you will invoke a method download file we will create this method we will pass the download URL that's all need to write this function guys which is download URL this download URL will be there so this is really easy guys so basically the link will be there document.createelement link Dot href URL link dot set attribute this is very simple code guys so I will not waste time and writing this so this will automatically uh you can see that it will create a anchor tag automatically clicks on that anchor tag and gets deleted that's all and here if you see basically whenever we are attaching this download button we are basically right here if you see we are again having a get request we need to write inside our index.js file to download the actual file from the sw3 storage engine this is the request so you can say app.get slash files slash name slash download so here guys we will again be having new AWS S3 download params the bucket name will be bucket name and the key will be request Dot terms Dot name this time we have a function guys which is get object we will download params so right here basically we will call this response dot attachment request Dot params.name and then we will send out this response sent data dot body that's all and this will actually download the file as an attachment if any sort of error takes place we can show internal error that's all this completes the application and if you refresh click on download your file will be gets downloaded guys if you press this button let me check let me just refresh this application once again uh let me check guys it is saying download file is not defined uh let me check guys what is the problem download file okay okay sorry guys sorry this is download file click on download your file will be it is saying document is not defined again a typo mistake guys so sometimes while coding your mistakes will get if you upload a file click on upload file a file will upload it click upload file two files will be there click on download you can see that the file is downloaded and now you can see your file which gets downloaded there is delete button as well if you click delete your file gets deleted so now there is only one file available so if you refresh your Amazon S3 storage bucket only one file is there so this is our current application guys we developed in node.js Express using by AWS SDK so hopefully you will like this video the full source code is given in the description of the video you can purchase the full source code you will get this directory structure and thank you very much for watching this video and I will be seeing you in the next video

Channel: Coding Shiksha

Views: 1,519

Keywords: coding shiksha

Id: 3J5eyP73ktQ

Length: 42min 41sec (2561 seconds)

Published: Thu Jun 15 2023