Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a File object to a FileList collection in JavaScript?

Tags:

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.