The upcoming File API for web applications means that HTML 5 pages will be able to ask user for a local file (a file on the user’s computer) and use the data in that file directly. It’s amazing that this hasn’t really existed before. Web applications either used http requests to send the file to the server then have the server send it back, or use super hacky solutions that typically involved using Java or Flash applets to piggy-back into the local file.
Unfortunately, this is not fully supported by browsers. It seems Firefox and Chrom(e|ium) support this File API already, but Safari and Webkit don’t yet. IE may never.
Check it out:
Progress:
File contents:
Here's the source as a full HTML page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8' >
<script>
function startRead()
{
// obtain input element through DOM
var file = document.getElementById('file').files[0];
if(file)
{
getAsText(file);
}
}
function getAsText(readFile)
{
var reader;
try
{
reader = new FileReader();
}catch(e)
{
document.getElementById('output').innerHTML =
"Error: seems File API is not supported on your browser";
return;
}
// Read file into memory as UTF-8
reader.readAsText(readFile, "UTF-8");
// Handle progress, success, and errors
reader.onprogress = updateProgress;
reader.onload = loaded;
reader.onerror = errorHandler;
}
function updateProgress(evt)
{
if (evt.lengthComputable)
{
// evt.loaded and evt.total are ProgressEvent properties
var loaded = (evt.loaded / evt.total);
if (loaded < 1)
{
// Increase the prog bar length
// style.width = (loaded * 200) + "px";
document.getElementById("bar").style.width = (loaded*100) + "%";
}
}
}
function loaded(evt)
{
// Obtain the read file data
var fileString = evt.target.result;
document.getElementById('output').innerHTML = fileString;
document.getElementById("bar").style.width = 100 + "%";
}
function errorHandler(evt)
{
if(evt.target.error.code == evt.target.error.NOT_READABLE_ERR)
{
// The file could not be read
document.getElementById('output').innerHTML = "Error reading file..."
}
}
</script>
</head>
<body>
<input id="file" type="file" multiple onchange="startRead()">
<h3>Progress:</h3>
<div style="width:100%;height:20px;border:1px solid black;">
<div id="bar" style="background-color:#45F;width:0px;height:20px;"></div>
</div>
<h3>File contents:</h3>
<pre>
<code id="output">
</code>
</pre>
</body>
</html>
Note: This WILL NOT WORK if you load your html page as a local file. Meaning the address starts with file:/// instead of http://, for some reason the page must be served to the browser from a server.
Tags: file, html, javascript
I am trying execute this code as it is with .txt file
it gives me an error:
Error: seems File API is not supported on your browser
what does it mean… i am working on firefox browser
According to caniuse.com, you need at least firefox version 3.6.
What version are you using? (On Mac you can click Firefox -> About Mozilla Firefox)
Nice article
Been playing around with this stuff for a while, why wont it work locally for Chrome even v12!! All tickety Boo with Firefox 4 and dont care about IE.
I wrote a Java Applet a while back that handles Reading of local files but it’s a hack and I am still looking for a cleaner alternative.
Hi Steve,
I think the browsers are not supporting it locally on purpose, though I have no idea why. It’s seems like they must be going out of their way to block it.
Hopefully this File API turns into a universal solution…
-A
Hi Alex,
Nice article. Update to your note “Note: This WILL NOT WORK if you load your html page as a local file. Meaning the address starts with file:/// instead of http://, for some reason the page must be served to the browser from a server.” : With Firefox 4.0.1 this works also with local html pages but sadly still not with google chrome.
Regards
Peter
IT’S WORKS ONLY FOR .TXT FILE …NOT FOR IMAGE …
IT works fine with firefox and chrome ..what is the problem with explorer..we all know xplorer suxx ..there are still dumbheads who use it..plz let us know how to make it work on xplorer ..ty
[...] file I am selecting from my system using html file-upload input box. Referred to the below link but http://www.alecjacobson.com/weblog/?p=1645 where the code is not compatible for other [...]
Hi, this works fine but can you show me how I can feed the file name manually (it’s always the same, e.g c://myfile.txt) therefore no user input is necessary. Thanks much.
@Xavier, I have no idea. But I would guess this is not allowed for security reasons.
Great stuff : it is exactly what I need.
Alec thank you for that
PS: I.E.9 is still not up to date regarding HTML5 (!!!)
The favorite message of Microsoft is “Please wait…”