I'm not sure if this is possible or not, I'm writing my own file upload plugin with jQuery which is working great, but what I would like to do is enhance user experience by allowing the user to drop a file from their desktop into a div and having that file append to my input

I have the drag and drop working, same with upload, but currently the drag and drop, is separate from the uploading of multiple.

So in my html5 drop function I'd like to do something like this:

<div id=dropZone></div>

<!--Drop area is seperate from the fileUpload below-->

<form enctype=multipart/form-data>

    <input class=clear name=nonImagefilesToUpload[]  id=nonImagefilesToUpload type=file multiple/>

</form>



this.drop = function(e){

    e.stopPropagation();

    e.preventDefault();

    files = e.dataTransfer.files ; 

    for (var i = 0, file; file = files[i]; i++) {



        //pseudo code

        if ( !file.type.match(settings.imageTypeMatch )) {

            //not an image so I want to append it to my files array

            $('#nonImagefilesToUpload').append( file[i] );

            //hoping this will also trigger my input change





        }else{

            var reader = new FileReader();

            reader.onload = (function(aFile) {

            return function(evt) {

                if (evt.target.readyState == FileReader.DONE) 

                {

                    //code to handle my images

                    //which are uploaded seperate via xhr

                }   

            })(file);//done reading the file



            //read the file

            reader.readAsDataURL(file);

        }

    }





    return false;

};  

If anyone could help with this it'd be appreciated, it may not be possible due to securities, but I thought I'd ask