Expose some method add files to a FileList

FileList’s are not writeable in the specs, but to make input.files testable, we’ll need to implement a util method to modify it.

/cc @cpojer

[niksajanjic]

I managed to create FileList without having to alter any of the jsdom library code:

const createFile = (size = 44320, name = 'ecp-logo.png', type = 'image/png') =>
  new File([new ArrayBuffer(size)], name , {
    type: type,
  });

const createFileList = (file) => {
  const fileList = new FileList();
  fileList[0] = file;
  return fileList;
}

const fileList = createFileList(createFile());

In this case I’m creating FileList object calling constructor on FileList provided by jsdom. After that I’m just adding file to that list using Array notation. In my case I only need 1 File in array but this can also be changed to for loop to add multiple files to FileList. I’m creating file with custom name/type/size through File constructor also provided by jsdom which functionality is following specification.

This might be helpful for someone who is looking how to mock FileList in jsdom environment, but one issue still stands. Creating FileList with array of Files using this method wouldn’t allow getting items from array using FileList.item(index) method. But, even that can be fixed by overriding it’s method something like this:

const createFileList = (file) => {
  const fileList = new FileList();
  fileList[0] = file;
  fileList.item = index => fileList[index]; // override method functionality
  return fileList;
}

I still feel it might be better if jsdom could offer these functionalities for testing purposes out of the box.

[tmorehouse]

All modern browsers (i.e. not IE <= 11) now support setting input.files to a FileList https://stackoverflow.com/a/47522812/2744776