file validator

Validate a file

Options

Using with form field
The HTML attributes are used to set the validator options via the Declarative plugin
NameHTML attributeTypeDescription
extensiondata-fv-file___extensionStringThe allowed extensions, separated by a comma
maxFilesdata-fv-file___max-filesNumberThe maximum number of files
maxSizedata-fv-file___max-sizeNumberThe maximum file size in bytes
maxTotalSizedata-fv-file___max-total-sizeNumberThe maximum size in bytes for all files
minFilesdata-fv-file___min-filesNumberThe minimum number of files
minSizedata-fv-file___min-sizeNumberThe minimum file size in bytes
minTotalSizedata-fv-file___min-total-sizeNumberThe minimum size in bytes for all files
messagedata-fv-file___messageStringThe error message
typedata-fv-file___typeStringThe 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
validateFileNameNot availableFunctionValidate 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 typeFile extensions
docapplication/msword
pdfapplication/pdf
rtfapplication/rtf
xlsapplication/vnd.ms-excel
pptapplication/vnd.ms-powerpoint
rarapplication/x-rar-compressed
swfapplication/x-shockwave-flash
zipapplication/zip
mid midi karaudio/midi
mp3audio/mpeg,audio/mp3
oggaudio/ogg
m4aaudio/x-m4a
raaudio/x-realaudio
gifimage/gif
jpeg jpgimage/jpeg
pngimage/png
tif tiffimage/tiff
wbmpimage/vnd.wap.wbmp
icoimage/x-icon
jngimage/x-jng
bmpimage/x-ms-bmp
svg svgzimage/svg+xml
webpimage/webp
csstext/css
html htm shtmltext/html
txttext/plain
xmltext/xml
3gpp 3gpvideo/3gpp
mp4video/mp4
mpeg mpgvideo/mpeg
movvideo/quicktime
webmvideo/webm
flvvideo/x-flv
m4vvideo/x-m4v
wmvvideo/x-ms-wmv
avivideo/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