Validating File Upload - Jquery and "Accept" attribute
Asked Answered
A

4

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.

Autoplasty answered 8/5, 2012 at 10:36 Comment(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.Rap
No I haven't. I had to remove the "accept" attribute. May be Jquery Validation does not support validating MIME type for "accept".Autoplasty
@ThiagoSilva For image types it shouldn't be an issue. Have you tried something like accept="image/gif,image/jpeg"?Autoplasty
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.Rap
U
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.

Unreasoning answered 23/10, 2012 at 21:38 Comment(1)
The behaviour of the "accept" method changed with version 1.10.0. For details check my answer.Fiftieth
G
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; });

Groundless answered 27/6, 2012 at 17:35 Comment(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.Shel
That worked! Thanks! -Edit- FYI, use the anonymous function that was provided to validate the item if you need to.Hamate
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.Fiftieth
F
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"
Fiftieth answered 25/2, 2013 at 17:21 Comment(0)
U
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.

Unreasoning answered 23/10, 2012 at 21:38 Comment(1)
The behaviour of the "accept" method changed with version 1.10.0. For details check my answer.Fiftieth
L
6

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

accept="image/jpeg,image/png,jpg|png"
Lanta answered 5/2, 2013 at 16:57 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.