FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

file validator

Validate file

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 `image/jpeg,image/png,application/pdf` only allows to upload JPEG, PNG image and PDF document. 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	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>

← emailAddress validator greaterThan validator →