Question

Interested in building my own drag’n’drop file uploader using JQuery/AJAX/PHP.

Basically I want a file-uploader that users of my site can just drag the file from their computer into a div I created, and it will then upload the file for them to the selected destination.

I would like to build this from scratch, and not use any plugins so that I can better manipulate the restrictions (file types, size, destination folders, etc.)

Have scoured google with no luck, only plugins. Can anyway steer me in the right direction?

UPDATE
Ok, so I figured out how to do what I want. Just set the file input field opacity to 1 so it is hidden, and you can still drag a file into that general area and if you hit the text field it will catch it. HOWEVER, I would like to know how to increase the height/width on the file input field (tried basic css on the file, but it only increases the ‘browse’ button size and not the actual field where you can drop the file into. Any ideas how to do this?
I basically want a big square div that says ‘Drop file here’. So I need to resize the input field.

Answer 1

You can use the HTML5 dragenter and dragleave events to create a dropzone.
Then by placing a file input inside the dropzone, and hiding it with CSS, you can upload the file when the change event for the input fires, like this

var dropzone = $("#dropzone"),
    input    = dropzone.find('input');

dropzone.on({
    dragenter : dragin,
    dragleave : dragout
});

input.on('change', drop);

function dragin(e) { //function for drag into element, just turns the bix X white
    $(dropzone).addClass('hover');
}

function dragout(e) { //function for dragging out of element                         
    $(dropzone).removeClass('hover');
}

function drop(e) {
    var file = this.files[0];
    $('#dropzone').removeClass('hover').addClass('dropped').find('img').remove();

    // upload file here
}

FIDDLE