Question

I currently have a drag and drop system for images where you drag a file to a div and it gets the file contents with

$('#drop-zone').bind('drop', drop);
function drop(e) {
    e.dataTransfer = e.originalEvent.dataTransfer;
    var files = e.dataTransfer.files;
    //...

and i can put it into a array, now because the drag and drop is not fully compatible (for example mobile devices cant drag and drop) I want a html input field to be able to add an object to the same array, i’ve seen it in demo’s but couldn’t figure out how to do it.

so the form is something like this

<input  type="file" multiple="multiple" id="form-upload-field" />

And currently i’m testing how to catch the file

$('#form-upload-field').bind("change", function(){
    $(this).submit();
});
$('#form-upload-field').submit(function(e){
    //alert( ... );
    //doesnt have to be a change/sumbit method but this is what i have now.
});

But i have no idea how i can get the “dataTransfer” property from this.

Answer 1

Found it myself:

$('#files').bind("change", handleFileSelect);
function handleFileSelect(evt) {
    var files = evt.target.files;
}