Handle FileList with Array (React)

TiShow
Feb 26, 2021

I’ve been using FileAPI lately. Then, I was confusing FileList and Array.

What can FileList do originally?

This type of objects returned by the files property of the <input> element gives you access to the list of files selected by the <input type = “file”> element.

FileList seems like “Isn’t it inheriting Array ?”

However, I got an error that FileList cannot be treated as an Array because it is regarded as just an object.

FileList can be used with for loop if it is stored in another Array, however if you really would like to handle it as a FileList, I propose as follow using from and foreach.

Array.from(file).forEach(item => {
var reader = new FileReader();
reader.onload = function(event) {
bundle_arr.push(event.target.result);
}
reader.readAsDataURL(item);
});

If you know another better way, please let me know about it !

--

--

TiShow

80% is the creation, the rest is depression. Developer and Data scientist. Looking for Physics Ph.D Twitter: @_t_i_show