Web API Cookbook

Chapter 10. Working with Files

Introduction

Reading and writing files are part of many applications. In the past, you couldn’t really work with local files within the browser. To read data, you’d upload a file to a backend server, which would process it and return data to the browser.

To write data, the server would send a downloadable file. Without browser plug-ins, there wasn’t a way to work directly with files.

Today, browsers have first-class support for reading and writing files. The file input type opens a file chooser and provides data about the selected file. You can also limit the supported files to specific extensions or MIME types. From there, the File API can read the contents of the file into memory.

Taking it a step further, the File System API enables your JavaScript code to interact directly with the local filesystem, without needing a file input to select a file first (though, depending on settings, the user may need to grant permission!).

You can use these APIs to create text editors, image viewers, audio or video players, and more.

Loading Text from a File

Problem

You want to load some text data from the user’s local filesystem.

Solution

Use an <input type="file"> to select the file (see Example 10-1).

Example 10-1. A file input

<input type="file" id="select-file">

When you click on the file input, the browser will show a dialog where you can browse files and folders on the local system. The exact dialog shown will depend on the browser and operating ...