This is a migrated thread and some comments may be shown as answers.

Selecting invalid files.

7 Answers 126 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Dona
Top achievements
Rank 1
Dona asked on 13 Aug 2013, 05:59 PM
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.

7 Answers, 1 is accepted

Sort by
0
A2H
Top achievements
Rank 1
answered on 13 Aug 2013, 09:47 PM
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
0
Accepted
Shinu
Top achievements
Rank 1
answered on 14 Aug 2013, 04:23 AM
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.
0
Dona
Top achievements
Rank 1
answered on 15 Aug 2013, 09:52 AM
Thanks Shinu for the simple solution. Thanks A2H for your reply.
0
Dona
Top achievements
Rank 1
answered on 05 Sep 2013, 07:31 PM
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?
0
Shinu
Top achievements
Rank 1
answered on 06 Sep 2013, 05:58 AM
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.
0
Dona
Top achievements
Rank 1
answered on 10 Sep 2013, 05:42 PM
Shinu, Is there any event that will fire if client upload is cancelled?
0
Shinu
Top achievements
Rank 1
answered on 11 Sep 2013, 09:28 AM
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.
Tags
AsyncUpload
Asked by
Dona
Top achievements
Rank 1
Answers by
A2H
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Dona
Top achievements
Rank 1
Share this question
or