Use the HTML5 File API to Work with Files Locally in the Browser

I recently came across a problem in a project that I was working on. I needed the user to be able to load an image into the browser, make a few edits to it, and then upload after they were pleased with the edits.

A more old fashioned way of doing this would be to:

  • Upload your image via AJAX
  • Render the uploaded image in the browser
  • Make edits using JavaScript
  • Make another request with data on how to process the image and
  • Apply the changes on the server

Two trips to the server? That seemed inefficient to me so I researched a little bit more and discovered the HTML5 File API.

What is the HTML5 File API?

The HTML5 File API allows you to create applications that let the user interact with files locally. Basically, you can load files and render them in the browser without actually having to upload the files.

3 Main HTML5 File Objects

There are three main objects that you need to know about to work with files locally:

File – A single file object with some metadata

FileList – Simply a list of file objects.

FileReader – An object to read files with a number of methods and event handlers to interact with them.

Accessing A File Using JavaScript

A file list can be accessed when you select a file using an HTML file input. Here is some sample code to handle file inputs. We will console.log() so that we can see what the input is providing us.

Select a Single File


// detect a change in a file input with an id of “the-file-input”
$("#the-file-input").change(function() {
    // will log a FileList object, view gifs below
    console.log(this.files);
});

<!-- with input that accepts one file -->
<input id="the-file-input" type="file">

Selecting Multiple Files


<!-- with input that accepts multiple files, notice the multiple attribute-->
<input id="the-file-input" type="file" multiple>

Rendering the File in Browser

Now that we know how to access the FileList object, all that is left to do is to render the file in the browser. We do this by feeding one of the File objects into a FileReader to generate a local url that can be used as the src in an image element.


// render the image in our view
function renderImage(file) {

  // generate a new FileReader object
  var reader = new FileReader();

  // inject an image with the src url
  reader.onload = function(event) {
    the_url = event.target.result
    $('#some_container_div').html("<img src='" + the_url + "' />")
  }
 
  // when the file is read it triggers the onload event above.
  reader.readAsDataURL(file);
}
 
// handle input changes
$("#the-file-input").change(function() {
    console.log(this.files)
    
    // grab the first image in the FileList object and pass it to the function
    renderImage(this.files[0])
});

With this simple code, we are able to grab and display an image without a trip to the server! This is great since it lessens the load on our server when we have a giant amount of users uploading to our incredibly popular application.

A Cooler Demo

There is a much cooler demo, that I made on CodePen, that actually shows an example video. Make sure you check it out here.

See the Pen html5 file api demo by Spencer Cooley (@SpencerCooley) on CodePen.

The CodePen demo will also give you a closer look at some other attributes that you can grab from the file object such as the file size and name.

Conclusion

Just like that, we are able to view files in browser without the server having to do any work. This helps our application performance overall and opens up lots of different things we can build like image editors.

Spencer

I am a freelance web developer living in San Antonio TX. I work mostly with python and javascript. When not doing client work I work on side projects and also make youtube videos on tech topics. Check out my YouTube page!