How to Upload Files/Images to Amazon S3 Bucket using JavaScript/Node.js

foreign I'll show you how to build a simple file or image upload feature using react and then we'll use JavaScript to upload these files to Amazon S3 by the end of this video you'll have a good understanding of how to upload files or images to S3 from your react applications and you'll be able to implement this feature in your own projects the first thing we'll do is to set up a basic react application that allows users to select files or images to upload we'll use the vid tool to set up our project and in part 2 once we have our react app set up we'll use the AWS SDK for JavaScript to upload files to our Amazon S3 bucket I'll show you how to install the SDK and configure it with your AWS credentials then we'll write some JavaScript code that handles file uploads and sends these files to your S3 bucket and finally we'll test our file upload feature to make sure everything is working correctly I'll show you how to use the browser console to possibly debug any issues that may potentially arise during the upload process we'll also talk about some common errors you might encounter when working with Amazon S3 and how to fix them that's it by the end of this video you should have a good understanding of how to upload files or images to Amazon S3 using react and JavaScript whether you're building a simple photo sharing application or a complex data storage solution being able to upload files to S3 is an essential skill for any developer I hope you find this tutorial informative and helpful hello everybody my name is Google welcome to coding 101 where we help you become a better developer one video at a time if that seems like something that you're really interested in be sure to subscribe to my channel and leave your comments in the comment section if you find this video insightful don't forget to like the video now I do want to say that this video assumes that you have basic understanding of cloud computing especially when it comes to AWS this video assumes that you have the potential or you know how to create your own S3 bucket and you know how to access what they call Access keys so if you're not familiar with these things be sure to leave a comment in the comment section and maybe in the next video I'll expand a little bit more on cloud computing or Amazon web services but it's okay if you don't understand these I will explain them as we go in this video so let's get our video started the first thing that we're going to do is of course create a simple react project using vid project just simply say if you are not familiar with Veet I'm going to leave a video in the cards so you can learn more about feet so now you're just gonna save it init uh I'm sorry npm init at latest and then click OK click enter your project name upload S3 that's my project name if it asks you to select the framework select react and we'll do JavaScript for now go inside of the file remember it's AWS upload make sure you follow the react naming convention because I'm pretty pet peeve about this and then you just say npm install like that now we don't want to go through this process because we've already gone through it in our uh already existing project I've created a previously we've created a project that was able to upload uh files to our Cloud generator account now many of you might be asking yourself because in the previous video we showed you how to upload images or files using cloudinary and now we're using S3 what could be the reason why we're using S3 or Amazon now as much as Cloud energy has its own benefits compared to S3 but in the case of S3 what I would say is that S3 is much more cost effective especially when it comes to larger volume S3 offers multiple storage classes with different pricing models that allow users to choose the best option that suits the specific need and S3 is also good when it comes to scalability because it is highly scalable and can handle any amount of size any amount of data regardless of size S3 can be used store and retrieve data from anywhere in the world that offers built-in redundancy and failover capabilities to ensure High availability and in terms of security S3 is uh considered to be much more secure than its nearest competitor so that is the reason why many people may choose to use S3 and not cluttery but each of them stand on their own and each of them have their own benefits over the other ones so you might have to look at them and see which one is a convenient option for you remember that cloud new has that free tier option that you can plot you can literally upload as as many but with a cap that you can upload many files or many images for free while S3 charges you from the moment you upload your first file but it's very cost effective I must say now let's get into our video remember we have to uh find a way in which we can like upload files into our S3 bucket now after we've created our file using Veet tool what we've simply did is we've installed our configured Tailwind CSS and in you but using Tailwind CSS we've managed to use Tailwind CSS to create a component over here so this is the component that we have created with tail1 CSI don't worry I'm going to share this code with you and if I don't share the code in the description box please do remind me because I tend to forget to upload the source code but yes so this is the code that we actually actually we used this code previously in order to upload files to cloudinary so what we're going to be doing is just we're going to be building on top of that project so you don't have to worry too much about the source code if you don't find it here you can find it in the video whereby I was teaching you how to upload files to closer so we're going to use the same code in order to do that so the difference in this case will be in terms of the back end we're going to build a totally or a completely different back end so in here I was teaching you how to upload files to cloudery but now we're going to upload files to Amazon S3 so this is whereby we're going to do the back ends upload images s3.js why did I capitalize.js I need to make it all right so before we do anything we need to download the AWS node.js package so go ahead and say npm install AWS SDK like that now once we created this file what we're going to do at the very top is first of all we need to import the package as you can see over here and then after that we need to configure that AWS package and then after that we're going to create an instance of the S3 service I'm going to give it parameters in our parameters in this case we're giving it the bucket name so what we're assuming once again is that you have created this bucket on AWS S3 and it's so it's very easy to do so you simply just go to the AWS console click on S3 and create the bucket now make sure that your bucket has the proper security controls inside of it so that it's not easily accessible from the outside it's only accessible from your um from your SDK and it make sure that you retrieve these access key IDs make sure you go to IAM inside of the AWS Management console and this is where you'll find your access key ID and your secret access key IDs so these are the keys that I use to program programmatically interact with your AWS Services all right so after you do this now we're going to create our upload function we just simply say S3 dot put object now many people like to use upload but I prefer put object okay like this it has always worked for me and then it's going to be exactly like this now this put this request this is actually a request that we are requesting to put an object into our S3 packet now we have something over here and I don't want to make it params I want to make it data now first of all before we go anywhere you need to recognize that this actually needs to be a function because making it as a function is going to enable us to communicate with whatever request is being made to upload something from the react side remember this is going to be an API we're going to communicate the file information over to this S3 request over here so we're going to make a function over here just make a modern Arrow function and we're just going to call it AWS upload and it's going to receive some parameters I'm going to give them the name params and then I'm going to just take all of this and I'm going to put it inside of my function such and then I'm going to wrap everything inside of here in a promise because it might take a while to execute so I'm just going to say resolve checked like that I'm gonna wrap everything inside of promise I'm sure you could probably see that this is actually a promise on its own that's that's good and then from the param what I want from the user what I want the user to give me actually I want him to give me the file name and I'm going to get this from the params that I just need the parameter object so I'm gonna I want the file name and I want the actual file now the file is going to be transferred or it's going to be transferred as page 64. that's how I like to deal with things now because it's base64 I'm going to have to use a buffer as such and then after this I'm going to maybe make a unique key ID so that this file becomes a little bit different from the other files because you can imagine we're giving it a file name so that as we upload it to the S3 bucket the file is actually unique and we might know what type of file it is so it's going to be a problem if we upload the same file twice we we need a unique ID that is going to allow us to actually identify that object much better so I'm going to use actual time in order to identify that object properly and then I'm going to use I'm going to create some information that is needed by the put request in order to process or upload for first of all what we need is like a unique key like you said I'm just gonna give it maybe the file name I guess I'm just going to give it the file name and then at the end I'm also going to give it that time constant that we created remember this is just an identifier so that the file is a little a little bit different from the others all right I think that is okay then we create a something called body past buff here and we say content encoding what type of content are we serving here it's actually base 64. and then after that you need to instruct our S3 to make this file public so if we make it public it's going to give us a unique URL that is going to allow us to actually access that information so this data is going to be accompanied by this put object request that we're making all right and then after that what's gonna happen is that if there's no error we're absolutely okay so this is when the error actually occurs but if there's no error then we're going to find a way to retrieve um the URL or am I supposed to give us the URL but quite actually in fact we don't actually need an URL because like we yeah we don't need to return a URL because like you can actually figure out what the URL can be based on the naming conventions of these URL remember that how Amazon or AWS makes all these uh URLs it first begins with the bucket and then it goes on to the availability Zone and it goes on to Amazon aws.com I know that might be a little bit confusing so let me just uh explain it a little bit now this is a sample AWS S3 object URL so you use this address over here to access a public resource in Amazon S3 so this is how this URL is created or it is generated right so this over here represents the name of the file and this is standard for all AWS S3 files and this this is also standard sorry let me just put this in here this is standard for all AWS files right and then you have this thing over here this is coding 101 this is the name of the bucket now sometimes there is a possibility that AWS can put in front of these AWS can also put the availability Zone where that bucket is stored but in cases like this way it's much more Universal they don't actually put in that availability zone so this is how it is structured so knowing this we already know how our URL is going to be structured so we already have determined the URL that is going to be given to us from Amazon AWS so we can already predict it and so I like to predict it in my code you can fetch it if you want to but I think it is more knowledgeable to know how this URL is created in AWS now because we know that our S3 bucket is actually known as Amazon we've seen actually because you've seen how our S3 bucket is going to look we can actually predict how our URL is going to look so we're going to use that information that are just subscribed to you over here so we're just going to say const URL is equals to what is that https forward slash coding 101 coding 101 dot S3 dot Amazon AWS .com forward slash we take this information over here the key all right actually I think what I'm going to do regarding that I'm going to switch those two because I want the file name to be at the end not at the beginning right so I'm just gonna make this like this like this make sure to put in those temporary literals and then just gonna yeah we're just gonna do this copy this now we're going to put it in here like that that should work and then we can console log it can give us the data location but I want the file URL and this is going to give us a URL if you're going to take the Amazon ews exam this information right here can show up if you want to be satisfied certified if AWS okay so I think that's it for our back end so what's left to do is actually actually fill up these Keys over here so I'm going to put them in an EnV file and from that EnV file I'm just going to pull out those access key IDs and access keys key remember that this is a promise so we have to resolve and reject so I'm just going to say URL URL I should probably just do it like this it's much cleaner and then we can reject as well this error inside of it there that's good now we're going to take this AWS upload and then we're going to tie it up with um you're going to tie it up with a with a route so over here we were using cloudinary we're going to squeeze us over here again I do have a tutorial that teaches you how to upload to cloudinary so if you're not familiar with that check that out so I'm just going to say upload PWS this is my route I'm using with the post rod remember and so we're going to just put it over here well first we have to import that file I'm just going to say const ant vws upload and to require it very top Dot upload s3.js like this now we need to run our server so we just use node one dot JS check maybe for errors I hope there are none now once your server is running and now we get to test the front end oh we get to actually go to the front end make sure we connect it to our back end there we go so we're going to change these ones that you're seeing over here and we're just gonna say what is our path let's go check out our path there we go it's called upload AWS there you go and then we go to over here and we insert our path AWS there you go I'm realizing that we didn't complete actually our our route so we'll just say the AWS upload yes and this make sure we capture the body Nation image just like that and we say dot then I think it's pretty much the same as this one over here so I'm just gonna copy that put it over there now one thing to note is that the parameters of our post is very different from the parameters that we need remember that in our file we require two parameters we require the file name and the actual file itself so maybe we can come over here and just put up a random file name I guess so this would be the file maybe the file name will be testing file like that testing file I don't know PNG or jpg something like that it should be okay number four we uh go on and test make sure that your syntax is correct and going through this I realized my I didn't capitalize my key so that might be something that might be a problem for you so you just want to make sure that everything is good with regard to that make sure that you feed your function the appropriate information make sure that your component sends a file and it sends a file name so this is going to be testing file.jpg now you can extract this file name directly from your file instead of having to hard code it like the way that I did over here but this is because it's just a testing file so I want them to have like a specific name so that I can delete them later on so and then you want to make sure that the data that is being retrieved aligns with the data that you are giving back so this is going to be instead of response.data it's going to be response stop data.url and this is going to allow us to be able to see that URL properly alright so now we're going to formally test our uploading feature and we're going to just like come over here click and we can select this image that you see over here we will wait for it to load fingers crossed and there you go image upload that successfully and this is our image right here and if we have to click that then you can see that it is allowing us to download this and click over here let's see if this if it is if it is indeed the correct file that we had uploaded previously and there you go so there is the file that you uploaded to your S3 bucket so that is how you do it that's how you use JavaScript in order to upload files into your S3 bucket so I think some of the errors that you might encounter is maybe if you don't configure your S3 bucket appropriately make sure you allow AWS files to determine themselves so that they are able to select whether or not they want to be public or they don't want to be public if you make your bucket to be private then anything that you upload to that bucket is going to be private and you're not going to be given a public URL that is accessible anyway so that is some of the errors that you might go through make sure that you are careful of the syntax errors in your code so that everything works out smoothly but yeah so this is exactly how to use JavaScript to upload files into your S3 bucket this is the back end aspect you can see here is very short in concise this is the back end aspect of our application and this is the front-end aspect of our application so I think that's it for today's video thank you so much for watching I hope you've learned something new I hope you enjoyed this video and if you did it would have hard to just click the like button and make sure that you have subscribed to my channel if this you find some parts of this tutorial very fuzzy and confusing I appreciate all the comments that I can get and I will respond to as many as I can so that I can help you with this very important feature of your applications thank you so much for watching I will see you in the next video

Channel: Koding 101

Views: 4,249

Keywords:

Id: DaPebbc8ppM

Length: 24min 48sec (1488 seconds)

Published: Thu Mar 02 2023