Upload files to AWS S3 bucket using FastAPI and React

foreign we are going to see how to connect our fast API with react application and AWS S3 this is what we are going to make today where the user can choose a file upload click on the upload button and the file will be uploaded to the S3 bucket if the user clicks on the get files button it is going to list all the files that are there in the bucket so if you see right now there are no files in the S3 bucket let's upload one file on the console here you can see the name of the file getting printed and now the now the message saying file uploader uploaded has been printed here if you go to the S3 bucket you can see that the file has been uploaded here if the user clicks on the get files button it is going to print all the files that are present in the bucket let's look at the code now before we move to move on to the code the video is meant to all the users who have prior knowledge on react fast API as well as AWS if you look at the file structure over here I have a folder see which says upload to S3 inside that folder I have a react application called as front end in the same folder I have the backend code which is the first API code in the main.five in the key config.pi file I have the AWS Keys which you can retrieve from your AWS account I let's look at the main dot Pi which is our fast API backend code these are all the libraries libraries that are getting used inside this code for AWS connecting our AWS S3 to run a python application we are going to use the library called as boto3 the object has been created like this and the keys have been passed so that they know which whose account AWS S3 has to be accessed specifying the name of the bucket this is the setting of the course of the react application proper middleware has been inserted as well this is the this is the simple home page or the URL of the fast API which we are not going to use for this particular video let's move on first to the upload functionality this is the upload functionality which is triggered when the user clicks on the upload button on the front end react application it comes over here and this particular function is triggered this particular parameter checks whether the file has been uploaded or has has been chosen by the user if the file exists it will print which we saw in the console and we have here we are using the S3 S3 upload file obj the file object function which is given by the S3 to upload the file to the AWS S3 bucket the parameters that we are passing is the file the bucket name and the name of the file once that is done we get the message that we saw earlier on the console this file is uploaded if not it will simply put the error message saying that there is error in uploading this is this is the uploading functionality let's move to the retrieving all the files from the bucket when the user clicks on the get files button it is redirected to here which is a get request earlier it was a post request now it's a guest net request we can simply use the list objects function given by the S3 and give the name of the bucket with whose data that you want to retrieve once that is retrieved we return the response back to the front end application which is in which is written in react let's go to the react application which is here in the front end folder go to SRC and the app.js to retrieve and to make API calls we are going to use axis which is a react react Library we have mentioned all the necessary data structures that are required for choosing the file for listing all the files and the items that are retrieved from the bucket let's move on the bottom where the user can trigger the functions so this is the part where the file is chosen once the file is chosen so the handle file change functional function is called let's look at that function now this is the function that is getting used so it is it is selecting the file uh which is just one file at a time when the user clicks on the button the handle upload function is called which is this particular function in this function we are using a form tag in which we choose the file get the name of the file which is getting printed and then we make a access post request to the fast API URL and the function that we need to call at the back end we pass the data that we uh you that we uploaded in this case it is going to be the file we get the response and then we try to print the response if there is there is an error we get the error as well in this way we send all the data that is taken from the front and back to the back end and then it is processed using S3 and uploaded onto the S3 similarly if you go back and check the button to get all the files the handle files function is called let's look at that function so this particular function makes a get request to the fast API server and it calls this particular function once that function is called we get the response and we set the files to the variable that has been defined earlier in the react application which is over here once that is done we try to choose we try to get that data and try to display it for that we are going to use a map function we map the function and take each of the file and then we list it as an item based on the index values all right and we just print the name of the key which is the name of the file in this way we are able to we are able to list all the items in the bucket from the front end which is the react application this is a simple use case of connecting your fast API with your react application and uploading your file to the AWS S3 if you like that's it for this video if you like our content please like share and subscribe thank you foreign

Channel: Aniket Wattamwar

Views: 2,088

Keywords: python, react, fastapi, frontend, backend, full stack, restapi, aws, amazon web services, aws s3 bucket, CRUD operation, python fastapi, react with fastapi

Id: pAURQeDQq24

Length: 7min 41sec (461 seconds)

Published: Wed May 31 2023