jQuery Plugin: Tight HTML5 File Drag and Drop
I know this not something new and I know there are many good jQuery plugins out there which help to create HTML5 drop fields. But I needed a really tight one with a small footprint. My solution has 270 bytes (YUI Compressor, minified and gzipped) and the sourcecode is accepted by JSLint :)
Drop files here
My plugin just handles the file dropping and passes each dropped file to a callback function. In the example above I used a callback function to send each file to the server asynchronously.
$('#dropper').filedrop({ callback : function (file) { var data = new FormData(); data.append('file', file); $.ajax({ url: '/wp-content/uploads/filedrop/testUpload.php', data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ alert(data); } }); } });
Download jquery.filedrop