How to restrict the number of files for a single upload

[JoJo]

Hi, 

I want to restrict the number of files that can be uploaded to the server for a single Upload click to a maximum of 20.

Is there any way to achieve this in the Kendo UI file upload control. ? 

[Ranjit]

.

[Dimo]

Hi Suresh,

You can use the Upload's select event and cancel it if the file count is greater than 20.

http://docs.kendoui.com/api/web/upload#select

http://demos.kendoui.com/web/upload/events.html

function onSelect(e) {
    if (e.files.length > 20) {
        alert("Please select max 20 files.");
        e.preventDefault();
    }
}

Greetings,
Dimo
the Telerik team

[JoJo]

Thanks Dimo.

Is there any way i can discard some of the files during the onSelect event rather than terminating the entire event (by calling e.PreventDefault()) ?

Only the supported file formats can be uploaded and rest other files have to be discarded. 

During the onSelect event i can check for the extension of the file and discard if it is not in supported format and upload rest of the files.
e.PreventDefault() causes the entire file selection to be discarded and the event terminates. 

But what i want to is i should be able to iterate the selected files from the file list  (e.files) and remove the unsupported format files from the array list and upload only the supported file formats to the server during the upload. I tried to remove the unsupported files from the array and uploaded but this seems to be not working . All the files are uploaded. 

Any way to handle this ?

[Dimo]

Hello Suresh,

You can't control exactly which files will be uploaded due to security restrictions. In other words, you can't control the file input's value - only the user can do this. You can either discard all files or upload all of them.

On a side note, you can use the accept HTML attribute for the initial input, which will restrict what files are displayed in the browser dialog in modern standard-compliant browsers.

Greetings,
Dimo
the Telerik team

[JoJo]

Thanks Dimo. 

Looks like the onUpload event fires for each file upload. Right ?

The onSelect event fires for each button click of "Browse" button and the check to count the number of files ( e.files.count) will work only for that event. But if the user selects 5 times 5 files each then it will be 25 files in total and the onSelect event will not be able to check the count.

Any way we can handle this directly without counting the File items on the page? 

[Dimo]

Hello Suresh,

Yes, if you use the upload event and the widget's multiple option is not disabled, you can skip selected files by cancelling the event. Sorry about not mentioning that earlier.

However, please note that in the upload event handler you don't know how many files will be uploaded in total, because only one file is passed as an event argument. You need some custom implementation to count all files selected by the user by using the select event.

All the best,
Dimo
the Telerik team

[Dan Cornish]

Hi Dimo,

With respect to your comment about setting the accept HTML attribute, when I click "Select..." from my iPad 2 (iOS 6) I don't get the option to "Take Photo".  It takes me directly to "Photos".  How can I get the Upload control to give me the option to take a photo?

<input id="imageUpload" type="file" name="pic" accept="image/*">

When I go to the following link from my iPad2 and click "Choose File", I'm given the options to "Take Photo" or "Choose Existing".  I'd like to replicate this behavior with the Upload control.

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_accept

Thanks

[Dimo]

Hi Dan,

In order to achieve the desired behavior, please disable the multiple file upload capability of the Upload widget.

All the best,
Dimo
the Telerik team

[Dan Cornish]

Perfect.  Thanks.

[Roberto]

Hi there,

We use the Kendo Upload  to allow customers to upload large number of files for processing. Some of our customers in countries with poorer internet have run into bandwidth restrictions when trying to upload a large number of files (i.e a 100 files) simultaneously.

To get around this, is it possible to set a upper limit on the number of async uploads that may be in progress at any given time? 

Thanks in advance

Roberto Bonni