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

Question

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.

I don't think you can do that, use a FormData object and send that with ajax instead. — adeneo

Unknown Unknown · Accepted Answer · 2015-01-11T21:54:13

This is an example from MDN on how to do it with FormData:

function sendForm() {
  var output = document.getElementById("output");
  var data = new FormData(document.getElementById("fileinfo"));

  data.append("CustomField", "This is some extra data");

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "stash.pl", false)
  xhr.send(data);
  if (xhr.status == 200) {
    output.innerHTML += "Uploaded!<br />";
  } else {
    output.innerHTML += "Error " + xhr.status + " occurred uploading your file.<br />";
  }
}

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

2 Answers