Restrict Allowed File Types

[Ashleigh L]

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.

[Dimiter Madjarov]

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

 

 

[Ashleigh L]

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?

[Dimiter Madjarov]

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

 

 

[Julien]

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 ?

[Veselin Tsvetanov]

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

[Tayger]

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.

[Tayger]

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.

[Veselin Tsvetanov]

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