Try it out yourself!


Fork me on github!

How it works

Dropbox hover styling

First we assign the hover-styles, so the dropbox lights up upon mouseover and actual dragover.

var dropbox = $(".dropbox");

// dropbox hover styling
dropbox.mouseover(function() {
}).mouseout(function() {

dropbox.bind('dragenter', function() {
    return false;

The drop

Now we bind the drop-event and check if dropped files are actually images. If not, add the dropbox-error class, so the dropbox lights up to indicate this error. When all is well, the list of files is passed to add_data_urls().

// the actual drop
dropbox.bind('drop', function(e) {
    var event = e.originalEvent;
    var data = event.dataTransfer;
    var files = data.files;

    // check files for image type
    var imageType = /image.*/;
    for(var i=0; i<files.length; i++) {
        if (!files[i].type.match(imageType)) {
            $(this).toggleClass("dropbox-error", 1000 );
            return false;

    // we have all the files we need

    return false;


Using the FileReader api we can read the content of the dropped files and show the data in the textarea.

// extract data url and add them to the list
function add_data_urls(files) {
    // target
    var data_urls = $("#dataurls");

    // poor-man's jquery templates
    var div = $("<div />", {
            className: "data_url",
        h4 =  $("<h4 />"),
        img = $("<img />"),
        text = $("<textarea />");

    for(var i=0; i<files.length; i++) {
        var reader = new FileReader();

        // add this file to the list on-screen
        var thumb = img.clone();
        var txt = text.clone();

        var d = div.clone()


        // when the data is loaded, display the image and put the data in the textbox
        reader.onload = (function(image, textarea) {
            return function(e) {
            var data =;
            image.attr('src', data);
        })(thumb, txt);

        // read it!
blog comments powered by Disqus