file validator

Validate a file

Options

Using with form field

The HTML attributes are used to set the validator options via the Declarative plugin

Name	HTML attribute	Type	Description
`extension`	`data-fv-file___extension`	`String`	The allowed extensions, separated by a comma
`maxFiles`	`data-fv-file___max-files`	`Number`	The maximum number of files
`maxSize`	`data-fv-file___max-size`	`Number`	The maximum file size in bytes
`maxTotalSize`	`data-fv-file___max-total-size`	`Number`	The maximum size in bytes for all files
`minFiles`	`data-fv-file___min-files`	`Number`	The minimum number of files
`minSize`	`data-fv-file___min-size`	`Number`	The minimum file size in bytes
`minTotalSize`	`data-fv-file___min-total-size`	`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
`validateFileName`	Not available	`Function`	Validate the file name

The maxSize and type options are only used if the browser supports HTML 5 File API.

validateFileName option

It can be used to validate against the file name.

validateFileName: function(fileName) {
    // `fileName` is the file name without the extension
    // returns true or false
},

Popular MIME types

The following table shows popular MIME types. For other MIME types, you can refer to the complete list.

MIME type	File extensions
doc	application/msword
pdf	application/pdf
rtf	application/rtf
xls	application/vnd.ms-excel
ppt	application/vnd.ms-powerpoint
rar	application/x-rar-compressed
swf	application/x-shockwave-flash
zip	application/zip
mid midi kar	audio/midi
mp3	audio/mpeg,audio/mp3
ogg	audio/ogg
m4a	audio/x-m4a
ra	audio/x-realaudio
gif	image/gif
jpeg jpg	image/jpeg
png	image/png
tif tiff	image/tiff
wbmp	image/vnd.wap.wbmp
ico	image/x-icon
jng	image/x-jng
bmp	image/x-ms-bmp
svg svgz	image/svg+xml
webp	image/webp
css	text/css
html htm shtml	text/html
txt	text/plain
xml	text/xml
3gpp 3gp	video/3gpp
mp4	video/mp4
mpeg mpg	video/mpeg
mov	video/quicktime
webm	video/webm
flv	video/x-flv
m4v	video/x-m4v
wmv	video/x-ms-wmv
avi	video/x-msvideo

Supporting multiple MIME types

The MIME type of a given extension might be different on browsers. For example, the MIME type of mp3 file is audio/mpeg on Firefox, Opera, and IE 7+ browsers. Meanwhile, at the time of writing, Google Chrome 42 returns audio/mp3 for the mp3 file.

In this case, you should pass all the possible values separated by a comma to the type option as follows:

FormValidation.formValidation(form, {
    fields: {
        fileInput: {
            validators: {
                file: {
                    extension: 'mp3',
                    type: 'audio/mpeg,audio/mp3',
                    message: 'Please choose a MP3 file',
                },
            },
        },
    },
});

Basic example

The following form allows uploading JPEG, or 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

file validator

Changelog

v2.1.0

type and extension options are required

v2.0.0

Add the npm package
Add new validateFileName option
The extension and file options can contain spaces

emailAddress validator greaterThan validator