How do I convert Filelist to Array in Javascript?

Question

In Javascript, when selecting return the selected values from a file input[type=file], it returns the values within a FileList.

Example:

document.querySelector('#files').addEventListener('change', function () {
   console.log(this.files.constructor); // Isso não é um Array, é um FileList
   console.log(this.files)
})

<div>Selecione um ou mais arquivos:</div>
<input type="file" multiple id="files" />

The problem is that the FileList has no common operations of a Array normal, like the forEach, map and the like.

Behold:

document.querySelector('#files').addEventListener('change', function () {
   console.log('Filelist:', this.files.forEach); // retorna 'undefined'
   console.log('Array:', [].forEach); // retorna a função
})

<input type="file" multiple id="files" />

I wonder if it is possible to convert FileList in a Array common in Javascript.

Answer 1

You can use Array.from()

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

document.querySelector('#files').addEventListener('change', function () {
   console.log(Array.from(this.files))
})

<input type="file" multiple id="files" />

Answer 2

The previous answers used Array.from to convert FileList in Array, however I noticed the support for this function is not yet available in all browsers:

It is possible to obtain the same result through the function Array.prototype.slice. Just call [].slice.call(this.files) to obtain the value in Array.

Behold:

document.querySelector('#files').addEventListener('change', function () {
   var files = [].slice.call(this.files);
   console.log(files.constructor); // Isso é um array
   console.log(files.length); 
})

<input type="file" id="files" multiple />

The function Array.slice is compatible with older browsers

Answer 3

Object.values(), 'Spread sintax' ..., call(), apply(), Array.from(),
'Spread arguments' ... + 'Rest Parameters' ...

Object.values(), 'Spread sintax' ..., call(), apply(), Array.from(), convert a objeto FileList in a objecto Array de objetos File and consequently accessible to all métodos Array including .map() and .forEach().

document.querySelector('#files').addEventListener('change', function () {

console.log( Object.values( this.files ) )
console.log( [ ... this.files ] )
console.log( [].slice.call( this.files ) )
console.log( [].slice.apply( this.files ) )
console.log( Array.from( this.files ) )
console.log( ( (..._)=>_)(...this.files) ) /*argumentos spread + rest parameters*/

console.log( Object.values( this.files ) instanceof Array )
console.log( [ ... this.files ] instanceof Array )
console.log( [].slice.call( this.files ) instanceof Array )
console.log( [].slice.apply( this.files ) instanceof Array )
console.log( Array.from( this.files ) instanceof Array )
console.log( ( (..._)=>_)(...this.files) instanceof Array )

} )

<input type="file" multiple id="files" />