Working With the File API in HTML5

Introduction

In HTML5 we have to communicate with local files by the use of the file API. The File API can be used to create a concise viewing of images, it helps with sending to the server. It provides access by an application to save a file with reference but the user is offline.

Here we have to use the client-side logic to verify and upload a file that matches its file extension or restricts the size of an upload.

The are several interfaces for accessing the local filesystem.

File: An individual file; provides read-only information such as name, file size, mimetype, and a reference to the filehandle.
Filelist: An array-like sequence of Fileobjects. (Think <input type="file" multiple> or dragging a directory of files from the desktop).
Blob: Allows for slicing a file into byte ranges.

The file reader interface can be used to asynchronously read a file through the familiar JavaScript event handling. It is possible to monitor the progress of a read, catch errors, and determine when a load is complete.

Selecting files

The first thing to do is to check that the browser fully supports the File API.

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}

Using form input for selecting

The most straightforward way to load a file is to use a standard <input type="file"> element. JavaScript returns the list of selected File objects as a filelist.

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('
<li>
<strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '
</li>');
}
document.getElementById('list').innerHTML = '
<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Example: Using form input for selecting file and load a file. Uses the multiple attribute to allow selecting several files at once.

Reading files

After getting a file reference, instantiate a filereader object to read its contents into memory. When the load finishes, the reader is onload event is fired and its result attribute can be used to access the file data.

FileReader includes four options for reading a file.

FileReader.readAsBinaryString(Blob|File) - In this property will contain the file/blob's data as a binary string.
FileReader.readAsText(Blob|File, opt_encoding) - Thisproperty will contain the file/blob's data as a text string.
FileReader.readAsDataURL(Blob|File) - The result property will contain the file/blob's data encoded as a data url.
FileReader.readAsArrayBuffer(Blob|File) -The result property will contain the file/blob's data as arraybuffer object.

Example: The given example filters out images from the user's selection, call reader.readAsDATAURL() on the file, and renders a thumbnail by setting the src attribute to a data URL.

Code:

<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['
<img class="thumb" src="', e.target.result,
'" title="', theFile.name, '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Example: Reading files.

In this example, we have to read a directory of images.

Slicing a file

In some cases reading the entire file into memory is not the best option.

For example

We wanted to write an async file uploader. One way to speed up the upload would be to read and send the file in separate byte-range chunks. The server component would then be responsible for reconstructing the file content in the correct order.

The file interface supports a slice method to support this use case. The method takes a starting byte as its first argument, ending byte as its second, and an optional content-type string as a third. The semantics of this method changed recently.

Code

if (file.webkitSlice)
{
var blob = file.webkitSlice(startingByte, endindByte);
} else if (file.mozSlice)
{
var blob = file.mozSlice(startingByte, endindByte);
}
reader.readAsBinaryString(blob);

ForExample

The following example, that reads chunks of a file, uses the onloadend and checks the evt.target.readyState instead of using the onload event.

Code

<style>
#byte_content {
margin: 5px 0;
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
#byte_range { margin-top: 5px; }
</style>
<input type="file" id="files" name="file" /> Read bytes:
<span class="readBytesButtons">
<button data-startbyte="0" data-endbyte="4">1-5</button>
<button data-startbyte="5" data-endbyte="14">6-15</button>
<button data-startbyte="6" data-endbyte="7">7-8</button>
<button>entire file</button>
</span>
<div id="byte_range"></div>
<div id="byte_content"></div>
<script>
function readBlob(opt_startByte, opt_stopByte) {
var files = document.getElementById('files').files;
if (!files.length) {
alert('Please select a file!');
return;
}
var file = files[0];
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || file.size - 1;
var reader = new FileReader();
// If we use onloadend, we need to check the readyState.
reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
document.getElementById('byte_content').textContent = evt.target.result;
document.getElementById('byte_range').textContent =
['Read bytes: ', start + 1, ' - ', stop + 1,
' of ', file.size, ' byte file'].join('');
}
};
if (file.webkitSlice) {
var blob = file.webkitSlice(start, stop + 1);
} else if (file.mozSlice) {
var blob = file.mozSlice(start, stop + 1);
}
reader.readAsBinaryString(blob);
}
document.querySelector('.readBytesButtons').addEventListener('click', function (evt) {
if (evt.target.tagName.toLowerCase() == 'button') {
var startByte = evt.target.getAttribute('data-startbyte');
var endByte = evt.target.getAttribute('data-endbyte');
readBlob(startByte, endByte); }
}, false);
</script>

Example: Here we have to browse a file and read it in slices.

Read bytes: 1 - 5 of 1969 byte file.

Monitoring the progress of a read

One of the nice things that we get for free when using async event handling is the ability to monitor the progress of the file read; useful for large files, catching errors, and figuring out when a read is complete.

The onloadstart and onprogress events can be used to monitor the progress of a read.

For Example, The example displaying a progress bar to monitor the status of a read. To see the progress indicator in action, try a large file or one from a remote drive.

Code

<style>
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
clear: both;
opacity: 0;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
opacity: 1.0;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}
</style>
<input type="file" id="files" name="file" />
<button onclick="abortRead();">Cancel read</button>
<div id="progress_bar">
<div class="percent">0%</div>
</div>
<script>
var reader;
var progress = document.querySelector('.percent');
function abortRead() {
reader.abort();
}
function errorHandler(evt) {
switch (evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert('File Not Found!');
break;
case evt.target.error.NOT_READABLE_ERR:
alert('File is not readable');
break;
case evt.target.error.ABORT_ERR:
break; // noop
default:
alert('An error occurred reading this file.');
};
}
function updateProgress(evt) {
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
// Increase the progress bar length.
if (percentLoaded < 100) {
progress.style.width = percentLoaded + '%';
progress.textContent = percentLoaded + '%';
}
}
}
function handleFileSelect(evt) {
// Reset progress indicator on new file selection.
progress.style.width = '0%';
progress.textContent = '0%';
reader = new FileReader();
reader.onerror = errorHandler;
reader.onprogress = updateProgress;
reader.onabort = function (e) {
alert('File read cancelled');
};
reader.onloadstart = function (e) {
document.getElementById('progress_bar').className = 'loading';
};
reader.onload = function (e) {
// Ensure that the progress bar displays 100% at the end.
progress.style.width = '100%';
progress.textContent = '100%';
setTimeout("document.getElementById('progress_bar').className='';", 2000);
}
// Read in the image file as a binary string.
reader.readAsBinaryString(evt.target.files[0]);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Example

Monitoring the progress of a read. We have to browse a file and read it below.

Output:

Resources

Here are some useful resources: