9

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.

4
  • have you figured this one out? I have the same problem. I need to accept multiple types ("image/gif,image/png,image/jpeg"), in my case. Commented May 22, 2012 at 20:44
  • No I haven't. I had to remove the "accept" attribute. May be Jquery Validation does not support validating MIME type for "accept".
    – escist
    Commented May 23, 2012 at 8:35
  • @ThiagoSilva For image types it shouldn't be an issue. Have you tried something like accept="image/gif,image/jpeg"?
    – escist
    Commented May 29, 2012 at 10:50
  • yes. I had "image/gif,image/jpeg,image/png". I even took out all but one mime type, and the validation would prevent me from uploading anything. When I remove the "accept" attribute, it works fine. I guess I'll just resort to validating only at server side. Commented May 30, 2012 at 20:35

4 Answers 4

14

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

3
  • Thanks! That's all I needed. I was only interested in filtering the file=open dialog for pdf files. I intend to validate the file on the server side.
    – jkokorian
    Commented Aug 17, 2012 at 22:36
  • 1
    That worked! Thanks! -Edit- FYI, use the anonymous function that was provided to validate the item if you need to. Commented Aug 22, 2012 at 21:15
  • The behaviour of the "accept" method changed with version 1.10.0, so it's not necessary anymore to disable it. For details check my answer. Commented Feb 25, 2013 at 17:29
10

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"
9

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.

1
  • 2
    The behaviour of the "accept" method changed with version 1.10.0. For details check my answer. Commented Feb 25, 2013 at 17:27
6

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.