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>