File API

LearnReading 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.

Free trial on Treehouse: Do you want to learn more about HTML5? Click here to try a free trial on Treehouse.

The FileReader Interface

The FileReader interface provides a number of methods that can be used to read either File or Blob objects. These methods are all asynchronous which means that your program will not stall whilst a file is being read. This is particularly useful when dealing with large files.

The following code shows how to create a new instance of FileReader .

var reader = new FileReader();

In the following sections we are going to take a look at the methods provided by FileReader .

readAsText()

The readAsText() method can be used to read text files. This method has two parameters. The first parameter is for the File or Blob object that is to be read. The second parameter is used to specify the encoding of the file. This second parameter is optional. If you don’t specify an encoding UTF-8 is assumed by default.

As this is an asynchronous method we need to setup an event listener for when the file has finished loading. When the onload event is called we can examine the result property of our FileReader instance to get the file’s contents. You will need to use this same approach for all of the read methods provided by FileReader .

var reader = new FileReader(); reader.onload = function(e) < var text = reader.result; >reader.readAsText(file, encoding);

readAsDataURL()

The readAsDataURL() method takes in a File or Blob and produces a data URL. This is basically a base64 encoded string of the file data. You can use this data URL for things like setting the src property for an image. We will look at how to do this later in the images demo.

var reader = new FileReader(); reader.onload = function(e) < var dataURL = reader.result; >reader.readAsDataURL(file);

readAsBinaryString()

The readAsBinaryString() method can be used to read any type of file. The method returns the raw binary data from the file. If you use readAsBinaryString() along with the XMLHttpRequest.sendAsBinary() method you can upload any file to a server using JavaScript.

var reader = new FileReader(); reader.onload = function(e) < var rawData = reader.result; >reader.readAsBinaryString(file);

readAsArrayBuffer()

The readAsArrayBuffer() method will read a Blob or File object and produce an ArrayBuffer . An ArrayBuffer is a fixed-length binary data buffer. They can come in handy when manipulating files (like converting a JPEG image to PNG).

var reader = new FileReader(); reader.onload = function(e) < var arrayBuffer = reader.result; >reader.readAsArrayBuffer(file);

abort()

The abort() method will stop a read operation. This can come in handy when reading large files.

Now that you have an understanding of how the FileReader API works lets take a look at a couple of examples.

Example: Reading Text Files With The FileReader API

Reading Text Files With The FileReader API

In this section you are going to learn how to build a small JavaScript application that reads a text file and displays it’s contents within a element.

To get started we first need to setup the HTML for our demo. We are going to use a file to handle selecting our file but you could also use drag and drop. We also need to add a element that will be used for displaying the file’s contents.

      
Text File Reader
 
Select a text file:
  

You can find a copy of the stylesheet used in this demo in the code resources.

Now it’s time to start writing the JavaScript code for your application. Create a new file called text.js to house this code.

First we need to get references to the important elements within our HTML. Here we get references to the file and the element and store them in variables called fileInput and fileDisplayArea . We also setup an event listener on the fileInput that listens for the change event. This will be fired whenever the user selects a file.

Now we need to write the code that will handle reading the text file. We first fetch the first file from our input by examining the fileInput s files property and store this in a variable called file . We then create another variable called textType that holds a regular expression that we will use later to test that the selected file is indeed a text file.

var file = fileInput.files[0]; var textType = /text.*/;

In this next block of code we first check to make sure that the selected file is a text file by testing it’s type property. If the file is not a text file we show a File not supported! message on the page.

Once we have determined that the file type is correct we create a new instance of FileReader . Next we setup an event listener for the onload event. Within this event listener we add some code that will update the innerText property of fileDisplayArea using the result property from our FileReader .

Finally we call the readAsText() method, passing in the file variable that we created earlier.

if (file.type.match(textType)) < var reader = new FileReader(); reader.onload = function(e) < fileDisplayArea.innerText = reader.result; >reader.readAsText(file); > else

If you load up the live demo you should be able to select a file from your local hard drive and see it’s contents displayed on the page.

Example: Reading Image Files With The FileReader API

Reading Image Files With The FileReader API

For our next demo we are going to create an application that reads an image file and then displays that image on the page. To do this we are going to be using the readAsDataURL() method.

The HTML markup for this demo is very similar to the HTML we used before. The main difference is that we are now using a element as our fileDisplayArea rather than a . Note that the name of the JavaScript file has also changed to images.js .

      
Image File Reader
 
Select an image file:
  

The initial JavaScript code for this demo is exactly the same as before. We get references to the key elements in our HTML and then setup an event listener for the file .

Next we start by fetching the first file from fileInput . We then create the regular expression for checking the file type. This time we want an image file so the regular expression is: /image.*/ .

As before, we do a check to make sure that the selected file is indeed an image.

We’re now at the point where things start to get a little different. We start by creating a new instance of FileReader and then setting up an event listener for the onload event.

When this event listener is called we first need to clear out fileDisplayArea just in case there is already an image in there. We can do this by setting fileDisplayArea.innerHTML to an empty string.

Next we create a new Image instance and set it’s src property to the data URL that is generated by readAsDataURL() . Remember, the data URL can be accessed from the FileReader ‘s result property. We then add img to the fileDisplayArea using appendChild() .

Finally we issue a call to readAsDataURL() and pass in the selected image file.

var file = fileInput.files[0]; var imageType = /image.*/; if (file.type.match(imageType)) < var reader = new FileReader(); reader.onload = function(e) < fileDisplayArea.innerHTML = ""; // Create a new image. var img = new Image(); // Set the img src property using the data URL. img.src = reader.result; // Add the image to the page. fileDisplayArea.appendChild(img); >reader.readAsDataURL(file); > else

Load up the live demo and select a file from your hard drive. You should see that the file is display on the page. If you were to use the browser’s developer tools to examine the element you would see that the src attribute has been set using the data URL for the image you selected.

Browser Support for the FileReader API

Browser support for the FileReader API is pretty good. The API will work in the latest versions of all the major desktop browsers. It’s worth noting that Internet Explorer only started supporting FileReader in IE10.

IE	Firefox	Chrome	Safari	Opera
10+	3.6+	6.0+	6.0+	11.1+

Final Thoughts

Historically there has been a big divide between the capabilities of a native app and that of an application built with pure web technologies. Whilst I don’t deny that this gap still exists, APIs like FileReader are really helping to close up the divide.

In this post you have learned how to use the FileReader API to read a file from the user’s hard drive and display it’s contents on the page. If you feel like a challenge why not try to create an application that allows the user to drop a file onto the page rather than using an element. My previous post on implementing native drag and drop should help to get you started.

Useful Links

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you’ve been dreaming about.

Источник

FileReader

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user’s computer, using File or Blob objects to specify the file or data to read.

File objects may be obtained from a FileList object returned as a result of a user selecting files using the element, or from a drag and drop operation’s DataTransfer object.

FileReader can only access the contents of files that the user has explicitly selected, either using an HTML element or by drag and drop. It cannot be used to read a file by pathname from the user’s file system. To read files on the client’s file system by pathname, use the File System Access API. To read server-side files, use standard Ajax solutions, with CORS permission if reading cross-domain.

Note: This feature is available in Web Workers

Constructor

FileReader() Returns a new FileReader object. See Using files from web applications for details and examples.

Instance properties

FileReader.error Read only A DOMException representing the error that occurred while reading the file. FileReader.readyState Read only A number indicating the state of the FileReader . This is one of the following:

Name	Value	Description
EMPTY	0	No data has been loaded yet.
LOADING	1	Data is currently being loaded.
DONE	2	The entire read request has been completed.

FileReader.result Read only The file’s contents. This property is only valid after the read operation is complete, and the format of the data depends on which of the methods was used to initiate the read operation.

Instance methods

FileReader.abort() Aborts the read operation. Upon return, the readyState will be DONE . FileReader.readAsArrayBuffer() Starts reading the contents of the specified Blob , once finished, the result attribute contains an ArrayBuffer representing the file’s data. FileReader.readAsBinaryString() Starts reading the contents of the specified Blob , once finished, the result attribute contains the raw binary data from the file as a string. FileReader.readAsDataURL() Starts reading the contents of the specified Blob , once finished, the result attribute contains a data: URL representing the file’s data. FileReader.readAsText() Starts reading the contents of the specified Blob , once finished, the result attribute contains the contents of the file as a text string. An optional encoding name can be specified.

Events

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface. Remove the event listeners with removeEventListener() , once FileReader is no longer used, to avoid memory leaks. abort Fired when a read has been aborted, for example because the program called FileReader.abort() . error Fired when the read failed due to an error. load Fired when a read has completed successfully. loadend Fired when a read has completed, successfully or not. loadstart Fired when a read has started. progress Fired periodically as data is read.

Specifications

Browser compatibility

See also

Found a content problem with this page?

Источник