The New HTML5 File Reader API
HTML5 provides a standard way to interact with local files, via the File API specification. As example of its capabilities, the File API could be used to create a thumbnail preview of images as they are being sent to the server, or allow an application to save a file reference while the user is offline.
Additionally, you could use client-side logic to verify an upload's mimetype matches its file extension or restrict the size of an upload. The spec provides several interfaces for accessing files from a 'local' file system:
• File - an individual file; provides read only information such as name, file size, mimetype, and a reference to the file handle.
• FileList - an array-like sequence of File objects. (Think <input type="file" multiple> or dragging a directory of files from the desktop).
• Blob - Allows for slicing a file into byte ranges.
When used in conjunction with the above data structures, the FileReader interface can be used to asynchronously read a file through familiar JavaScript event handling. Thus, it is possible to monitor the progress of a read, catch errors, and determine when a load is complete.
In the demo (see below link) , the first thing we do is check that our browser fully supports the File API:
if (!(window.File && window.FileReader && window.FileList)) {
$('#progress_bar').hide();
$('#mainLoad').hide();
$("#picker").attr('disabled','disabled');
$('#error_message').text("This browser does not support HTML5 file loading");
return;
}
After obtaining a File reference, instantiate a FileReader object to read its contents into memory. When the load finishes, the reader's onload event is fired and its result attribute can be used to access the file data.
FileReader includes four options for reading a file, asynchronously:
• FileReader.readAsBinaryString(Blob|File) - The result property will contain the file/blob's data as a binary string. Every byte is represented by an integer in the range [0..255].
• FileReader.readAsText(Blob|File,opt_encoding) - The result property will contain the file/blob's data as a text string. By default the string is decoded as 'UTF-8'. Use the optional encoding parameter can specify a different format.
• 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 an ArrayBuffer object.
Once one of these read methods is called on your FileReader object, the onloadstart, onprogress, onload, onabort, onerror, and onloadend can be used to track its progress. (see updateProgress() function in my FileLoad.js script).
PLEASE NOTE: Any files up loaded with this demo will only be loaded into the browser, and not actually up loaded to any server.
Fallback Solution
No fallback solution was implemented (though many are available), instead we simply disable the upload button if we detect the browser does not support this feature, and display a text message.
Published on 24 March 2013 in HTML5 Features