Remove selected file automatically on clientvalidationfailed

[Allan]

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

[Allan]

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.

[Mike]

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>

[Plamen]

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

[Mike]

Thank you.

[Rakesh]

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();
}

[Shinu]

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.

[Rakesh]

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

[Rakesh]

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.

[Shinu]

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.