Customize DotNetNuke 7 display for file upload controls

DNN7 enhances the file upload control (input type=”file”) with a button display that shows the name of the selected file.  Unfortunately, this control displays only a single file name even if multiple files are selected.  Internet Explorer 9 and earlier versions do not support multiple files but most other browsers do.

Rendered without the DNN7 enhancement:

<input type="file" multiple="multiple" name="dnn$ctr618$Dispatch$myControl$myUpload" id="myUpload">

Rendered with the DNN7 enhancement:

<span class="dnnInputFileWrapper">
    <span class="dnnSecondaryAction">Choose File</span>
    <input type="file" multiple="multiple" name="dnn$ctr618$Dispatch$myControl$myUpload" id="myUpload">
</span>

The method that enhances file upload controls is declared in dnn.jquery.js and is called $.fn.dnnFileInput.  This method can be replaced with a custom method to display multiple file names.  My customization is in the declaration of the $ctrl.change event handler.

1. (function ($) {
2.     "use strict";
3.  
4.     function dnnFileInput() {
5.         return this.each(function () {
6.             var $ctrl = $(this),
7.                 text = '',
8.                 btn = {};
9.  
10.             if (this.wrapper)
11.                 return;
12.  
13.             //if this.wrapper is undefined, then we check if parent node is a wrapper
14.             if (this.parentNode && this.parentNode.tagName.toLowerCase() === 'span' && this.parentNode.className === 'dnnInputFileWrapper') {
15.                 return;
16.             }
17.  
18.             this.wrapper = $("<span class='dnnInputFileWrapper'></span>");
19.             $ctrl.wrap(this.wrapper);
20.             text = $ctrl.data('text');
21.             text = text || 'Choose File';
22.             btn = $("<span class='dnnSecondaryAction'>" + text + "</span>");
23.             btn.insertBefore($ctrl);
24.  
25.             // display the full list of uploaded files
26.             $ctrl.change(function () {
27.                 var val = $(this).val(),
28.                     files = [],
29.                     i = 0,
30.                     max = 0,
31.                     fName = '',
32.                     lastIdx = 0;
33.  
34.                 if (val !== '') {
35.                     if (!this.files) {
36.                         files = [{ name: /([^\\]+)$/.exec(this.value)[1] }];
37.                     }
38.                     else {
39.                         files = this.files;
40.                     }
41.                     max = files.length;
42.                     for (i = 0; i < max; i += 1) {
43.                         fName += files[i].name + ', ';
44.                     }
45.                     lastIdx = fName.lastIndexOf(',');
46.                     val = fName.substring(0, lastIdx);
47.                 } else {
48.                     val = text;
49.                 }
50.                 $(this).prev().html(val);
51.             });
52.         });
53.     };
54.  
55.     $(document).ready(function () {
56.         $.fn.dnnFileInput = dnnFileInput;
57.     });
58.  
59. }(jQuery));

I call the above function from an external script file that is loaded in the page head.

Thanks to the following references which helped me display the uploaded file name in IE9 and earlier:

• Use the file input’s value property instead of files
• Extract just the filename from a full path in JavaScript