file validator

Validate a file

Options

Use 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.

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

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
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 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:


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 to upload JPEG, PNG image which is smaller than 2 MB in size.

Tip

Use the promise validator if you want to validate the width and height of an image