if (Modernizr.draganddrop) {

    // Prevent default on document
    var doc = document.documentElement;
    doc.ondragover = function () { return false; };
    doc.ondrop = function () { return false; };

    // Prevent Default
    var dropzone = document.getElementById('drop_zone');
    dropzone.ondragover = function () { this.className = 'hover'; return false; };
    dropzone.ondragleave = function () { this.className = ''; return false; };
    dropzone.ondragend = function () { this.className = ''; return false; };
    dropzone.ondrop = function (event) {
        event.preventDefault && event.preventDefault();
        this.className = '';

        // now do something with:
        var files = event.dataTransfer.files;
        upload(files);

        return false;
    };

}
else
{
    console.log('drag&drop not supported! :(');
}


$('#upload_images').click(function()
{
    document.getElementById('image_files').click();
});

$('body').on("change", "#image_files", function()
{
    var files = this.files;
    upload(files);
});




// Upload files
function upload(files)
{
    var formData = new FormData();
    for (var i = 0; i < files.length; i++) {
        formData.append('file'+i, files[i]);
    }

    // now post a new XHR request
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/poc/nl/upload');
    xhr.onload = function () {
        if (xhr.status === 200 && xhr.readyState == 4) {
            console.log('all done: ' + xhr.status);
            $('#progress').css({ width: '100%' });
            setTimeout(function(){ $('#progress').css({ width: '0' }); },500 );
        } else {
            console.log('Something went terribly wrong...');
        }
    };

    xhr.upload.onprogress = function (event) {
        if (event.lengthComputable) {
            var complete = (event.loaded / event.total * 100 | 0);
            $('#progress').css({ width: complete+'%' });
        }
    };


    xhr.send(formData);
}