How to append a file into a File Input field

I am trying to create a file drag and drop feature.

I've the drag and drop working from the div and handling the file.

Now I now would like to append this file to the Input[type=file] of the form .

How could I do that?

I tried uploadFormData.append("files[]",f); and derivates but it doesnt work. My debugging was submit the form and check the headers to see if the file was sent.

Could anyone point me in the right direction on how achieve this?

    <form enctype="multipart/form-data" id="yourregularuploadformId">
         <input type="file" name="files[]" multiple="multiple">
    </form>

<script>
      var uploadFormData = new FormData(jQuery("#yourregularuploadformId")[0]);

        function handleFileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();

        var files = evt.dataTransfer.files; // FileList object.

        // files is a FileList of File objects. List some properties.

        var output = [];


        for (var i = 0, f; f = files[i]; i++) {
          output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                      f.size, ' bytes, last modified: ',
                      f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                      '</li>');
               uploadFormData.append("files[]",f);
        }

        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
      }
</script>

I'm afraid you can't do it this way because you can't dynamically fill an <input type="file" ....> just because if this was allowed, that mean you can grab any file from the user's computer without any validation.

What you can try to do is bind an event like .change() on your div to trigger when a file is dragged, then make an ajax call on that bind that will upload the file, and finally get the file name (or whatever you want when the upload is finished) from the ajax callback and process it the way you want