Restrict upload to file extensions in jQuery Validation

Question

I want to perform validation with the jQuery Validation plugin for input type="file". I want to restrict file formats to doc,pdf,rtf, and docx.

Here is my code:

  $("#contact-form").validate({ 
          onfocusout: function(e) {
              this.element(e);
            },
        rules:{

            resume:{
                required:true,
                extension: "docx|rtf|doc|pdf"
            }

        },
    resume:{
                required:"input type is required",                  
                extension:"select valied input file format"
            }


    });

Your code is working, so what exactly is the problem? Did you remember to include the additional-methods.js file? — Sparky
– Sparky, Commented Dec 14, 2013 at 16:47

Sparky · Accepted Answer · 2013-12-14 17:12:46Z

15

You never explained the problem you're having with your code:

$("#contact-form").validate({ 
    onfocusout: function(e) {
        this.element(e);
    },
    rules:{
        resume:{
            required:true,
            extension: "docx|rtf|doc|pdf"
        }
    },
    resume:{
        required:"input type is required",                  
        extension:"select valied input file format"
    }
});

However, you're declaring messages without using the messages option. This is an error that would likely break the plugin, or at the least, your custom error messages would be ignored.

Your code should look like this...

$("#contact-form").validate({ 
    onfocusout: function(e) {  // this option is not needed
        this.element(e);       // this is the default behavior
    },
    rules:{
        resume:{
            required:true,
            extension: "docx|rtf|doc|pdf"
        }
    },
    messages: {  // <-- you must declare messages inside of "messages" option
        resume:{
            required:"input type is required",                  
            extension:"select valid input file format"
        }
    }
});

Working DEMO: http://jsfiddle.net/ZqxR2/

edited Dec 14, 2013 at 17:12

answered Dec 14, 2013 at 17:04

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sarath Babu Nuthimadugu Over a year ago

thanks sparkly same code i am wriiten in my application it is only accepting pdf file if we include doc file it is showing error

Sparky Over a year ago

@sarath, My demo is working perfectly so the problem has nothing to do with any code you've shown us.

user2089987 Over a year ago

I have tried to implement this demo but its not working.As like here i have implemented jquery.min,jquery.validate and additional-extension.js but still its not working.whether i have to add any thing elser?

Sparky Over a year ago

@user2089987, What exactly does "not working" mean? Have you looked at your error console?

Hemant Jadhav · Accepted Answer · 2015-06-27 10:51:35Z

4

If you don't want to create rule

just use accept attribute in input like below

<input type="file" accept="doc,pdf,rtf,docx"/>

answered Jun 27, 2015 at 10:51

Hemant Jadhav

1051 silver badge4 bronze badges

1 Comment

Christopher Grigg Over a year ago

The user could just change the filetype in the dialog so better to have additional validation.

marc_s · Accepted Answer · 2019-12-11 21:02:03Z

Today I needed that script and I could not find.. I made own script (works almost for all browser, even IE). I would like notice I am beginner with jQuery, but I am trying to do something new:

Open JSfiddle

Here example:

$('#file').on('change', function() {
 var numb = $(this)[0].files[0].size/1024/1024; //count file size
var resultid = $(this).val().split(".");
var gettypeup  = resultid [resultid.length-1]; // take file type uploaded file
var filetype = $(this).attr('data-file_types'); // take allowed files from input
var allowedfiles = filetype.replace(/\|/g,', '); // string allowed file
var tolovercase = gettypeup.toLowerCase();
var filesize = 2; //2MB
var onlist = $(this).attr('data-file_types').indexOf(tolovercase) > -1;
var checkinputfile = $(this).attr('type');
numb = numb.toFixed(2);

if (onlist && numb <= filesize) {
			$('#alert').html('The file is ready to upload').removeAttr('class').addClass('xd2'); //file OK
   } else {
   if(numb >= filesize && onlist){
  $(this).val(''); //remove uploaded file
      $('#alert').html('Added file is too big \(' + numb + ' MB\) - max file size '+ filesize +' MB').removeAttr('class').addClass('xd'); //alert that file is too big, but type file is ok
      } else if(numb < filesize && !onlist) {
     $(this).val(''); //remove uploaded file
      $('#alert').html('An not allowed file format has been added \('+ gettypeup +') - allowed formats: ' + allowedfiles).removeAttr('class').addClass('xd'); //wrong type file
      } else if(!onlist) {
    $(this).val(''); //remove uploaded file
      $('#alert').html('An not allowed file format has been added \('+ gettypeup +') - allowed formats: ' + allowedfiles).removeAttr('class').addClass('xd'); //wrong type file
      }
   }
})

body{background:#fff}

#alert.xd{background:#ff9e9e; border:1px solid #ff0000;
color: #000;
padding:5px;
border-radius:10px}

#alert.xd2{background:#9effb3; border:1px solid #00de26;
color: #000;
padding:5px;
border-radius:10px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<br>
<input type="file" id="file" data-file_types="pdf|doc|docx|rtf|odt|jpg|jpeg">
<br><br>
Allowed files:<br><br>
<div id="allowed-files"></div>
<br><br>
<div id="allowed-size"></div>

<div id="alert"></div>
<script>
var title = $( "#file" ).attr( "data-file_types" ).replace(/\|/g,', ');
$( "#allowed-files" ).text( title );
</script>

If there is some faults in my code, please let me know :) Thank you.

Also I can answer for questions in the comments.

Collectives™ on Stack Overflow

Restrict upload to file extensions in jQuery Validation

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related