Restrict Allowed File Types

9 posts, 0 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 12 Nov 2015 Link to this post

    I need to be able to restrict the allowed files types in the upload widget. I see there's some old threads on this (here and here), but any links to examples are dead now.

    Ideally I would be able to pull a list of allowed file types from our DB to be used with the uploader, but if it has to be a static list, that would work as well.

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 13 Nov 2015 Link to this post

    Hello shimmoril,

    You could get the selected files extension in the select or upload event handler, depending on the current requirements. If it is not in the allowed file types list, the event should be prevented.
    E.g.

    function onUpload(e) {
        var files = e.files;
        $.each(files, function () {
            if (this.extension.toLowerCase() != ".jpg") {
                e.preventDefault();
            }
        });
    }

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 16 Nov 2015 in reply to Dimiter Madjarov Link to this post

    Thanks Dimiter, but this results in a completely invisible failure to the user. If I'm the person attempting an upload and it just doesn't do anything, I'm going to get confused and frustrated pretty easily. Is there no way to prevent certain file types from being displayed in the select dialog? And in drag/drop cases, is there no way to display an error message, within the upload widget itself?
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 16 Nov 2015 Link to this post

    Hello shimmoril,

    Restricting the displayed file types in the select dialog is not possible, as it is not allowed by the browser itself. The user can navigate to any file.

    Regarding the second question, as stated in the previous answer, you could execute the custom logic in the select or upload event. In the case of drag and drop, the select event will be fired.

    .Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Julien
    Julien avatar
    1 posts
    Member since:
    May 2015

    Posted 14 Nov 2017 in reply to Dimiter Madjarov Link to this post

    Hi. It actually exists. It's the "accept" TAG in HTML. It is supported by all modern browsers.

    https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept

    https://stackoverflow.com/questions/4328947/limit-file-format-when-using-input-type-file

    How can I make use of this with Kendo ?

  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 16 Nov 2017 Link to this post

    Hi Julien,

    The accept attribute of the <input type="file"> element would not restrict the possible file types, that could be selected for upload. It will only configure the Select file dialog to display those files, that match its value. Any user, however, could skip this restriction, by selecting All from the Select file dialog File type drop-down (screenshot attached).

    The accept attribute could be used in the <input> element, from which the Kendo Upload gets initialized. Its value would be automatically applied on the widget too. Here you could find a small sample demonstrating that.

    Nevertheless, the above could not be considered a reliable approach for restricting user input. Therefore, I would recommend you to use the Upload validation functionality, which is available for the Kendo widget.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 02 Mar 2018 Link to this post

    Why not just telling the user in the upload area what types of files he is allowed to upload? Even big companies do it that way. You even may restrict the file sizes and let the user know this as well.
  8. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 02 Mar 2018 Link to this post

    I forgot to mention: If there would be a solution for that what you are looking for the user might be confused as well: Why can I not choose the ghostwritten files? So I think the best solution here is to let the user know what type of files he can upload.
  9. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 06 Mar 2018 Link to this post

    Hi Farai,

    I would agree with your remark. Explicitly telling the user what are the upload limits would result in improved user experience. 

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top