Bootstrap File Field Plugin Examples


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