Javascript FileList example | How to modify files in input type file?

Javascript FileList example | How to modify files in input type file?

FileList is an object in javascript used to manipulate the file upload in javascript applications.

What is a FIleList in javascript?

FileList is an object in Javascript to read file metadata and content from input type file control on a user form. It also returns when a file is uploaded using drag and drop API in javascript.

Suppose you have an input type file on a form.

<input type="file" multiple />

Input type file used to upload files from a browser. Multiple options enable to upload of multiple files.

FileList object holds the file information When the user upload a file(s),

Following is an example for reading the input type in pure javascript

  • inputfileselector is assigned by using the input selector tag
  • inputfileselector.files or event.target.files returns FileList object
  • FileList object contains a List of File objects

<!DOCTYPE html>
<html>

<body>
  <h1>Input file example</h1>

<input type="file"  multiple>
<script>
  const inputfileselector = document.querySelector('input');
  inputfileselector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
        const fileList1 = inputfileselector.files;
    console.log(fileList1);
  });
</script>

</html>

Output

FileList {0: File, length: 1}
FileList {0: File, length: 1}
0: File {name: "Das.png", lastModified: 1625064498536, lastModifiedDate: Wed Jun 30 2021 20:18:18 GMT+0530 (India Standard Time), webkitRelativePath: "", size: 859658, …}
length: 1

Even though FileList contains a list of files, It is not an array-type object, But It provides a length method to return file count.

This tutorial list out various examples of using FIleList

How to Convert FileList into Array in javascript?

FileList is an object, not an array object. Why file list is an array? The array can be mutated or modified and FileLlist can not be modified. Because of this reason, most of the DOM-related classes like NodeList, HTMLCollection, and FileList are objects. How do you convert FileList into an array?

const arrayFiles = Array.from(event.target.files);

How to iterate FileList objects in javascript?

Since FileList is not an Array, Then how do you iterate a FileList object You can use FileList with index property to get each file object.

There are multiple ways you can iterate

using for loop

It is simple to use for loop syntax.

Here is an example print upload file names

<script>
  const inputfileselector = document.querySelector('input');
  inputfileselector.addEventListener('change', (event) => {
    const fileList = event.target.files;
for (var i = 0; i < fileList.length; i++) {
    console.log(fileList[i].name);
}

  });
</script>

for-of loop

This is another way syntax is introduced in javascript with for of syntax

<script>
  const inputfileselector = document.querySelector('input');
  inputfileselector.addEventListener('change', (event) => {
    const fileList = event.target.files;
for (let file of fileList) {
    console.log(file.name);
}

  });
</script>

Can we use forEach with the FileList object?

Yes, we can do it differently by converting it into an array.

using a forEach loop

forEach loop introduced in Array in EcmaScript 6 language.

  • First, convert FileList into Array
  • then use ES6 forEach the method to iterate each file object
<script>
  const inputfileselector = document.querySelector('input');
  inputfileselector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    Array.from(field.photo.files).forEach(file => {
    console.log(file.name);
 });


  });
</script>

How do remove a file from FileList in javascript?

When you are working with file upload, You need to add or remove functionality before uploading to the backend.

An uploaded file in javascript returns FileList, So you have to remove a file from FileList.

Here is a sequence of steps

  • First, convert FileList into an Array object
  • Remove a file from Array using splice method, returns new list without a file
  • Assign input element files with a new list
<script>
  const inputfileselector = document.querySelector('input');
  inputfileselector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
  const newList = Array.from(fileList)
    newList.splice(0,1);
    inputfileselector.files=newList

  });
</script>

How to read file name size and type in javascript

FileList contains a list of file objects, each file object holds meta-information of a file.

  • File.name returns the name of a file

  • File.type It returns the MIME type ie file extension. For example,an Image files returns type=Image/png and other types are image/svg+xml application/x-zip-compressed, text/html , application/pdf etc.

  • FIle.size It returns size in bytes

    Here is an example

<!DOCTYPE html>
<html>

<body>
  <h1>Input file example</h1>

<input type="file"  multiple>
<script>
  const inputfileselector = document.querySelector('input');
  inputfileselector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
  const file = fileList[0]
    console.log(file.name);
  console.log(file.size);
  console.log(file.type);
  });
</script>

</html>

Output:

abc.png;
1552681;
image / png;

How to check if the input file upload is empty in javascript?

Sometimes, You want to display a message like “No files selected” during the input type file.

You can use the length method to check FileList object is empty or not

<script>
  const inputfileselector = document.querySelector('input');
if( inputfileselector.files.length == 0 ){
    console.log("no files selected");
}
</script>

How do read file content from the client browser in javascript?

These examples read the file content into a binary string.

Here is a sequence of steps for converting the file into a binary string.

  • Read input file using the input selector
  • select the first file from the FileList object
  • Create a FileReader object to read the file object
  • readAsBinaryString read the file content and converts it to a binary string

Example

<script>
  const inputfileselector = document.querySelector('input');
if( inputfileselector.files.length == 0 ){
    console.log("no files selected");
}
let content="";
    var firstFile = inputfileselector.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function (e) {
      content = e.target.result;

    });
    reader.readAsBinaryString(firstFile);
</script>

In the same way, we can use the Blob object to/from the file of the FileList object.

Conclusion

FileList is an important DOM class to read file contents from input type file control on the browser. Documented a few examples about the File list