Client-side file upload to S3 using axios

In this example I will demonstrate how to allow your users to upload files directly from their client browsers to AWS. This is great if you don’t need to process any files on your server.

Here are the libraries I will be using:

aws-sdk-js — javascript library for generating a signedUrl on the server

axios — promise-based HTTP client for the browser (you can also use other popular libraries such as superagent)

react-dropzone — file uploading component for React which allows for drag and drop functionality

Server Stuff:

On your server you will need to set up an endpoint to handle a GET request which will take a filename and filetype as parameters. Here is a snippet you can use to create a signed URL:

This module will return a URL that looks something like this:

https://SOME_BUCKET.s3.amazonaws.com/filename.jpg?AWSAccessKeyId=AKIAJDTJA3OMXXXXXXXX&Content-Type=image%2Fjpeg&Expires=1436472979&Signature=%2Fy5LRLwSH%2FzqD1nK5Jjxxxxx84%3D

Now your user has temporary access to upload a file to S3. You can set the expiration time when generating the signed URL, in this case it is 60 seconds.

Client Stuff:

React-Dropzone requires that you provide a handler for when the user selects a file to upload. Here is a code snippet to demonstrate how to get the signed URL then fire off a PUT request to S3:

That’s it! This is a very simple example but I hope it demonstrates how easy it is to allow users to directly upload files to S3 without wasting valuable server resources.