How to work with FileList (from <input type="file">) in Javascript?

Question

In this W3schools example, console.log on the input element reveals a FileInput object:

FileList {0: File, 1: File, length: 2}

How can I work with this? The example demonstrates accessing the file, but every time a user selects new files, the old files disappear. How can I create a new empty FileList and copy it over, so that a user can add more files to the FileList?

I tried this, but it results in two FileList objects, rather than one FileList with all the files:

var fileStore = x.files;

function myFunction(){
    var txt = "";
    if ('files' in x) {
        if (x.files.length == 0) {
            txt = "Select one or more files.";
        } else {
            fileStore += x.files;
            console.log(x.files);
            console.log(fileStore);

FileList has a readonly length, so I'm guessing it cannot be mutated: developer.mozilla.org/en-US/docs/Web/API/FileList — james_womack
– james_womack, Commented Jul 26, 2016 at 2:35
Ah alright, in that case I'd like to ask, how can I add those files into another variable? — davidtgq
– davidtgq, Commented Jul 26, 2016 at 2:36

Maxim · Accepted Answer · 2025-08-04 06:51:55Z

10

Untested, but this should work

var fileStore = [];

function myFunction() {
    var txt = "";
    if ('files' in x) {
        if (x.files.length == 0) {
            txt = "Select one or more files.";
        } else {
            fileStore.push.apply(fileStore, x.files);
            console.log(x.files);
            console.log(fileStore);
        }
    }
}

2 Comments

davidtgq Over a year ago

This worked! Thanks for the docs. I have to wait 6 minutes until it lets me accept an answer.

Saif Over a year ago

best and easiest solution.

Enmanuel López · Accepted Answer · 2021-08-24 16:36:32Z

8

it is possible to add files using the datatransfer class

export const makeFileList = files => {
  const reducer = (dataTransfer, file) => {
    dataTransfer.items.add(file);
    return dataTransfer;
  }

  return files.reduce(reducer, new DataTransfer()).files;
}

answered Aug 24, 2021 at 16:36

Enmanuel López

811 silver badge1 bronze badge

2 Comments

riqitang Over a year ago

much better than the accepted answer, thank you

surfealokesea Over a year ago

yes agree with @riqitang, this is top performance solution when you are using webkitdirectory and want to filter folders with a lot of files

guest271314 · Accepted Answer · 2016-07-26 02:42:17Z

6

It is not possible to add File objects to FileList. You can use FormData to append Files to a single object.

var data = new FormData();
document.querySelector("input[type=file]")
.addEventListener("change", function(event) {
  for (var i = 0, files = event.target.files; i < files.length; i++) {
    data.append("file-" + [...data.keys()].length, files[i], files[i].name)
  }
})

answered Jul 26, 2016 at 2:42

guest271314

1

3 Comments

guest271314 Over a year ago

@DavidTan See also stackoverflow.com/questions/29841147/…

davidtgq Over a year ago

Thanks. This is slightly more complicated but could ultimately prove more usable than a list since FormData has methods for deleting etc.

guest271314 Over a year ago

@DavidTan Array.prototype.splice() can add or remove an item from an array

james_womack · Accepted Answer · 2016-07-26 02:51:50Z

6

An array is fine for holding onto the File instances, but FormData is better if you want to upload them somewhere. If you want to log out or view the FormData, turning it into a Map is an option. Keep in mind that FormData is iterable.

var formData = new FormData();
var index = 0;

function onDrop(event)
{
  var dt = event.dataTransfer;
  var files = dt.files;

  var count = files.length;
  output("File Count: " + count + "\n");

  for (var i = 0; i < files.length; i++) {    
    formData.append(files[i].name, files[i]);
  }
}

function output(text)
{
  document.getElementById("output").textContent += text;
  console.dir(new Map(formData));
}

See this JSBin.

answered Jul 26, 2016 at 2:51

james_womack

10.4k7 gold badges61 silver badges78 bronze badges

1 Comment

davidtgq Over a year ago

Thanks, the JSBin is much appreciated. An answer is already accepted, but this answer is even more useful for people like myself making a javascript file uploader.

Collectives™ on Stack Overflow

How to work with FileList (from <input type="file">) in Javascript?

4 Answers 4

2 Comments

2 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related