Selecting invalid files.

[Dona]

Hi

I want my web users to select only .jpg/.png files to be uploaded and set the AllowedFileExtensions property and found that it works rarely because of some browser limitations. So If the user selects an invalid file, I want to display an alert and bring the control back to its original state instead of displaying the selected file as an invalid one.( The one shown as Red). Please help.

Thanks
Dona.

[A2H]

Hello,

Please try this

Add the following css to your page

<style type="text/css">

        li.ruUploading
        {
            display:none;
        }
        li.ruUploading2
        {
            display:block;
        }
    </style>

Subscribe to OnClientFileUploading event of RadAsyncUpload

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload2" OnClientFileUploading="OnClientFileUploading">
            </telerik:RadAsyncUpload>

1)      Add the below javascipt function

function OnClientFileUploading(sender, args) {
                var fileextension = args.get_fileName().split('.').pop();
                if (fileextension != "jpg" && fileextension != "png") {
                    $telerik.$(args.get_row()).addClass("ruUploading");
                    alert("Please select file with extension .jpg or .png");
                    args.set_cancel(true);
                    sender._cancelUpload(args.get_row());
                    sender._updateCancelButton(args.get_row());
                    $telerik.$(".ruRemove", args.get_row()).click();

                }
                else {
                    $telerik.$(args.get_row()).addClass("ruUploading2");
                    args.set_cancel(false);
                }
            }

Thanks,
A2H

[Shinu]

Hi Dona,

Please try the following JavaScript code in the OnClientValidationFailed client event of the RadAsyncUpload.

JavaScript:

<script type="text/javascript">
    function OnClientValidationFailed(sender, args) {
        $telerik.$(".ruCancel").parent().remove();
        alert("Allowed files extension are .jpg, .png");
    }
</script>

Thanks,
Shinu.

[Dona]

Thanks Shinu for the simple solution. Thanks A2H for your reply.

[Dona]

Hi shinu

The QA reported that files that if they try to upload file with a lengthy file name but having a valid extension this validation is happening and alert is shown. How to fix this?

[Shinu]

Hi Dona,

Such an issue can happen when you try to upload files with lengthy file names using the File Api Upload module. As a temporary solution, try the following JavaScript.

JavaScript:

<script type="text/javascript">
    Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable = function () { return false; }
</script>

Thanks,
Shinu.

[Dona]

Shinu, Is there any event that will fire if client upload is cancelled?

[Shinu]

Hi Dona,

Basically there is no specific event which will fire when the "cancel" button is clicked, but you could subscribe on the "click" event and put your logic into the event handler function. In order to subscribe on the click event use the following implementation:

JavaScript:

$telerik.$(".ruCancel").on('click', function () {
    alert("Cancel Clicked");
});

Thanks,
Shinu.