How to restrict the number of files for a single upload

10 posts, 0 answers
  1. JoJo
    JoJo avatar
    20 posts
    Member since:
    Dec 2012

    Posted 29 Dec 2012 Link to this post

    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. ? 
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 01 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. JoJo
    JoJo avatar
    20 posts
    Member since:
    Dec 2012

    Posted 01 Jan 2013 Link to this post

    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 ?
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 02 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. JoJo
    JoJo avatar
    20 posts
    Member since:
    Dec 2012

    Posted 02 Jan 2013 Link to this post

    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? 
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 02 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Dan Cornish
    Dan Cornish avatar
    28 posts
    Member since:
    Apr 2010

    Posted 23 Jan 2013 Link to this post

    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
  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 23 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Dan Cornish
    Dan Cornish avatar
    28 posts
    Member since:
    Apr 2010

    Posted 23 Jan 2013 Link to this post

    Perfect.  Thanks.
  11. Roberto
    Roberto avatar
    3 posts
    Member since:
    Oct 2012

    Posted 18 Jun 2013 Link to this post

    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

Back to Top
Kendo UI is VS 2017 Ready