Do not miss this exclusive book on Binary Tree Problems. Get it now for free.

Reading time: 30 minutes | Coding time: 10 minutes

The File interface provides information about files and allows JavaScript in a web page to access their content. Files can be simple text files, but even more complex files such as images are possible.Modern Webkit browsers with HTML5 support are already able to handle the FileSystem-API.

With HTML5 file API it is possible for JavaScript to process a file locally, e.g. compress, encode or encrypt it, or upload the file in smaller fractions.

HTMl API has 3 main objects which are used to retrieve files from local system:

FileList: The FileList object represents a list of files in the local system.
File: The File object represents a file in the local file system.
Blob: The Blob object represents a Binary Large Object (BLOB) which is used to hold the contents of a single file from the local file system.

The way to access file from local system is via input element such as:

<input type="file" >

File Object

To take a file object as input, we need an input field like:

<input type="file" >

Complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>File-API</title>
</head>
<body>
    <input type="file" >
</body>
</html>

Copy paste this boiler plate and open it in browser.

On clicking the choose file input you will see a pop-up which will access your local system.

This is one of the simplest way to access file in you local system.
If you want to select multiple files at the same time then use multiple attribute in input tag like this :

<input type="file" multiple>

Now lets see what we can do this with this file,copy the code below ,don't worry if you are not familiar with javascript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>File-API</title>
    <script>
        function showFiles(){
            var file = document.getElementById("input").files[0];
            console.log(file);
        }
    </script>
</head>
<body>
    <input id="input" type="file" onchange="showFiles(this.files)">
</body>
</html>

You will see this:

Let's first understand the code:

input element has an onchange attribute which is calling function showFiles().
Inside showFiles function() , we have selected the input element and files inside it which is stored inside variable 'file'.
Then printing or logging the information contained in the file variable into the console.

Now look at the console, the file object has various properties :

name: Represents the name of the file in the local system.
size: Represents the size of the file in bytes
type: Represents the type of file like image, pdf , text etc.

FileList Object

Filelist object contains array of file objects , what this means ? Let's see it by logging it on console.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>File-API</title>
    <script>
        function showFiles(){
            var file = document.getElementById("input").files;
            console.log(file);
            
        }
    </script>
</head>
<body>
    <input id="input" type="file" multiple onchange="showFiles(this.files)">
    
</body>
</html>

You will see this:

You will observe that the in the console there are 3 files that you have selected in the FileList object.

Now what's the conclusion we get from here?

FileList object contains array of file objects i.e the files you have selected.
File object is the object that contains each individual file.

Now the question comes what is Blob object?
Let's discuss it in next section.

Blob

File object itself inherit the properties of Blob object which stands for Binary large object which is used to contains large binary files.

This is actually known as prototype inheritance which u will learn in the javascript sections.

Let's see it in console:

File object contains the properties type and size that are actually inherited from Blob object.
So, we can actually use any properties in the Blob object directly from File object.

Use of File API

It lets users of your web app directly edit a binary file that's in their local file directory.
It lets website have offline and storage features that involve large binary blobs.

Limitations

The main limitation of HTML5 Api is security.
File api allows to directly access users local system which can be used by hackers to hack into the system.
HTML5 File API is not supported by some browsers.