File type validation on file upload

Question

I have written below lines of code

<section class="col col-md-6">
  <label for="file" class="input input-file">
    Upload Image/Video
    <label for="file" class="input input-file">
      <div class="button">
        <asp:FileUpload ID="UploadSlider1" runat="server" onchange="this.parentNode.nextSibling.value = this.value" />Browse</div>
      <input type="text" readonly />
    </label>
    <asp:HiddenField ID="hdnUploadSlider1" runat="server" />
    <asp:CustomValidator ID="CustomValidator1" ControlToValidate="UploadSlider1" OnServerValidate="ValidateFileSize1" runat="server" />
    <asp:RegularExpressionValidator ID="UploadSlider1regularexpression" runat="server" ControlToValidate="UploadSlider1" Display="Dynamic" ErrorMessage="Only Images are allowed" SetFocusOnError="true" CssClass="state-error" ValidationExpression="^.*\.((j|J)(p|P)(e|E)?(g|G)|(g|G)(i|I)(f|F)|(p|P)(n|N)(g|G))$"></asp:RegularExpressionValidator>
</section>
<section class="col col-md-6">
  <label for="file" class="input input-file">
    Upload Image/Video
    <label for="file" class="input input-file">
      <div class="button">
        <asp:FileUpload ID="UploadSlider1" runat="server" onchange="this.parentNode.nextSibling.value = this.value" />Browse</div>
      <input type="text" readonly />
    </label>
    <asp:HiddenField ID="hdnUploadSlider1" runat="server" />
    <asp:CustomValidator ID="CustomValidator1" ControlToValidate="UploadSlider1" OnServerValidate="ValidateFileSize1" runat="server" />
    <asp:RegularExpressionValidator ID="UploadSlider1regularexpression" runat="server" ControlToValidate="UploadSlider1" Display="Dynamic" ErrorMessage="Only Images are allowed" SetFocusOnError="true" CssClass="state-error" ValidationExpression="^.*\.((j|J)(p|P)(e|E)?(g|G)|(g|G)(i|I)(f|F)|(p|P)(n|N)(g|G))$"></asp:RegularExpressionValidator>
</section>

Now I want that user should be allowed to upload image and video files only. Please help me how to do validation for both types in one regular expression.

score 0 · Accepted Answer · edited May 23 '17 at 11:44

Your validation expression should be like this

([a-zA-Z0-9\s_\\.\-:])+(.png|.PNG|.jpg|.JPG|.gif|.mp4|.mpg|.3gp)$

Add as many variation as you need with | as separator

<asp:RegularExpressionValidator Display="Dynamic" ValidationExpression="([a-zA-Z0-9\s_\\.\-:])+(.png|.PNG|.jpg|.gif|.mp4|.mpg|.3gp)$" ControlToValidate="UploadSlider1" runat="server" ForeColor="Red" ErrorMessage="Please select a valid Image or Video File file." ID="RegularExpressionValidator1" />

JavaScript version:
If you feel easy with JavaScript you can follow this SO post validation-of-file-extension-before-uploading-file

File type validation on file upload

1 Answers1