Options
| Option | HTML attribute | Type | Description |
|---|---|---|---|
extension | data-fv-file-extension | String | The allowed extensions, separated by a comma |
maxFiles | data-fv-file-maxfiles | Number | The maximum number of files |
maxSize | data-fv-file-maxsize | Number | The maximum file size in bytes |
maxTotalSize | data-fv-file-maxtotalsize | Number | The maximum size in bytes for all files |
minFiles | data-fv-file-minfiles | Number | The minimum number of files |
minSize | data-fv-file-minsize | Number | The minimum file size in bytes |
minTotalSize | data-fv-file-mintotalsize | Number | The minimum size in bytes for all files |
message | data-fv-file-message | String | The error message |
type | data-fv-file-type | String | The allowed MIME type, separated by a comma. For example: Setting See popular MIME types listed below. |
The maxSize and type are only used if the browser supports HTML 5 File API.
When setting options via HTML attributes, remember to enable the validator by setting data-fv-file="true".
The message and other options can be updated on the fly via the updateMessage() and updateOption() methods
Popular MIME types
The following table shows popular MIME types. For other MIME type, you can refer to the complete list.
| MIME type | File extensions |
|---|---|
| application/msword | doc |
| application/pdf | |
| application/rtf | rtf |
| application/vnd.ms-excel | xls |
| application/vnd.ms-powerpoint | ppt |
| application/x-rar-compressed | rar |
| application/x-shockwave-flash | swf |
| application/zip | zip |
| audio/midi | mid midi kar |
| audio/mpeg,audio/mp3 | mp3 |
| audio/ogg | ogg |
| audio/x-m4a | m4a |
| audio/x-realaudio | ra |
| image/gif | gif |
| image/jpeg | jpeg jpg |
| image/png | png |
| image/tiff | tif tiff |
| image/vnd.wap.wbmp | wbmp |
| image/x-icon | ico |
| image/x-jng | jng |
| image/x-ms-bmp | bmp |
| image/svg+xml | svg svgz |
| image/webp | webp |
| text/css | css |
| text/html | html htm shtml |
| text/plain | txt |
| text/xml | xml |
| video/3gpp | 3gpp 3gp |
| video/mp4 | mp4 |
| video/mpeg | mpeg mpg |
| video/quicktime | mov |
| video/webm | webm |
| video/x-flv | flv |
| video/x-m4v | m4v |
| video/x-ms-wmv | wmv |
| video/x-msvideo | avi |
Supporting multiple MIME types
The MIME type of given extension might be different on browsers. For example, MIME type of mp3 file is audio/mpeg on the Firefox, Opera, IE 7+ browsers. Meanwhile, at the time of writing, Google Chrome 42 returns audio/mp3 for mp3 file.
In this case, you should pass all the possible values separated by a comma to the type option as following:
$(form).formValidation({
fields: {
fileInput: {
validators: {
file: {
extension: 'mp3',
type: 'audio/mpeg,audio/mp3',
message: 'Please choose a MP3 file'
}
}
}
}
});Example
The following form allows to upload JPEG, PNG image which is smaller than 2 MB in size.
Use the promise validator if you want to validate the width and height of an image
<form id="fileForm" class="form-horizontal" enctype="multipart/form-data">
<div class="form-group">
<label class="col-xs-3 control-label">Avatar</label>
<div class="col-xs-6">
<input type="file" class="form-control" name="avatar" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#fileForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
avatar: {
validators: {
notEmpty: {
message: 'Please select an image'
},
file: {
extension: 'jpeg,jpg,png',
type: 'image/jpeg,image/png',
maxSize: 2097152, // 2048 * 1024
message: 'The selected file is not valid'
}
}
}
}
});
});
</script><form id="fileForm" class="form-horizontal" enctype="multipart/form-data"
data-fv-framework="bootstrap"
data-fv-icon-valid="glyphicon glyphicon-ok"
data-fv-icon-invalid="glyphicon glyphicon-remove"
data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="form-group">
<label class="col-xs-3 control-label">Avatar</label>
<div class="col-xs-6">
<input type="file" class="form-control" name="avatar"
data-fv-notempty="true"
data-fv-notempty-message="Please select an image"
data-fv-file="true"
data-fv-file-extension="jpeg,jpg,png"
data-fv-file-type="image/jpeg,image/png"
data-fv-file-maxsize="2097152"
data-fv-file-message="The selected file is not valid" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#fileForm').formValidation();
});
</script>