Created
November 17, 2016 19:13
-
-
Save cassiozen/f79d13bc6a79549690a817da13a8b377 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 probably not relevant 3y after the question, but I had the same issue
or posterity's sake: specify headers when sending PUT request to signed URL. (ex. 'x-amz-acl'). Answer from: https://stackoverflow.com/a/54027830/1729641
@cassionzen I get {"message":"Missing Authentication Token"} when I click on the POST endpoint after deploying.
Where should I get the value for apiBaseURL ? It's not clear to me from the documentation
Thank you
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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?