Restrict Allowed File Types

4 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
    2204 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
    2204 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!
     
Back to Top