Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<html lang="en">
<title>A File Upload Demo</title>
html, body {
height: 100%;
margin: 0;
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
.aligner {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
#drop {
height: 200px;
width: 200px;
border-radius: 100px;
color: #fff;
background-color: #baf;
font-size: 20px;
display: flex;
align-items: center;
<div class="aligner">
<div id="drop">Drop files here.</div>
<div id="list">
<h1>Uploaded Files:</h1>
<script type="text/javascript">
var drop = document.getElementById('drop');
var list = document.getElementById('list');
var apiBaseURL = "";
function cancel(e) {
return false;
function handleDrop(e){
var dt = e.dataTransfer;
var files = dt.files;
for (var i=0; i<files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.addEventListener('loadend', function(e){
fetch(apiBaseURL+"/requestUploadURL", {
method: "POST",
headers: {
'Content-Type': 'application/json'
body: JSON.stringify({
type: file.type
return response.json();
return fetch(json.uploadURL, {
method: "PUT",
body: new Blob([reader.result], {type: file.type})
var uploadedFileNode = document.createElement('div');
uploadedFileNode.innerHTML = '<a href="//'+ +'">'+ +'</a>';
return false;
// Tells the browser that we *can* drop on this target
drop.addEventListener('dragenter', cancel);
drop.addEventListener('dragover', cancel);
drop.addEventListener('drop', handleDrop);

This comment has been minimized.

Copy link

pvhee commented Mar 9, 2017

@cassiozen I'm receiving the cryptic "SignatureDoesNotMatch" on the PUT request. Any idea what might cause this in this context? Seems like a lot of people have this error and that it could be related to any wrong parameters in the uploadURL. Is the example still working correctly for you, or has something changed in S3 URL signing somehow?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.