Validating File Upload - Jquery and "Accept" attribute

Question

I am using a form to upload a file. I want only PDF files to be uploaded. This is my code:

A input box to allow the user to choose a file:

@Html.FileBox(m => m.FileName, new { id = "FileName", accept = "application/pdf" })

and a place to display error message(s):

@Html.ValidationMessageFor(m=>m.FileName)

The code generated for the input field is:

    <input id="FileName" type="file" name="FileName" data-val-required="The File Name field is required." data-val-length-max="512" data-val-length="The field File Name must be a string with a maximum length of 512." data-val="true" accept="application/pdf">

Now even if I choose a PDF file, I get an error Please enter a value with a valid extension.

I am using MVC 3, and unobstrusive jquery to validate the form.

Answer 1

I had the same problem and had to resort to disable the validation for the accept attribute entirely. I added the following line to my page and it worked:

$.validator.addMethod('accept', function () { return true; });