I am working on a drag and drop file upload field.

I am able to return a FileList object containing the file that has been specified by the user. I have a hidden file input field which I then want to add the file object to so I can then send the form data via AJAX.

The problem I am having is that I can't seem to copy the file object to the file input field. Here is how I am attempting it:

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

var fileUploadElem = document.getElementById(fileUploadId);



// trying to copy the first file of files into the file upload field

fileUploadElem.files[0] = files[0];



// this statement returns '0' instead of '1'

console.log('fileUploadElem length: '+fileUploadElem.files.length);

Appreciate any advice or pointers.