Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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><br/><br/><pre id='response'></pre>
<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);
  return false;
};
///////////////////////////////
function upload(files) {
    if ( files[0].size > 10485760 ) {
        // Over 10mb. Handle error
    }
    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('filename',files[0].name);
    formData.append('img',files[0]);f
    var request = new XMLHttpRequest();
    request.open('POST', 'http://httpbin.org/post', /* async = */ false);
    request.send(formData);
    console.log(request.response);
    document.getElementById('response').innerHTML = request.response;
}
</script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jaggedsoftpro
0viewers