Search code examples
javascriptfile-uploaddrag-and-dropfilelist

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


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.


Solution

  • The reason it didn't work for me was because one of the JavaScript properties isn't supported in Chrome hence it worked on my colleague's machine who was working within the Firefox browser but not for me.