ASPxClientFileManager.FileUploadValidationErrorOccurred Event

Enables you to specify whether the selected file(s) are valid and provide an error text.

Declaration

FileUploadValidationErrorOccurred: ASPxClientEvent<ASPxClientUploadControlValidationErrorOccurredEventHandler<ASPxClientFileManager>>

Event Data

The FileUploadValidationErrorOccurred event's data class is ASPxClientUploadControlValidationErrorOccurredEventArgs. The following properties provide information specific to this event:

Property	Description
errorText	Gets or sets the error text.
invalidFiles	Returns an array of invalid files.
showAlert	Gets or sets a value specifying whether an alert message is displayed when the ASPxClientUploadControl.ValidationErrorOccurred event fires.
validationSettings	Gets the validation settings for the selected files.

Remarks

The FileUploadValidationErrorOccurred event is automatically raised each time a user selects one or several files to upload, and allows you to specify whether these files are valid for the following parameters:

• UploadControlValidationSettings.MaxFileCount - The maximum file count to be uploaded at once.
• FileManagerSettings.AllowedFileExtensions - Allowed file extensions of the uploaded file(s).
• UploadControlValidationSettings.MaxFileSize - Maximum file size (in bytes).
• Use of invalid symbols in a file name: ,/,:,*,?,”,<,>,|

The FileUploadValidationErrorOccurred event is used to customize the error message and provide more information about why the selected file(s) are invalid.

Example

The following example illustrates how to use the ASPxClientFileManager.FileUploadValidationErrorOccurred event to customize an error message for files that didn’t pass validation.

JS

    function onUploadControlValidationErrorOccured(s, e) {
        e.showAlert = false;
        var errorHtmlContentTemplate = "<div class=\"error-attention\">Attention!</div><br />" +
            "{0} files are invalid and will not be uploaded.<br /><br /> {1}" +
            "All files listed above have been removed from the selection.";

        var preparedErrorHtmlContent = errorHtmlContentTemplate
            .replace("{0}", e.invalidFiles.length)
            .replace("{1}", getDetailsErrorInfoHtml(e));

        popupControl.SetContentHtml(preparedErrorHtmlContent);
        popupControl.Show();
    }
    function getDetailsErrorInfoHtml(e) {
        var html = "";
        html += getDetailsErrorInfoHtmlByErrorType(e, ASPxClientUploadControlValidationErrorTypeConsts.MaxFileCountExceeded,
            "These files exceed the allowed file count (the maximum file count is {0}):<br /><ul>{1}</ul><br />",
            e.validationSettings.maxFileCount);
        html += getDetailsErrorInfoHtmlByErrorType(e, ASPxClientUploadControlValidationErrorTypeConsts.MaxFileSizeExceeded,
            "These files exceed the allowed file size (the maximum file size is {0} bytes):<br /><ul>{1}</ul><br />",
            e.validationSettings.maxFileSize, true);
        html += getDetailsErrorInfoHtmlByErrorType(e, ASPxClientUploadControlValidationErrorTypeConsts.NotAllowedFileExtension,
            "Extensions of these files are not allowed (valid extensions are - {0}):<br /><ul>{1}</ul><br />",
            e.validationSettings.allowedFileExtensions.join(', '));
        html += getDetailsErrorInfoHtmlByErrorType(e, ASPxClientUploadControlValidationErrorTypeConsts.FileNameContainInvalidCharacter,
            "Names of this files contain invalid characters ({0}):<br /><ul>{1}</ul><br />",
            e.validationSettings.invalidFileNameCharacters.join(","));
        return html;
    }
    function getDetailsErrorInfoHtmlByErrorType(e, errorType, message, commonInfo, isFileSize) {
        var filesInfo = getFilesInfoByErrorType(e.invalidFiles, errorType);
        if (filesInfo.length == 0)
            return "";
        var filesHtml = "";
        for (var i = 0, len = filesInfo.length; i < len; i++) {
            var f = filesInfo[i];
            var fileText = isFileSize ? f.fileName + " - " + f.fileSize + " bytes" : f.fileName;
            filesHtml += "<li class=\"error-file\">" + fileText + "</li>";
        }
        return "<div class=\"error-detail\">" + message.replace("{0}", commonInfo).replace("{1}", filesHtml) + "</div>";
    }
    function getFilesInfoByErrorType(invalidFiles, errorType) {
        var filesInfo = [];
        for (var i = 0, len = invalidFiles.length; i < len; i++) {
            var fileInfo = invalidFiles[i];
            if (fileInfo.errorType == errorType)
                filesInfo.push(fileInfo);
        }
        return filesInfo;
    }

ASPX

<head runat="server">
    <style>
        .upload-validationInfo 
        {
            font: 8pt Tahoma, Geneva, sans-serif;
        }
        .popup-okButton
        {
            margin: 6px 6px 6px 210px;
        }
        .error-attention 
        {
            text-decoration: underline;
            font-weight: bold;
        }
        .error-detail 
        {
            color: #FF0000;
        }
        .error-file 
        {
            background: #FFC8C8 none;
            font-style: italic;
        }
    </style>
</head>

<body>
    <form id="form1" runat="server">
    <div>    
        <dx:ASPxFileManager ID="ASPxFileManager1" runat="server">
            <ClientSideEvents FileUploadValidationErrorOccurred="onUploadControlValidationErrorOccured" />
            <Settings RootFolder="~/" ThumbnailFolder="~/Thumb/" AllowedFileExtensions=".jpg" />
            <SettingsUpload NullText="Select multiple files...">
                <ValidationSettings MaxFileCount="3">
                </ValidationSettings>
                <AdvancedModeSettings EnableMultiSelect="True">
                </AdvancedModeSettings>
            </SettingsUpload>
        </dx:ASPxFileManager>
        <br />
        <dx:ASPxPopupControl ID="PopupControl" runat="server" ClientInstanceName="popupControl" Modal="true" HeaderText="Validation error"
            PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter"
            ShowCloseButton="true" CloseAction="CloseButton" ShowFooter="true">
            <FooterTemplate>
                <dx:ASPxButton ID="ASPxButton1" runat="server" Text="OK" AutoPostBack="False"
                    Width="90" CssClass="popup-okButton" ClientSideEvents-Click="function(s, e) { popupControl.Hide(); }">
                </dx:ASPxButton>
            </FooterTemplate>
        </dx:ASPxPopupControl>    
    </div>
    </form>
</body>