Bootstrap File Input Demo

Thankful to Krajee!
to get more out of us.

Advanced usage examples of the bootstrap-fileinput plugin.

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

Set maximum file upload size to 100 KB. Display preview on load with preset files/images and captions with overwriteInitial set to false. So the initial preview is always displayed when additional files are overwritten (useful for multiple upload) scenario. Check how the initial preview config can allow file thumbnails to include actions for delete and download (via the delete url (url) and the download url (downloadUrl). The file name for download is automatically displayed as the caption setting.
<label for="input-24">Planets and Satellites</label>
<div class="file-loading">
    <input id="input-24" name="input24[]" type="file" multiple>
</div>
<script>
$(document).on('ready', function() {
    var url1 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg',
        url2 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg';
    $("#input-24").fileinput({
        initialPreview: [url1, url2],
        initialPreviewAsData: true,
        initialPreviewConfig: [
            {caption: "Moon.jpg", downloadUrl: url1, size: 930321, width: "120px", key: 1},
            {caption: "Earth.jpg", downloadUrl: url2, size: 1218822, width: "120px", key: 2}
        ],
        deleteUrl: "/site/file-delete",
        overwriteInitial: false,
        maxFileSize: 100,
        initialCaption: "The Moon and the Earth"
    });
});
</script>
Similar configuration to scenario 1, but with overwriteInitial set to true that will overwrite files in the initial preview on selection. This scenario shows how you can set a different file name than the caption for your file actions.
<label for="input-25">Planets and Satellites</label>
<div class="file-loading">
    <input id="input-25" name="input25[]" type="file" multiple>
</div>
<script>
$(document).on('ready', function() {
    var url1 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg',
        url2 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg';
    $("#input-25").fileinput({
        initialPreview: [url1, url2],
        initialPreviewAsData: true,
        initialPreviewConfig: [
            {caption: "Moon.jpg", filename: "MoonFull.jpg", downloadUrl: url1, size: 930321, width: "120px", key: 1},
            {caption: "Earth.jpg", filename: "EarthFull.jpg", downloadUrl: url2, size: 1218822, width: "120px", key: 2}
        ],
        deleteUrl: "/site/file-delete",
        overwriteInitial: true,
        maxFileSize: 100,
        initialCaption: "The Moon and the Earth"
    });
});
</script>
Display the widget as a single block button.
<div class="file-loading">
    <input id="input-20" type="file">
</div>
<script>
$(document).on('ready', function() {
    $("#input-20").fileinput({
        browseClass: "btn btn-primary btn-block",
        showCaption: false,
        showRemove: false,
        showUpload: false
    });
});
</script>
Show only image files for selection & preview. Control button labels, styles, and icons for the browse, upload, and remove buttons.
<div class="file-loading">
    <input id="input-21" type="file" accept="image/*">
</div>
<script>
$(document).on('ready', function() {
    $("#input-21").fileinput({
        previewFileType: "image",
        browseClass: "btn btn-success",
        browseLabel: "Pick Image",
        browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
        removeClass: "btn btn-danger",
        removeLabel: "Delete",
        removeIcon: "<i class=\"glyphicon glyphicon-trash\"></i> ",
        uploadClass: "btn btn-info",
        uploadLabel: "Upload",
        uploadIcon: "<i class=\"glyphicon glyphicon-upload\"></i> "
    });
});
</script>
Preview section control. Change preview background and allow text files ONLY for selection as well as preview.
<div class="file-loading">
    <input id="input-22" name="input22[]" type="file" accept="text/plain" multiple>
</div>
<script>
$(document).on('ready', function() {
    $("#input-22").fileinput({
        previewFileType: "text",
        allowedFileExtensions: ["txt", "md", "ini", "text"],
        previewClass: "bg-warning"
    });
});
</script>
Advanced customization using templates. For example, change position of buttons from right to left.
<div class="file-loading">
    <input id="input-23" name="input23[]" type="file" multiple>
</div>
<script>
$(document).on('ready', function() {
    $("#input-23").fileinput({
        showUpload: false,
        layoutTemplates: {
            main1: "{preview}\n" +
            "<div class=\'input-group {class}\'>\n" +
            "   <div class=\'input-group-btn\'>\n" +
            "       {browse}\n" +
            "       {upload}\n" +
            "       {remove}\n" +
            "   </div>\n" +
            "   {caption}\n" +
            "</div>"
        }
    });
});
</script>
Using plugin methods to alter input at runtime. For example, click the Modify button to disable the plugin and change plugin options.

<div class="file-loading">
    <input id="input-40" name="input40[]" type="file" class="file" multiple>
</div>
<br>
<button type="button" class="btn btn-warning btn-modify">Modify</button>
<script>
$(document).on('ready', function() {
    $(".btn-modify").on("click", function() {
        var $btn = $(this), $input = $("#input-40");
        if ($btn.text() == "Modify") {
            $("#input-40").fileinput("disable").fileinput("refresh", {showUpload: false});
            $btn.html("Revert");
            alert("Hurray! I have disabled the input and hidden the upload button.");
        }
        else {
            $("#input-40").fileinput("enable").fileinput("refresh", {showUpload: true});
            $btn.html("Modify");
            alert("Hurray! I have reverted back the input to enabled with the upload button.");
        }
    });
});
</script>
Allow only image and video file types to be uploaded. You can configure the condition for validating the file types using fileTypeSettings.
<div class="file-loading">
    <input id="input-41" name="input41[]" type="file" multiple>
</div>
<script>
$(document).on('ready', function() {
    $("#input-41").fileinput({
        maxFileCount: 10,
        allowedFileTypes: ["image", "video"]
    });
});
</script>
Allow only specific file extensions.
<div class="file-loading">
    <input id="input-42" name="input42[]" type="file" multiple>
</div>
<script>
$(document).on('ready', function() {
    $("#input-42").fileinput({
        maxFileCount: 10,
        allowedFileExtensions: ["jpg", "gif", "png", "txt"]
    });
});
</script>
Disable preview and customize your own error container and messages.
<div class="file-loading">
    <input id="input-43" name="input43[]" type="file" multiple>
</div>
<div id="errorBlock" class="help-block"></div>
<script>
$(document).on('ready', function() {
    $("#input-43").fileinput({
        showPreview: false,
        allowedFileExtensions: ["jpg", "jpeg", "gif", "png"],
        elErrorContainer: "#errorBlock"
    });
});
</script>
Control maximum size of file that can be previewed by setting maxFilePreviewSize in KB (kilo bytes). This example sets the maximum preview file size to 10240 KB (10 MB). The default value for maxFilePreviewSize if not set is 25600 KB (25 MB).
<div class="file-loading">
    <input id="input-44" name="input44[]" type="file" multiple>
</div>
<script>
$(document).on('ready', function() {
    $("#input-44").fileinput({
        uploadUrl: '/file-upload-batch/2',
        maxFilePreviewSize: 10240
    });
});
</script>

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.