File APIs Introduction

Chapter 16 3 mins

Learning outcomes:

  1. File handling in JavaScript
  2. Introduction to various APIs

File handling in JavaScript

For a long time, JavaScript has been a language where file-handling utilities have remained quite dull. Even as of yet, there's no way to create, edit, or delete local files on the client's computer.

However this hasn't been without numerous sound reasons!

File manipulation features aren't provided to JavaScript due to the security problems they bring with them.

Imagine a webpage creating tons of files on your computer, or editing existing files there - it would be one of the worst forms of software vulnerabilities; allowed by the browser's vendor itself!

It's simply not safe to allow any remote webpage to create, modify, delete, or even read a random file on the client's computer. The data can be sensitive and thus allowing access to it would mean passing on sensitive information to an undesirable source! Something really crazy!

However, all this doesn't at all mean that there aren't any file handling utilities in JavaScript.

With the advent of HTML forms, it meant that users could manually select given files on their computers to be read by the browser and then consequently sent over to a server (which is the purpose of a form).

JavaScript developers saw this as an amazing opportunity to bundle file utilities into the language - when one selected a file, it indirectly meant that he was willing to provide access to it and likewise it was perfectly safe to read it.

Thus made appearance a handful of interfaces to aid in dealing with files and raw file data in JavaScript. Let's discuss them...


First of all we have the File interface. It's used to represent objects containing useful information about given files.

The files property on an input element of type "file"; and on the dataTransfer property of a ondrop handler's event argument, in both cases, holds a list of File objects.

This interface inherits from a recently common interface known as Blob, abbreviation for Binary Large Object

Blob objects are used to represent raw file data in binary format, and likewise can be passed to the URL.createObjectURL() method to generate link-based resources. We'll discover more dimensions to blobs in the JavaScript Blobs chapter.

Last but not the least, comes the extremely powerful FileReader API, which enables asynchronous file reading operations.

The interface has recently become quite popular due to the fact that it can be used to power some extemely stunning features such as displaying user-selected image files on the go - a feature many applications utilise to give a 'profile picture preview'.

In the coming chapter on JavaScript FileReader API, we'll discuss this interface in great detail, along with some practical-level examples in conjunction with AJAX.

To boil it down, if you need to sky-rocket your skills in working with files in JavaScript, then this unit is the way to go. Let's hop in and start learning

"I created Codeguage to save you from falling into the same learning conundrums that I fell into."

— Bilal Adnan, Founder of Codeguage