Remove selected file automatically on clientvalidationfailed

10 posts, 0 answers
  1. Allan
    Allan avatar
    3 posts
    Member since:
    Jun 2010

    Posted 06 May 2011 Link to this post

    Hello,

    My problem is with the client-side file validation.  It works, which is great, but I can't figure out how to do anything useful when a file is not valid.  

    Specifically, I'd like to stop it from showing up as a selected file - so if a user tries to upload an invalid file I can just issue a warning and have the RadAsyncUpload control revert to its initial state.  Why is there no option to cancel in the OnClientValidationFail event?  And why is there no option to reset the input from the client-side object?

    Right now, when a file fails validation, it still shows up and a user has to manually remove it before trying another upload.  I'd rather have the control ready for use again immediately.

    I've been looking through the documentation and these forums, and I'm quite surprised no one else has this requirement.  Am I missing something simple?

    Thank you,

    Allan
  2. Allan
    Allan avatar
    3 posts
    Member since:
    Jun 2010

    Posted 09 May 2011 Link to this post

    Okay, I figured this out on my own.  Turns out all I needed was "sender.deleteFileInputAt(0)" in my ClientValidationFailed handler.  Turns out I was missing something simple...

    Thanks anyway.

    I love these controls, by the way.  We couldn't do without them.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mike
    Mike avatar
    7 posts
    Member since:
    Jun 2009

    Posted 01 Feb 2013 Link to this post

    That will not work for multiple files, you'll end up deleting the wrong ones.

    Here's some code you can link to the OnClientValidationFailed event that will work

    <script type="text/javascript">
          //<![CDATA[
            function validationFailed(sender, args) {
                var fileName = args.get_fileName();
                var fileExtention = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length)
                if (fileName.lastIndexOf('.') != -1) {//this checks if the extension is correct
                    if (sender.get_allowedFileExtensions().indexOf(fileExtention.toLowerCase()) == -1) {
                        alert("The file must be a JPG or JPEG!");
                    }
                    else {
                        alert("The file is too large!");
                    }
                }
                else {
                    alert("The file must be a JPG or JPEG!");
                }
                setTimeout(function () {deleteInvalid(sender)}, 250);//wait for the file to actually be added to the async uploads array before trying to delete it
            }
     
            function deleteInvalid(sender) {
                var invalidIndexes = [];
                $telerik.$(".ruUploadSuccess, .ruUploadFailure", sender.get_element()).each(function (index) {
                    if ($telerik.$(this).hasClass('ruUploadFailure')) {
                        invalidIndexes.push(index);
                    }
                });
     
                while (invalidIndexes.length) {
                    sender.deleteFileInputAt(invalidIndexes.pop());
                }
            }
          //]]>
        </script>
  5. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 04 Feb 2013 Link to this post

    Hi,

     
    You can also remove the failed validation files with jQuery as in the code below:

    function validationFailed(sender, eventArgs) {
    sender._updateCancelButton(eventArgs.get_row());
    $telerik.$(".ruRemove", eventArgs.get_row()).click();
    }

    Hope this will be helpful.

    All the best,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Mike
    Mike avatar
    7 posts
    Member since:
    Jun 2009

    Posted 09 Feb 2013 Link to this post

    Thank you.
  7. Rakesh
    Rakesh avatar
    23 posts
    Member since:
    May 2013

    Posted 19 Aug 2014 in reply to Plamen Link to this post

    Hi All
    I have the same issue but I have some requirements like the maximum number of files to upload is 10 and no duplicate files should be allowed. So I am using the below code to check  for duplicates and  any validation fails. It is removing the files but it is also removing the upload control. What I mean is If the file is invalid or duplicate then the file is removed from the UI but after uploading 1 more document  I am not seeing the upload control to upload more documents. Since I have limit of 10 shouldn't the control be available to upload 10 documents.
    In Client Validation method, If I try to upload the same file 10 times it gives me an error but after 10th time the upload control is gone.
    Since I am removing the files shouldn't the control be updated each time until I uplaod valid files?
    I read that in order to remove and upload the same file we have to use "deleteFileInputAt" but in these events I dont have the index of the file. Any help is much appreciated.

    Thanks
    Rakesh

    function onClientFileUploading(sender, args) {
        debugger;
        var message = "";
        var errorWithFile = false;

        //Duplicate File Validation
        for (var fileindex in sender._uploadedFiles) {
            if (sender._uploadedFiles[fileindex].fileInfo.FileName == args.get_fileName()) {
                message = "You have already uploaded a file with the name " + args.get_fileName() + ". Please rename your new file and upload again.";
                errorWithFile = true;
                break;
            }
        }

        if (errorWithFile) {
            --filesSelected;
            args.set_cancel(true);
            sender._cancelUpload(args.get_row());
            sender._updateCancelButton(args.get_row());       
            $telerik.$(".ruRemove", args.get_row()).click();
            alert(message);
        }
        MonitorFileUploadingQueue();
    }

    function onClientValidationFailed(sender, args) {
        var message = "";
        var errorWithFile = false;

        //File Extension Validation
        if (!sender.isExtensionValid(args.get_fileName())) {
            message = "File: " + args.get_fileName() + " selected has an invalid extension.";
            errorWithFile = true;
        }
        //MAX File Size
        else {
            message = "File: " + args.get_fileName() + " has exceeded the " + sender._maxFileSize / 1048576 + " MB file size limit.";
            errorWithFile = true;
        }

        if (errorWithFile) {
            --filesSelected;
            $('#' + $telerik.$(args.get_row())[0].id).remove();
            alert(message);
        }

        MonitorFileUploadingQueue();
    }
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Aug 2014 in reply to Rakesh Link to this post

    Hi Rakesh,

    Please do the following modification in OnClientFileUploading event of RadAsyncUpload and try the same for OnClientValidationFailed also.

    JavaScript:
    ...
    if
    (errorWithFile) {
        args.set_cancel(true);
        args.get_row().style.display = "none";
        alert(message);
    }
    ...

    Thanks,
    Shinu.
  9. Rakesh
    Rakesh avatar
    23 posts
    Member since:
    May 2013

    Posted 20 Aug 2014 in reply to Shinu Link to this post

    Hi Shinu
    Thanks for the reply.I tried the your code but no luck. It is removing the files from the UI but the control is not getting back to its original state. Once I upload the maximum number of files which are valid and invalid, the upload control is disappearing.
    Lets say I have a maxcount limit of 3. I upload a valid file so the count should be 1. Now I try to upload the same file again it is removing the file because it is duplicate but the control's uploaded count is now 2(since I removed it should be 1) and if repeat the same again it count is 3(same here it should be 1) and the upload control is gone. Even though it just shows 1 file has uploaded, but internally it has three files in it.
    Any help is really appreciated.

    Thanks
    Rakesh
  10. Rakesh
    Rakesh avatar
    23 posts
    Member since:
    May 2013

    Posted 20 Aug 2014 in reply to Shinu Link to this post

    Hi Shinu
    I am just curious about the maxfileinputcount property. Does this keep track of just the successfully uploaded files or does this keep track of the selected input files? Looking at the behavior it counts the number of selected input files because even though I am removing the invalid files it is not updating that count. Looks like a bug.
  11. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 Aug 2014 in reply to Rakesh Link to this post

    Hi Rakesh,

    The MaxFileInputsCount property will work based on the number of the selected files not uploaded file.In your scenario if the same file is trying to upload again it is cancelling the uploading event only. As a work around increment the value of MaxFileInputsCount by one whenever the uploading event is cancelling. Please have a look into the modified JavaScript code snippet.

    JavaScript:
    function onClientFileUploading(sender, args) {
        var message = "";
        var errorWithFile = false;
        var maximumFileInput = sender.get_maxFileCount();
        //Duplicate File Validation
        for (var fileindex in sender._uploadedFiles) {
            if (sender._uploadedFiles[fileindex].fileInfo.FileName == args.get_fileName()) {
                message = "You have already uploaded a file with the name " + args.get_fileName() + ". Please rename your new file and upload again.";
                errorWithFile = true;
                //incrementing maxFileCount by 1
                maximumFileInput = parseInt(maximumFileInput) + 1;
                sender.set_maxFileCount(maximumFileInput);
                break;
            }
        }
        if (errorWithFile) {
            args.set_cancel(true);
            sender._cancelUpload(args.get_row());
            sender._updateCancelButton(args.get_row());
            $telerik.$(".ruRemove", args.get_row()).click();
            alert(message);
        }
    }

    Let me know if you have any concern.
    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017