React file upload using S3 pre-signed urls
Tags: react, serverless, node, tutorial
Published: 2021-02-16 22:05:46

---
title: React file upload using S3 pre-signed urls
published: true
description: Tutorial project on how to generate pre-signed s3 upload urls using cloudformation, lambda and react.
tags: #react #serverless #node #tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyhihepvak1ih3xhbw1s.png
---

 _Don't forget to like!_

###What are we building?

We're going to create a lambda function that generates a pre-signed url as well as a react front-end utilizing a really cool component library!

Traditionally, uploading files could be a bit of pain to implement & manage. Fortunately AWS allows you to upload objects directly to an S3 bucket using pre-signed urls. Pre-signed urls come with an expiration date, so you need to start your upload before then otherwise access gets blocked.

###Walk through time.

The project is divided up into two sections, basically. The front-end and the back-end.

Head over to github to grab the [code](https://github.com/danstanhope/react-upload-pre-signed-s3-urls).

###Back-end

We're going to be using CloudFormation and AWS SAM to create and deploy our Lambda function as well as create our S3 bucket. This function, when called, is going to generate our pre-signed url for us. You could just as easily host this code within your own API, too.

Firstly, make sure you've got aws-cli and aws-sam-cli installed and configured(setting up your keys & region etc.). Here's how to do [this](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-quickstart.html).

Once you're all set up and ready to go, all you need to do is run `sam build` followed by `sam deploy --guided` from inside the lambda function's root folder. SAM cli will guide you through the deployment and, once successful, you'll have a newly created S3 bucket and lambda function.

Make sure you copy your lambda function's api gateway url, as you'll need to make one small change in the `Upload.js` component. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skwuehzo0kd2jf8u1re1.png)

###Front-end

Update the `Upload.js` component with your API endpoint.

```
const SignedUploadDragAndDrop = () => {
  useRequestPreSend(async ({ items, options }) => {
    const files = items.length > 0 ? items[0] : {};

    let { file } = files;
    let { name, type } = file;
    let gateway = '<YOUR APIGATEWAY ENDPOINT URL>';
    
    const response = await axios(
      `${gateway}?` +
      new URLSearchParams({
        name,
        type,
      })
    );

   ....
```	

After this, just run `yarn` and `yarn start` from inside the frontend folder and you should end up with a page that looks like the one in this post's hero image.

I've used a seriously awesome component library called React-uploady for this tutorial. Specifically, I've combined its upload button, drag-and-drop and progress components. But there are several others you can add on. [Check it out!](https://github.com/rpldy/react-uploady)

When you select a file to upload a request is made to retrieve the pre-signed url and, once returned, the upload begins. Pretty sweet.

Hope this helps!