How to use Bootstrap validator to validate file size and file type

3
votes

I`m using Bootstrap validator (Validator plugin) to validate my form but I have an input for files which I would like to have a custom validation for filetype and filesize (pdf,docx,doc..). 

<div class="form-group">
     <div class="input-group">
      <label class="input-group-btn">
       <span class="btn btn-primary">
Browse&hellip; <input type="file" style="display: none;" name="cv" required data-filesize="5242880" data-filesize-error="Max 5MB">
       </span>
     </label>
     <div class="help-block with-errors"></div>
      <input type="text" class="form-control" readonly>
     </div>
</div>

I need some directions on how I should use this plugin in order to validate the input on my frontend before the backend runs its own validation.

2
jquerytwitter-bootstrapvalidation
The link you gave is broken - Ish
@Ish Fixed it. Thank You! - Daniel
@Daniel I switch to this plugin, for me it fit better. If you like, here is an example of custom validations: parsleyjs.org/doc/examples/customvalidator.html - Victor

2 Answers

2
votes

Code from here worked for me: 

<form id="fileForm" class="form-horizontal" enctype="multipart/form-data">
    <div class="form-group">
        <label class="col-sm-3 control-label">Avatar</label>
        <div class="col-sm-4">
            <input type="file" class="form-control" name="avatar" />
        </div>
    </div>
</form>

<script type="text/javascript">
$(document).ready(function() {
    $('#fileForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            avatar: {
                validators: {
                    file: {
                        extension: 'jpeg,png',
                        type: 'image/jpeg,image/png',
                        maxSize: 2048 * 1024,
                        message: 'The selected file is not valid'
                    }
                }
            }
        }
    });
});
</script>
0
votes

Example extracted from: https://github.com/1000hz/bootstrap-validator/issues/73

$('form[data-toggle="validator"]').validator({
  custom: {
    filesize: function ($el) {
      var maxKilobytes = $el.data('filesize') * 1024
      if ($el[0].files[0].size > maxKilobytes) {
        return "File must be smaller than " + $el.data('filesize') + " kB."
      }
    },
    
    //custom file type validation
    filetype: function ($el) {
      var acceptableTypes = $el.prop('accept').split(',');
      var fileType = $el[0].files[0].type;
     
      if (!$.inArray(fileType, acceptableTypes)) {
        return "Invalid file type"
      }
    
    
    }
  }
})
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="well">
  <form data-toggle="validator">

    <div class="form-group form-group-file">
      <input type="file" id="file1" name="file" class="form-control" data-filesize="5000"
             data-filetype="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/rtf"/>
      <div class="help-block with-errors"></div>
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </form>
</div>
</body>
</html>