HTML5 Zone is brought to you in partnership with:

Raymond Camden is a developer evangelist for Adobe. His work focuses on web standards, mobile development and Cold Fusion. He's a published author and presents at conferences and user groups on a variety of topics. He is the happily married proud father of three kids and is somewhat of a Star Wars nut. Raymond can be reached via his blog at www.raymondcamden.com or via email at raymondcamden@gmail.com Raymond is a DZone MVB and is not an employee of DZone and has posted 254 posts at DZone. You can read more from them at their website. View Full User Profile

Multiple File Upload is Easy in HTML5

02.29.2012
| 42834 views |
  • submit to reddit

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.

 

Published at DZone with permission of Raymond Camden, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)