Allowed File Extensions

• May 05, 2021
• 4 minutes to read

ASPxUploadControl allows you to specify the extensions of files that users can upload to the server.

Related API

Member	Description
UploadControlValidationSettings.AllowedFileExtensions	Specifies the allowed file extensions (server side).
ASPxClientUploadControlValidationSettings.allowedFileExtensions	Returns the allowed file extensions (client side).
UploadControlValidationSettings.NotAllowedFileExtensionErrorText	Specifies the error text indicating that the specified file’s extension is not allowed.
UploadedFile.IsValid	Specifies whether the uploaded file passes validation.
ASPxClientUploadControl.ValidationErrorOccurred	Enables you to specify whether the selected file or files are valid and display error text.
ASPxUploadControl.FileUploadComplete	Occurs when the file has been uploaded.
ASPxClientUploadControl.FileUploadComplete	Occurs on the client after the file has been uploaded.
ASPxUploadControl.FilesUploadComplete	Occurs after all selected files have been uploaded to the server.
ASPxClientUploadControl.FilesUploadComplete	Occurs on the client after all selected files have been uploaded.

The following code snippets illustrate how to define the UploadControlValidationSettings.AllowedFileExtensions property declaratively or programmatically:

• Declarative technique:

  ASPX

  <dxuc:ASPxUploadControl 
      ...
      <ValidationSettings 
          AllowedFileExtensions=".jpg, .jpeg, .tif, .bmp, .txt, .doc, .docx, .xls, .xlsx, .pdf, .rtf, .xlsx" 
      ...
      </ValidationSettings>
  </dxuc:ASPxUploadControl>
  

• Programmatic technique:

  C#

  ASPxUploadControl1.ValidationSettings.AllowedFileExtensions=".jpg, .jpeg, .tif, .bmp, .txt, .doc, .docx, .xls, .xlsx, .pdf, .rtf, .xlsx";
  

  VB.NET

  ASPxUploadControl1.ValidationSettings.AllowedFileExtensions=".jpg, .jpeg, .tif, .bmp, .txt, .doc, .docx, .xls, .xlsx, .pdf, .rtf, .xlsx"
  

Note

Users can upload any files if the UploadControlValidationSettings.AllowedFileExtensions property is not specified (or not set to an empty string).

If the uploaded file’s extension is not allowed (not listed in the UploadControlValidationSettings.AllowedFileExtensions property), the ASPxUploadControl‘s validation fails and the control displays the UploadControlValidationSettings.NotAllowedFileExtensionErrorText property’s value within an error frame or alert box when the upload control operates in Standard or Advanced upload modes, respectively.

Note

In Standard mode, the upload control validation is performed only on the server side. In Advanced mode, the upload control validates the uploaded file(s) on the client side before the file is uploaded.

The FileUploadCompleteEventArgs.IsValid, ASPxUploadControl.IsValid and ASPxClientUploadControlFileUploadCompleteEventArgs.isValid properties are set to false if the ASPxUploadControl‘s validation fails.

You can use the following events to implement custom validation logic:

• ASPxUploadControl.FileUploadComplete
• ASPxClientUploadControl.FileUploadComplete
• ASPxUploadControl.FilesUploadComplete
• ASPxClientUploadControl.FilesUploadComplete

The FileUploadCompleteEventArgs.IsValid and ASPxClientUploadControlFileUploadCompleteEventArgs.isValid properties specify whether the uploaded file passes the validation criteria. The FileUploadCompleteEventArgs.ErrorText and ASPxClientUploadControlFileUploadCompleteEventArgs.errorText properties allow you to set the custom error text displayed if the upload control’s validation fails.

Note that the UploadControlValidationSettings.AllowedFileExtensions property is used only for validating the uploaded file’s extension. The UploadControlValidationSettings.AllowedFileExtensions property does not allow you to customize the appearance of the File Extension filter in the Open File dialog window. The browser determines and controls the list of file extensions in the File Extension filter.

Examples

1. The following example uses the ASPxClientUploadControl.ValidationErrorOccurred event to show how to customize an error message for files that failed validation.

   ASPX

   <dx:ASPxUploadControl ID="ASPxUploadControl2" runat="server" Width="320"
       NullText="Select multiple files..." UploadMode="Advanced" ShowUploadButton="True">
       <AdvancedModeSettings EnableMultiSelect="True" EnableFileList="True" />
       <ValidationSettings MaxFileSize="4194304" AllowedFileExtensions=".jpg,.jpeg" MaxFileCount="2" />
       <ClientSideEvents ValidationErrorOccurred="onUploadControlValidationErrorOccured" />
   </dx:ASPxUploadControl>
   <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>    
   

   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 these 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;
   }
   

2. The following example shows how to restrict the upload of a file without an extension on the client side.

   JS

   function OnTextChanged() {
       var filesForUploading = uploadControl.GetSelectedFiles();
       if (filesForUploading) {
           var allFilesContainExtension = true;
           for (var i = 0; i < filesForUploading.length; i++) {
               var currentFileName = filesForUploading[i].name;
               if (currentFileName == currentFileName.split('.').pop()) {
                   allFilesContainExtension = false;
                   break;
               }
           }
           if (!allFilesContainExtension) {
               alert("Only files with extensions can be uploaded");
               uploadControl.ClearText();
           }
       }
   }