Selecting invalid files.

8 posts, 1 answers
  1. Dona
    Dona avatar
    23 posts
    Member since:
    Apr 2013

    Posted 13 Aug 2013 Link to this post

    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.
  2.
  3. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 13 Aug 2013 Link to this post

    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
  5. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 13 Aug 2013 Link to this post

    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.
  7. Dona
    Dona avatar
    23 posts
    Member since:
    Apr 2013

    Posted 15 Aug 2013 Link to this post

    Thanks Shinu for the simple solution. Thanks A2H for your reply.
  8.
  9. Dona
    Dona avatar
    23 posts
    Member since:
    Apr 2013

    Posted 05 Sep 2013 Link to this post

    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?
  11. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 06 Sep 2013 Link to this post

    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.
  13. Dona
    Dona avatar
    23 posts
    Member since:
    Apr 2013

    Posted 10 Sep 2013 Link to this post

    Shinu, Is there any event that will fire if client upload is cancelled?
  14.
  15. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Sep 2013 Link to this post

    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.
Back to Top