Today I wanted to write about HTML5’s File API. In the past, a developer would generally write code to determine if a file type was appropriate after the file had been uploaded. This would quite often be annoying for a user especially if the file was large and they only find out that it is inappropriate after it has finished uploading.
Now, using the File API, the web page can determine if a file is acceptable before the user uploads it. In fact, not only can you gather the file type but you can find out other information about a file before committing to upload, such as the file size and the date and time it was last modified. So in this article, I will run through the file upload options and go through a quick example.
To be able to use the File API on the client “browser” side you need to specify the input type as “file”. That’s it, but in most cases you’ll want to set some other options. For example to limit the file input to accept just certain files you would use the “accept” parameter followed by a list of acceptable file types or to accept more than one file you would specify the “multiple” option.
The “accept” parameter can take a generic type or a specified MIME type or file extension. A generic type is one of either audio, video or image and to specify this in the “accept” parameter use “audio/*”, “video/*” or “image/*” respectively.
The following is an example of a file input that accepts one or more audio files.
<input type=”file” id=”sounds” multiple accept=”audio/*” />
The following is an example of a file input that accepts multiple images restricted to MIME types for PNG, GIF and JPEG.
<input type=”file” id=”pics” multiple accept=”image/gif, image/png, image/jpeg” />
The following is an example of a file input that accepts a single image restricted to certain file extensions.
<input type=”file” id=”doc” accept=”.doc, .docx, .rtf” />
The following is an example of a file input that accepts a single portable document format (PDF), Microsoft Word or plain text file but using both the file extension and MIME type. This is only really applicable if the file extension is not used and therefore it matches by MIME type (any matched acceptable format counts).
<input type=”file” id=”cv” accept=”.pdf, application/pdf, .txt, text/plain, .doc, .docx, .xml, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document” />
The “accept” parameter is only there to help the user select the right file(s) for uploading and should not be used to determine the actual file type on the server side. Developers still need to validate all user input (not just file uploads) with suspicion and take appropriate action to make sure nothing malicious occurs.
Let’s see an example. Select a file to upload, there is no submit button but I’ve included an “onchange” event to call a JavaScript function to show the file information.
<script>
function fetchFileInfo() {
//check whether browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob)
{
var u = document.getElementById(‘myFile’);
var f = u.files[0];
document.getElementById(‘output’).innerHTML = ‘<strong>’ + f.name + ‘</strong> (‘ + f.type + ‘) – ‘ + f.size + ‘ bytes, last modified: ‘ + f.lastModifiedDate + ‘.’;
}else{
alert(“Please upgrade your browser, because it does not fully support the File API!”);
}
}
</script>
<style>fieldset { border: solid #cacaca thin; padding: 0.5em; }</style>
<fieldset>
<legend>File Upload Information Test</legend>
<input type=”file” id=”myFile” onChange=”fetchFileInfo();” />
<p>
<div id=”output”>(no content)</div>
</p>
</fieldset>
Check it out using the file input browse button above. From here you can quickly determine suitability and respond appropriately before the user uploads a file. For example, you might have a maximum upload file-size limit that you can check against the file size information, or a restriction on file types (you can see that it shows the mime type) or make sure that the date modified is newer than an existing file.
Of course, this code is pretty useless on its own but could come in very handy when put together in a form to be submitted. If you want to try yourself and add your own form submission in your web-page editor then copy and paste the following into a new HTML file and modify from there.
<!DOCTYPE html>
<html>
<head>
<title>File Upload Information</title>
<script>
function fetchFileInfo() {
//check whether browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob)
{
var u = document.getElementById(‘myFile’);
var f = u.files[0];
document.getElementById(‘output’).innerHTML = ‘<strong>’ + f.name + ‘</strong> (‘ + f.type + ‘) – ‘ + f.size + ‘ bytes, last modified: ‘ + f.lastModifiedDate + ‘.’;
}else{
alert(“Please upgrade your browser, because it does not fully support the File API!”);
}
}
</script>
<style>fieldset { border: solid #cacaca thin; padding: 0.5em; }</style>
</head>
<body>
<fieldset>
<legend>File Upload Information Test</legend>
<input type=”file” id=”myFile” onChange=”fetchFileInfo();” />
<p>
<div id=”output”>(no content)</div>
</p>
</fieldset>
</body>
</html>
Related articles
This is part of a series of articles covering the new features of HTML5. You can find an up-to-date list of those from the Development – HTML5 category.