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

The "accept" rule-method that's built into jQuery Validation takes values in a format resembling "jpg|png".

The "accept" HTML attribute takes a format resembling "image/jpeg,image/png".

It would appear that jQuery Validation and the HTML standard are incompatible in this regard.

Here, you can read more about jQuery Validation's "accept" rule and the HTML5 "accept" attribute.

Answer 2

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

Answer 3

They changed the behavior of the "accept" method with version 1.10.0. Instead of checking the file extension, it now looks at the mime type. The old behaviour is now available as the "extension" method. So you just have to update your version of jquery validation plugin and you are done. I replaced my current version 1.9.0 with 1.11.0 and set valid mime-types as accept-attribut. It's now working as expected:

accept="image/*, application/pdf"

Answer 4

If you put both formats in as your accept attribute it should work

accept="image/jpeg,image/png,jpg|png"