[Solved] Is it possible to restrict allowed file types?

[Marc Simkin]

Is it possible to (1) change the list of allowed file extensions on the file select dialog box?  (2) Inform the control of the list of acceptable file extensions allowed to be uploaded.?

thanks

marc

[Dimo]

Hi Marc,

You can use the OnUpload client event to check what file types the user is trying to upload and cancel the procedure if necessary.

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-upload-client-api-and-events.html#OnUpload

In theory, we can implement this client-side checking to be available out-of-the-box, however, you will still have to check the file types server-side, that's why have have refrained from providing such a "partial" feature.

Best wishes,
Dimo
the Telerik team

[Marc Simkin]

Hi:

Thanks for the response.  So I will need to write a client function similiar to this:

function onProfileImageUpload(e) {
    // Array with information about the uploaded files
    var files = e.files;

    // Check the extension of each file and abort the upload if it is not .jpg
    $.each(files, function () {
        if (this.extension != ".jpg" ||
            this.extension != ".jpeg" ||
            this.extension != ".png") {
            alert("Only .jpg, .jpeg, or .png files can be uploaded")
            e.preventDefault();
            return false;
        }
    });
}

I have the upload control configured to do the upload in async mode.  I'm calling back into a SavePhoto method on my controller.

In server method, I would like to do the same validation.  How can I send a message back to the server that the upload failed?  Do I just return the error message in the ContentResult being returned to the client? Is this message then passed to the onError function association with the upload control?

thanks

marc

[Dimo]

Hi Marc,

Server-side validation can be implemented in the Save action:

http://demos.telerik.com/aspnet-mvc/upload

If you want to send a fail message from the server to the client, you can insert it as a content response of the Save action:

return Content("message here")

The message can be read from the e.XMLHttpRequest.responseText property inside the client OnError handler. Note that in the case of success, the content response should be an empty string.

Greetings,
Dimo
the Telerik team

[Scott]

It's more of a "User-Friendly" type feature on the client-side if the Upload Dialog would filter the files shown by a certain file type. IT makes it easier for the user to locate the file they are wanting to upload... :)

[Dimo]

Hi Scott,

The accept HTML attribute works only in Chrome and Opera. Currently it can be set client-side only, e.g. in the OnLoad event:

Html.Telerik().Upload().ClientEvents(ev => ev.OnLoad("applyAccept"))

function applyAccept(e)
{
    $(this).find("input").attr("accept", "image\/jpeg");
}

Multiple types should be separated with a comma. We will add the possibility to set this via HtmlAttributes server-side. Currently the attribute will not be applied to the correct element, that's why a client-side approach is required.

Regards,
Dimo
the Telerik team