Appending Dropped File to <input type="file" multiple> [duplicate]

Question

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

Answer 1

You are correct. You cannot change the value of a file input field.

---

Edit:

From 2017, you can set dropped files into a file input. See How to set file input value when dropping file on page?