Improved file upload control in HTML 5

Introduction

There are plenty of things to talk about in HTML 5. Improvements in file upload html control is surely one of the major enhancement in browsers. In this short article, I would just revise some of them.

Background

As a web developer we always come across a situation where we need to restrict users from uploading file more than certain size, file extension etc. It looks ugly that file needs to be transferred to server to check its size (though there are some jQuery based solutions available to check file size) or extension.

Also, multiple file upload is another topic you can find mostly asked in forums. And the normal suggestions being, try flash based uploaders (third party)

Enhancements in file upload control as per HTML 5 specification added all these capabilities in browser (although not supported in IE yet)

Article Body

This HTML 5 feature I am going to discuss is not yet supported in Internet Explorer (current version IE 9.0.3). Hence, to test this feature you might want to use any other browser including laetst versions of FireFox, Google Chrome, Opera, Safari.

In HTML 5 supported browser, we can now check file details in JavaScript and validate, maximum upload file size allowed and extension of file. This is also possible in old browsers (without HTML 5 support). However it required lot of javascript/jQuery code to validate file size/extension.

            file = document.getElementById("upldFile");
            for (var i = 0; i < file.files.length; i++) {
                alert('File name: ' + file.files[i].name + '\n' + 'File size: ' + file.files[i].size + '\n' + 'File extension: ' + file.files[i].type);
            }

 

Note that, you can simply use name/size properties of file upload control to read size of file being uploaded (in Bytes) and file extension in pure Javascript. The browser itself provides these information hence, the file post is not required to check if file exceeds maximum threshold.

We have used for loop in above Javascript code. Because, HTML 5 also specifies support for mutiple file uploads using single upload control. For this, the input type file tag needs to have another attribute specified which is multiple=”true”. The Asp.net server control can be decorated wtih the propery like this

<asp:FileUpload ID="upldFile" runat="server" multiple="true" />

If the multiple attribute is set to true, then the supported browsers start allowing selection of mutiple files by pressing control key.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function check() {
            file = document.getElementById("upldFile");
            for (var i = 0; i < file.files.length; i++) {
                alert('File name: ' + file.files[i].name + '\n' + 'File size: ' + file.files[i].size + '\n' + 'File extension: ' + file.files[i].type);
            }            
        }
    </script>
</head>
<body style="font-family:Verdana;font-size:small;">
    <form id="form1" runat="server">
    <div>
        select file : 
        <asp:FileUpload ID="upldFile" runat="server" multiple="true" />
        <asp:Button ID="btn" runat="server" Text="Click me" OnClientClick="check();"/>
    </div>
    </form>    
</body>
</html>

To test, use above complete aspx code and run in FF (or any other compatible browser). Click on browse button of file upload control, you can now select multiple files by pressing Cntrl Key as displayed below

Receiving mutliple files in codebehind

After selecting multiple files and posting them using button click, you can read/save these mutiple files in codebehind by looping through Request.Files collection.

for (int i = 0; i < Request.Files.Count;i++ )
        {
            Request.Files[i].SaveAs(Server.MapPath("Uploaded") + "/" + Request.Files[i].FileName);
        }

This is all good. but unfortunatly, we still need to provide alternate way of validating file and multiple uploading as fallback option for users who are on old/unsupported browers. However, this certainly one of the HTML 5 improvements which was most required.

The Visual studio 2011 developer preview also includes support for this HTML 5 enhanced file upload control. I am also pretty sure that next version of Internet explorer will also include its support.

Hope you find this short post usefule in some way and as usual… Comments are welcome 🙂