FireFox 3.6 beta 4 introduces support for HTML 5 local file handeling
On November 26th, Mozilla released forth beta version of FireFox 3.6. One of the new features intoduced in this beta is support for the HTML5 local file handeling. This feature is made possible by File API added to the DOM in HTML5. It gives web apps the ability to access, select and handle local files.
File selection using HTML
HTML code to select a single file is simple
To select multiple files, simply use the multiple attribute on the input element:
When the user selects a file, the handleFiles() function gets called with a FileList object containing the File object representing the file selected by the user. In case of multi file select File object for each file the user selected.
File selection by drag and drop
The first step is to establish a drop zone.
var dropbox;
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
In most cases the dragenter and dragover code is pretty simple. They just stop propagation of the event and prevent the default action from occurring:
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
The drop event does all the work.
function drop(e) {
var dt = e.dataTransfer;
var files = dt.files;
handleFiles(files);
e.stopPropagation();
e.preventDefault();
}
Here, we retrieve the dataTransfer field from the event, then pull the file list out of it, passing that to handleFiles(). From this point on, handling the files is the same whether the user used the input element or drag and drop.
Getting information about selected files
Use simple for loop to retrieve individual file objects
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
..
}
...
}
Attributes provided by the File object:
name- The file’s name as a read-only string. This is just the file name, and does not include any path information.
size- The size of the file in bytes as a read-only 64-bit integer.
type- The MIME type of the file as a read-only string, or “” if the type couldn’t be determined.
Visit mozilla developer center for more details on using files from web applications and to see an example of how to display thumbnail previews of images before uploading to the server.
