Multiple File Upload is Easy in HTML5
Multiple File Upload is Easy in HTML5
Join the DZone community and get the full member experience.
Join For FreeJumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
This won't be a terribly long post, nor one that is probably informative to a lot of people, but I finally got around to looking at the HTML5 specification for multiple file uploads (by that I mean allowing a user to pick multiple files from one file form field). I knew it existed I just never got around to actually looking at it. Turns out it is incredibly simple.
You take a file form field:
<input type="file" name="myfile">
And you add multiple to it (or multiple="multiple").
<input type="file" name="myfiles" multiple="multiple">
And... yeah, that's it. Even better, it degrades perfectly. So in Chrome it works, and your label switches from...
to...
I kept waiting for the "But, wait" moment and it never came. In IE where it fails to work, it simply remains a file upload control that works with one file, not many. Because it's so simple and fallback is so good, I can't see really bothering to use another solution, like a Flash uploader, but you could do a bit of massaging for it. So for example, consider if my form had the following label:
Multiple File: <input type="file" name="files" multiple="multiple"><br/>
In IE, the user won't be able to select multiple files. While not the end of the world, it kind of bugs me that the label may mislead the user into trying something they can't do. (And as we know, the user will blame us, not IE.) So what to do?
I did some basic research into how to use JavaScript to detect features. I found a few good examples that basically suggested creating a temporary DOM item like so:
var el = document.createElement("input");
But here's where I had issues. Most of the links I found discussed how to detect new HTML form types, like range for example. These techniques worked by setting the type on the new element to the type you want to test and then immediately checking to see if the type still has the same value. But what about attributes?
Turns out Dive Into HTML5 has a great article on this. When you have your DOM item, you can simply ask if the item exists. Here is an example:
function supportMultiple() {
//do I support input type=file/multiple
var el = document.createElement("input");
return ("multiple" in el);
}
So given that, I modified my mark up a bit. I changed the label in front of my form and hid the word "Multiple":
<span id="multipleFileLabel" style="display:none">Multiple </span>File: <input type="file" name="files" multiple="multiple"><br/>
I then added an init method to my body tag and used the following code:
function supportMultiple() {
//do I support input type=file/multiple
var el = document.createElement("input");
return ("multiple" in el);
}
function init() {
if(supportMultiple()) {
document.querySelector("#multipleFileLabel").setAttribute("style","");
}
}
And that worked like a charm. IE say just "File" whereas Chrome and Firefox had the new hotness.
So yeah - that's a lot of writing about a simple little thing, but... dare I say it... I'm really getting jazzed up about HTML again!
Here's my entire test template if you want to cut and paste:
<!DOCTYPE html>
<html>
<head>
<script>
function supportMultiple() {
//do I support input type=file/multiple
var el = document.createElement("input");
return ("multiple" in el);
}
function init() {
if(supportMultiple()) {
document.querySelector("#multipleFileLabel").setAttribute("style","");
}
}
</script>
</head>
<body onload="init()">
<form action="" method="post" enctype="multipart/form-data">
Normal Text: <input type="text" name="name"><br/>
<span id="multipleFileLabel" style="display:none">Multiple </span>File: <input type="file" name="files" multiple="multiple"><br/>
<input type="submit">
</form>
</body>
</html>
p.s. So how you actually process the upload depends on your server. My ColdFusion readers are probably wondering how it handles this. Good news, bad news. The bad news is that ColdFusion can't (as far as I and other smarter peoiple know) handle this at all. If you want to do this in ColdFusion 9, use the Flash based multifile uploader instead. The good news is that ColdFusion 10 handles it just file. Be sure to use action value of "uploadall" of your cffile tag.
Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.
Like This Article? Read More From DZone
Published at DZone with permission of Raymond Camden , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}