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!
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...
Interfaces
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
