jQuery Plugin: Tight HTML5 File Drag and Drop

| Comments

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

Copyright © 2014 - Damien Antipa. Powered by Octopress