Bootstrap File Filed

Bootstrap File Field demo

Examples of using and configuring Bootstrap File Field in various ways.

Note: On server end, you'll receive the files with submitted form (with enctype="multipart/form-data"). No ajax upload is being used.


<input type="file" data-field-type="bootstrap-file-filed" name="sample1">

<input type="file" name="sample2" data-field-type="bootstrap-file-filed"
    data-preview="on"
    data-file-types="image/jpeg,image/png,image/gif">

<input type="file" name="sample3[]" data-field-type="bootstrap-file-filed"
    data-label="Select Image Files"
    data-btn-class="btn-primary"
    data-file-types="image/jpeg,image/png,image/gif"
    data-preview="on"
    multiple >

<input type="file" name="sample4[]" data-field-type="bootstrap-file-filed"
    data-label="Select PDF Files"
    data-file-types="application/pdf"
    multiple >

HTML :
<input type="file" class="smart-file" name="sample3[]" multiple>
JavaScript
$('.smart-file').bootstrapFileField({
    maxNumFiles: 2,
    fileTypes: 'image/jpeg,image/png',
    maxFileSize: 80000 // 80kb in bytes
});

This field has already been initiated with previous example (as it has class smart-file). Now we'll add and modify some of customization options using data attributes.

<input type="file" name="sample6[]" class="smart-file" multiple
    data-label="Select PDF Documents"
    data-btn-class="btn-primary"
    data-file-types="application/pdf">

Help message: You can select multiple files. Only PDF files under 80kb are acceptable.


Configuration Options

You can activate plugin on a file field by adding attribute data-field-type="bootstrap-file-field" or using javascript (see examples above). Then you can use the following settings keys (as parameter to javascript activation function) or data attributes to configure your file field.

What to configure JS Settings key Data attribute Default
Button label label data-label Select File
Select Files M
Button class btnClass data-btn-class btn-default
Allowed file types by mime type
(comma separated values)
fileTypes data-file-types Ignored
Preview thumb preview data-preview off
Maximum file size (in byte) maxFileSize data-max-file-size Ignored
Minimum file size (in byte) minFileSize data-min-file-size Ignored
Maximum total file size M maxTotalSize data-max-total-size Ignored
Maximum number of files M maxNumFiles data-max-num-files Ignored
Minimum number of files M minNumFiles data-min-num-files Ignored

M = For multiple file