With HTML5's
File API one can now access the files in an input field. Readonly, of course - security oblige.
So besides using the
accept attribute to improve usability in standard-friendly browsers (grumble grumble), one can now go another step further and help the user with some client-side validation.
This feature is
present in updated browsers, with the unsurprising
exception of IE.
<input type="file" multiple accept="application/pdf" name="documents">
<input type="file" accept="image/*" name="photo">
<input type="file" multiple accept="text/csv" name="logs">
By using the
.files property of the
<input type="file"> one can iterate over the uploaded files for the input (see the
multiple attribute) and do some validation.
The
File has a
name and a
lastModified date, but it inherits from
Blob and thus also has a
size and a
type.
One could probably use the type instead of the name, to better validate the uploaded file against the input's accept attribute, but we'll leave that for another time.
Let's do some client-side validation:
// HERE BE DRAGONS:
// - Untested, typos and bugs may exist;
// - Does address "foo/*";
// - str.endsWith() is an extension of string that is not normally present otherwise - implement or change the code;
// - Using JQuery is not necessary, this code uses it for simplicity;
// - Fus ro DAH!
$(document).ready(function{
$("input[accept]").change(function({
var accept = $(this).attr("accept");
var MAXFILESIZE = 4000000; // Load this from somewhere. (bytes)
var extension;
if( accept === "application/pdf" ) {
extension = ".pdf";
} else if( accept === "text/csv") {
extension = ".csv";
} else /*if( accept.startsWith("image/")) {
extension = "." + accept.substring(7);
if(extension === ".*") {
extension = "";
}
} else*/ {
return true;
}
var files = $(this).files;
if(!files) {
// WHY U NO HTML5??
var val = §(this).val();
if( val && !val.endsWith(extension) ) {
$(this).val("");
return false;
}
} else {
for(int i=0; i < files.length; i++) {
var file = files[i];
if(!file.name.endsWith(extension)
&& !confirm(
"File extension is not " + extension + ": " + file.name
+ " \nUpload file anyway?"
)
|| file.size > MAXFILESIZE
&& confirm(
"File is bigger than " + (MAXFILESIZE/1024)
+ "KiB and will fail to upload: " + file.name
+ " \nCancel submission?"
)
) {
}
}
}
});
});
As a last note,
never trust user input
means one must always do server-side validation.
But also doing it on the client side means better usability and a more pleasant experience - and serving the users
is our purpose... most of the times, at least. :)
