Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 29, 2017 18:05
Show Gist options
  • Save anonymous/93a8e414bf220d238e89234f77da8826 to your computer and use it in GitHub Desktop.
Save anonymous/93a8e414bf220d238e89234f77da8826 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<body>
<style>
#holder.hover { border: 10px dashed #0c0 !important; }
</style>
<form method="post" action="http://httpbin.org/post" enctype="multipart/form-data">
<input id="name"><br/>
<input id="type"><br/>
<input id="size"><br/>
<input id="modified"><br/><br/>
<div id="holder" style="width:200px; height:200px; border: 10px dashed #ccc" id="holder"></div>
</form>
<script>
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
upload(e.dataTransfer.files);
};
///////////////////////////////
function upload(files) {
document.getElementById('name').value = files[0].name;
document.getElementById('size').value = files[0].size;
document.getElementById('type').value = files[0].type;
document.getElementById('modified').value = files[0].lastModifiedDate;
var formData = new FormData();
formData.append('img',files[0]);
//post the form data yourself, but it's ready to go
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment