Upload Multiple files to S3 using Lambda via React App

In this blog, we’re gonna learn to upload multiple files on AWS S3 using signed URL generated by a Lambda function. The lambda function will be triggered by an API Gateway from a ReactJS App.

Let’s get started!

We will need an S3 Bucket with CORS enabled. To do so, after creating the bucket, open the bucket, go to permissions tab and then, select CORS Configuration. Edit & Save.

The MaxAgeSeconds elements specifies the time that your browser can cache the response. In this we have allowed all origins to to send cross-origin requests. You can also specify the origins that you want to allow cross-domain requests from. Click here to learn more.

Now that we have configured our S3 bucket, let’s move on to the lambda function (Runtime — NodeJS). The iamrole of your lambda function must have permissions to access S3 bucket. The following code will be in index.js & will generate the signed URL.

Now, it is time to add an API trigger for the lambda function. Click on add trigger and select API Gateway, and then HTTP API.

Remember to enable CORS in the trigger configuration.

Copy the endpoint of this API & save for later use.

Now, let’s move onto the code for the React App. We will be uploading multiple audio files in this example, you can change that as per your requirement.

That’s it! Once your request is completed, you will find your files in the S3 bucket.