Example 1: Initiating with data attribute, no customization

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

Example 2: Single Image file with preview.

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

Example 3: Showing image preview, setting custom label, class and file types. Allows multiple.

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

Example 4: Allow PDF files only. Preview off.

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

Example 5: Initiating with javascript by class/selector. Select at most 2 images below 80kb each.

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
});

Example 6: Overwriting initial (by javascript) configuration using data attribute

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.

Submit