Simple & secure direct-to-S3 uploads from modern browsers
<p>The problem of providing users with a way to upload files to an S3 bucket is something you run into in every project. However, identifying the right JavaScript components and configuration and making it all work together to accomplish this task feels like black magic.</p>
<p>The AWS documentation would have you set up an <a href="https://aws.amazon.com/cognito/" rel="noopener ugc nofollow" target="_blank">additional authentication service</a> and import the whole AWS JS SDK into your client code — but there’s really no need for that!</p>
<p>Instead, we can <strong>use pre-signed URLs</strong> and <strong>modern web APIs</strong> to easily upload direct to S3 from the browser with only a hundred lines of code or so.</p>
<p>The overall solution, from the user’s browser’s perspective, looks like this:</p>
<ol>
<li>User clicks “Upload file” and selects a file</li>
<li>Given this file’s metadata, request <strong>a pre-signed S3 PutObject URL</strong> from your server-side API</li>
<li>Given this pre-signed S3 URL, the browser PUTs the file using <code>XmlHttpRequest</code> and can monitor progress</li>
<li>Once uploaded, the browser returns the new key back to the API again in order to trigger whatever your API does with uploaded files</li>
<li>Profit!</li>
</ol>
<p>If you want to skip to the finished code, here’s a gist with TypeScript frontend and Python API handler as examples.</p>
<p>I’ll go through step by step in this post:</p>
<p><a href="https://medium.com/@taylorhughes/simple-secure-direct-to-s3-uploads-from-modern-browsers-f42695e596ba">Click Here</a></p>