UX Design and Development course


Reading Files Using The HTML5 FileReader API

HTML5 saw the introduction of a number of new APIs that can be used to handle files in the browser. These APIs make it much easier to accomplish tasks like reading and writing files or uploading a file created using JavaScript.

In this blog post you are going to learn how to use the FileReader API to read the contents of a file from your local hard drive. You will be creating two demo applications. The first application will handle reading and then displaying the contents of a text file. The second will read an image file and then generate a data URL that will be used to display the image on the page.

Let’s get going!