file validator
Validate a file
Options
Using with form field
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) {
},
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.
Changelog
type
and extension
options are required
- Add the npm package
- Add new
validateFileName
option - The
extension
and file
options can contain spaces