Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<title>A File Upload Demo</title>
<style>
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;
}
</style>
</head>
<body>
<div class="aligner">
<div id="drop">Drop files here.</div>
<div id="list">
<h1>Uploaded Files:</h1>
</div>
</div>
<script type="text/javascript">
var drop = document.getElementById('drop');
var list = document.getElementById('list');
var apiBaseURL = "https://74t3vol55c.execute-api.us-east-1.amazonaws.com/dev";
function cancel(e) {
e.preventDefault();
return false;
}
function handleDrop(e){
e.preventDefault();
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({
name: file.name,
type: file.type
})
})
.then(function(response){
return response.json();
})
.then(function(json){
return fetch(json.uploadURL, {
method: "PUT",
body: new Blob([reader.result], {type: file.type})
})
})
.then(function(){
var uploadedFileNode = document.createElement('div');
uploadedFileNode.innerHTML = '<a href="//s3.amazonaws.com/slsupload/'+ file.name +'">'+ file.name +'</a>';
list.appendChild(uploadedFileNode);
});
});
reader.readAsArrayBuffer(file);
}
return false;
}
// Tells the browser that we *can* drop on this target
drop.addEventListener('dragenter', cancel);
drop.addEventListener('dragover', cancel);
drop.addEventListener('drop', handleDrop);
</script>
</body>
</html>
@pvhee

This comment has been minimized.

Copy link

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.