Build a File Upload API to AWS S3 Bucket | .txt, .jpeg, .png, .pdf

what's up everyone welcome back to another episode of AWS tutorial and today I'm going to show you how to build an application for uploading files to AWS S3 and this tutorial is going to be very similar to the previous one that I had where I use API Gateway and the Lambda function to do the file processing and upload that to H3 but I think that application only works for text files it doesn't work for it binary files like jpeg image or PNG image so for today's tutorial I'm going to make it work for both text files and images so it's basically a super version of that and on top of this in this tutorial we're not going to need to use a Lambda function in the middle to do the file processing so that simplifies the process a lot we're just going to use API Gateway to upload a file to to the S3 bucket directly so that's very efficient and for today's tutorial I basically just took the instruction from the AWS website directly which is this one um it has all these steps that you need to build this application it's pretty simple so if you prefer reading articles you can follow this but if you preferred video tutorials you can stay with me and follow along so that we can build this together so without further Ado let's get to it okay so right now I am on the homepage of the AWS Council so Step One is obviously the to create the SV bucket to host our images and text files so I'm going to type in S3 and then we're going to create a new bucket for this tutorial so create a new bucket give it a name that looks good to me I'm going to choose uses one um you can choose whatever your regions you are in but that has to be consistent with the API Gateway that you're gonna configure later on I'll remind you again when we get to it I'm going to leave it as US1 because I am in the East Coast and then bucket versioning enable encryption enable as well and then create buckets okay so that is being created successfully and step number two is to create an IM Row for the API Gateway to use so that it has permission to upload the files to S3 so I'm going to type in IM open that into a new tab I hit rows create a new row and then we're going to choose API Gateway which is the first one you can search it if it doesn't show up check that hit next um so by default it only attaches the cloud watch log permission or policy to it we're going to hit next but then we're going to add the S3 permission later on give it a name I'm going to call it API Gateway S3 bro but you can give it whatever name you want it to be hit create okay so that is done and that is the one that we just created uh so let's attach a new policy to it add permission attach policy uh we're gonna create a policy choose a service um so we're gonna type in S3 and for Action uh we need to upload files to the S3 bucket so we need to give it put object permission output object check that and then resources uh we're gonna specify the on of the AWS S3 bucket so that we only allowed that to the specific bucket um because for security reasons it's good practice so I'm going to go back to S3 copy this bucket name and then within the bucket I allowed that to put in any folder within the bucket hit add and then hit next review give it a name let me just call it S3 put object policy or you can give it a more descriptive name if you want to but this is just an example create policy okay so that is created successfully so now let's go back to the row um search that policy which is created now let me hit refresh okay it's that one is attached policy okay so now we have the policy that we just created attached to the IM row uh so we're ready to use it to create a API Gateway so let me type in API Gateway all right so on the home page of the AWS Gateway you have the option you actually have four options to create to choose what type of API you want to create and for today's tutorial we're going to use rest API so the third one so hit builds hit OK and obviously we're going to create a new one um let's just call it give it a name the API name um let me just call it API actually file upload API that was good to me um keep it as original create API okay so the next step is to create some resources so I'm going to hit action create a resource and then the first one we're going to call it bucket and for the resource path we're gonna add a curly braces to it because that's how we can reference the the path parameter hit create and then next we're going to create another one uh you have to click on the bucket to clear that um so we're gonna call the next one to be file name and because when you upload your file it's going to go into the bucket and then the file name that you want to name your file to be and the same thing we're going to add the colored braces to it hit next and then next we're going to create a method within the resources and then we're going to just put you need to check mark yeah one thing I want to mention here is I think it has to be put according to the uh the website that I follow I try to use post to do it because it makes more sense to me um but I don't think it worked for me um maybe later they change it but for now I think we have to choose put I just want to mention that just so that you don't have to go through all the troubles that I went through um and then remember before we chose Lambda function for the integration but right now we're going to choose a the S3 bucket directly so we're going to choose AWS service and then okay so this is very important um so we have to choose a region that is the same as the one that our s S3 bucket is resigned in um for us it's a USB is one for you if you chose a different region in for the S3 bucket when you created it this one has to be the same as that one otherwise you're gonna get an error so I'm going to choose us is one and then uh we're going to choose S3 and then leave that as blank and then for the method here we can just put and then use the path override and then this is how we name it the first one is bucket we get it from the parameter and then file name I think that's what we name it previously and then for the execution row that is the the product I am the IAM row that we created earlier so we're going to copy the on from that so here we're going to paste it here we're going to leave it as pass through and then default time out then hit save okay we're almost done um Step the next one the next step we're gonna do is to integrate request so we're gonna click here and then we're going to configure the path parameters uh manually we're going to add path the first one is the bucket like where we're going to get that parameter from from the path parameters so we're going to do a method request the path then the the bucket parameter in in the path um hit the check mark and then we're going to add another one called file name and then it's the same thing instead of bucket we're gonna do file name okay so that is done and we are ready to move on to the next step which is the settings foreign [Music] what type of binary media types that we are allowing the um the API to upload for us we wanted to be able to upload images so JPEG and PNG I think those are the uh the most common file types for images so we're going to allow those so image slash jpeg add another one image PNG if you want to allow everything um you can just do like asterisk sign and then slash and asterisk side but I don't think we want to allow everything um so you can choose whatever you want depending on your application but for this tutorial we are only allowing that like media binary media types to be a JPEG image or PNG image you can probably configure that for PDF or other other types of things as well but I'm gonna leave that for you to explore so hit save did it save okay maybe it did okay and one last step that we have to do before we can test it out is to deploy that into our stages um so when we go back to resources and hit action deploy API since we don't have any stages yet so we're going to do def let's say and then hit deploy and that is the URL that it creates for us for us to hit the endpoint for for uploading I think it's going to take like one minute for that to take into effect so I'm gonna pause the video and then come back in one minute okay so it has been a minute so I think it's probably done so let's test it out so I'm going to copy this URL here which is our endpoint and then I'm going to open Postman uh for testing so I'm going to paste it here and then remember we said it's going to be a put method um and then remember we configured resources to be slash bucket and then file name so for the bucket this is our bucket name so I'm going to do slash bucket name and then file name so this is the file name that you want it to be called once it's uploaded to the S3 bucket it doesn't have to be the same as the local file name that you have in your computer so I can call it like file a or something um let's do a text file first so before this tutorial I prepared three files that that we're going to use to test it out um the first one is a text file just something uh random text here and then 502 is the jpeg file they're just like JPEG file very creative and then the third one is PNG file or image which is it just says PNG file here but you can upload like any images here if you want to but one thing I have to mention is I think the limit for API Gateway is 100 megabytes so the image size has to be less than that anything that's above I don't think it supports um in the current infrastructure um so let's test it out so uh we're gonna call it so we're going to upload the text file first you see that we name it file1.tax file in my local machine but I'm gonna call it file a once it's uploaded to the SD bucket so it's pretty flexible so I'm going to hit body and then hit binary select the file which is that hit open it's sent endpoint I found what happened let's see oh okay yeah I don't know what happened before uh maybe it just takes a while to process and stuff but the second time I try it works so it returns number one I'm interested means it's successful um and right now let's go back to the AWS console um and go back to S3 so it was empty if I hit refresh to see the text file here yep it's there and let's go back and then uh upload oops Tableau file B which is a jpeg it's sent okay successful and then hit file C let's upload the PNG file okay they're all successful and now let's go back it's refresh I should be able to see three of them and let's download them and take a look and make sure that the content is right okay text file looks good it's the same as the one that we saw before jpeg yep it still says jpeg file as an image and then the PNG file is still working as well yep so it seems like it's working fine the API um and infrastructure is very simple but if you have any ideas on how to expand the application you can comment down below and if there's enough interest I can create a separate video for that but this is it for today's tutorial I hope Jeff learned something and if you like this video I hope you can give it a thumbs up and I'll see you in the next video

Channel: Felix Yu

Views: 17,084

Keywords: aws, api gateway, s3, file upload api, txt, jpeg, png, pdf

Id: 7T5VbMEJStQ

Length: 16min 4sec (964 seconds)

Published: Sun Nov 27 2022