KendoUI Upload multiple files: bug / feature

While using KendoUI, we do expect that attributes defined in an HTML are propagated to the final HTML. Well… that uses to be the case but … not always.

Problem description

I have the following HTML code:

<form id="form">
    <input type="file" name="attachment" /><br/>
    <input type="submit" value="Send"/>
</form>

That looks like:

HTML form

If I open the HTML file and try to select multiple file: I cannot: Correct!
If I change the HTML file adding to the input of type file the attribute multiple:

<form id="form">
    <input type="file" name="attachment" multiple/><br/>
    <input type="submit" value="Send"/>
</form>

The form looks almost the same (in my Safari and Chrome just a plural in the button that says “Choose files” instead of “Choose file”, in Firefox they look exactly the same -to me-) but when the browser opens a window for choosing the files, I can actually select several: Correct!

The problem with KendoUI

Lets now use kendoUpload Widget for “decorating” the input of type file. One way of doing it in from JavaScript as follows:

$("input[name='attachment']", "#form").kendoUpload();

We can see that the input is actually decorated by KendoUI:

KendoUI upload widget

And if I try to select multiple files I can: Correct!

KendoUI upload with multiple files

But what about if I remove multiple attribute, I would expect that I can choose only one…

KendoUI upload without multiple attribute

Incorrect!
Taking a look into the KendoUI forums I found this where a member of Telerik Team suggests to use (actually talking about a different topic but relevant anyway):

    <input name="files[]"
           id="files"
           type="file"
           data-role="upload"
           data-multiple="false"
           data-async='{"saveUrl":"/saveHandler", "autoUpload":true}'>

Let’s try it, just changing the data-multiple=”true” by a false: Correct!
So, basically you should not use standard HTML5 multiple but KendoUI owned data-multiple (maybe because it is not supported in most IE?).

Conclussions

If you use declarative initialization you should define data-multiple=”false” and if you use JavaScript initialization you should explicitly add the attribute multiple: false since default value is true (the default of what you expect from HTML forms).

Fixing the bug / feature

Change default value for multiple

Change the default value for multiple is just changing one line of code: open you kendo.web.js or kendo.upload.js and look for the following code:

        options: {
            name: "Upload",
            enabled: true,
            multiple: true,

and replace it by:

        options: {
            name: "Upload",
            enabled: true,
            multiple: false,

Use input multiple definition

In addition to previous fix, if you want to be able of defining multiple in your HTML input element, then in the same files few lines above it says:

that.multiple = that.options.multiple;

and replace it by:

that.multiple = that.options.multiple || element.multiple;

That’s it, Happy KendoUI fixing!