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.

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.

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.

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!

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!