Posted in HTML5 | Posted on 02-28-2012 | 4,052 views
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:
And you add multiple to it (or 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:
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:
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:
2 //do I support input type=file/multiple
3 var el = document.createElement("input");
4
5 return ("multiple" in el);
6
7}
So given that, I modified my mark up a bit. I changed the label in front of my form and hid the word "Multiple":
I then added an init method to my body tag and used the following code:
2 //do I support input type=file/multiple
3 var el = document.createElement("input");
4
5 return ("multiple" in el);
6}
7
8function init() {
9 if(supportMultiple()) {
10 document.querySelector("#multipleFileLabel").setAttribute("style","");
11 }
12}
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:
2<html>
3<head>
4
5<script>
6 function supportMultiple() {
7 //do I support input type=file/multiple
8 var el = document.createElement("input");
9
10 return ("multiple" in el);
11 }
12
13 function init() {
14 if(supportMultiple()) {
15 document.querySelector("#multipleFileLabel").setAttribute("style","");
16 }
17 }
18</script>
19</head>
20
21<body onload="init()">
22
23 <form action="" method="post" enctype="multipart/form-data">
24 Normal Text: <input type="text" name="name"><br/>
25 <span id="multipleFileLabel" style="display:none">Multiple </span>File: <input type="file" name="files" multiple="multiple"><br/>
26 <input type="submit">
27 </form>
28
29</body>
30</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.
<cffile action="uploadAll" ... />
There is also another solution. Using HTML5 ajax file upload you can essentially upload one file at a time but its threaded so they upload in parallel. You have to write the cfml on the server to put the files into a temporary location and log the uploads as only partially complete in a queue of some sort until the user submits the rest of the form and then you finish the process on the final submit which is quick because the files were already uploaded. That does get tricky because you should make an upload progress bar or indicator that the uploads are in progress but it's kinda fun learning it.
As for an Ajax-file file upload - yeah - that does work - along with Flash solutions, but this blog post is specifically about the multiple attribute _only_.
I went back and looked at my previous test code to where where I was using the action="uploadAll" and I'm using it to process the ajax file upload. That's why the HTML5 ajax solution was on my mine. The UploadAll was the only way to upload a single file being send via ajax because there was no 'fieldname' being sent for Coldfusion to grab.
You *could* try grabbing the data content from GetHTTPRequestData() and parsing out the files using the header Content-Type boundary string, but that get hairy really quick. I thought I was going to have to do that until I tested the action="uploadall" to process the ajax upload. I'm glad it worked for that.
It's too bad the uploadAll doesn't work for HTML5 'multiple' files. These sort of issues make me want to dig into the java source code of Railo and see what and why. Maybe another day.
"That's why the HTML5 ajax solution was on my mine. The UploadAll was the only way to upload a single file being send via ajax because there was no 'fieldname' being sent for Coldfusion to grab."
If you use the CF9 Ajax multi file uploader, it actually sends ONE file at a time, and sends it like any other regular file. You use cffile/action=upload and just process it. Seriously - watch it with a network monitor. It fires off one file at a time.
cffile/action=uploadall is ONLY used (afaik), in cases where ONE network request contains N form field fields of type file. So even then it's just a convenience. You could still use N cffile/action=upload calls.