Bootstrap File Input Demo

Thankful to Krajee!
to get more out of us.

With release v4.3.2, the fileinput plugin supports advanced theming and ability to have separate themes for multiple widgets on the same page. To do this, follow these simple steps:

  • Load respective theme JS file(s) that you need (e.g. themes/fa/fa.js for Font Awesome theme). The theme file(s) must be loaded after the fileinput.js.

  • Set the theme property in the plugin to the theme you need and which you have setup in your theme configuration JS file above (e.g. 'fa').

  • The plugin will automatically read the theme configuration for the theme name from $fileinputThemes[''] from the JS file (e.g. via $fileinputThemes['']).

  • The plugin will automatically also prepend the CSS selector theme-<theme-name> to the file input container, so that you can override your styles. The CSS for such themes can be submitted by community in themes/THEME_NAME folder of the repo.

  • You can additionally load any theme specific CSS files if needed.

Note

Currently the plugin includes the Font Awesome and Glyphicons themes. More advanced themes may be added in future or can be contributed here by the community.

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)

You can configure and build your own themes and layouts by loading your theme JS file and setting the theme property. This example shows how you can use the built in alternative Font Awesome Theme. You need to load the themes/fa/theme.js file. Then set the theme property to the theme name that you use in the theme configuration file. To set your own custom theme, you must configure the $.fn.fileInputThemes["<theme-name>"] within the theme JS file.
<!-- FONT AWESOME THEME -->
<!-- load the JS files in the right order -->
<script src="/path/to/js/fileinput.js"></script>
<script src="/path/to/themes/fa/theme.js"></script>

<div class="file-loading">
    <input id="input-fa" name="input-fa[]" type="file" multiple>
</div>
<script>
$("#input-fa").fileinput({
    theme: "fa",
    uploadUrl: "/file-upload-batch/2"
});
</script>
Variation of the Font Awesome theme with hidden thumbnail content. For each of the preview thumbnails, this setting will only display the file name and file size as defined in the layout templates.
<!-- FONT AWESOME HIDDEN THUMBNAIL CONTENT THEME -->
<!-- load the JS files in the right order -->
<script src="/path/to/js/fileinput.js"></script>
<script src="/path/to/themes/fa/theme.js"></script>

<div class="file-loading">
    <input id="input-fa-1" name="input-fa-1[]" type="file" multiple>
</div>
<script>
$("#input-fa-1").fileinput({
    theme: "fa",
    uploadUrl: "/file-upload-batch/2",
    hideThumbnailContent: true // hide image, pdf, text or other content in the thumbnail preview
});
</script>
This is the default Glyphicons theme.
<!-- GLYPHICONS THEME -->
<!-- load the JS files in the right order -->
<script src="/path/to/js/fileinput.js"></script>
<script src="/path/to/themes/gly/theme.js"></script>

<div class="file-loading">
    <input id="input-gly" name="input-gly[]" type="file" multiple>
</div>
<script>
$("#input-gly").fileinput({
    theme: "gly",
    uploadUrl: "/file-upload-batch/2"
});
</script>
Variation of the Glyphicons theme with hidden thumbnail content. This will only display the file name and file size as defined in the layout templates.
<!-- GLYPHICONS THEME WITH HIDDEN THUMBNAIL -->
<!-- load the JS files in the right order -->
<script src="/path/to/js/fileinput.js"></script>
<script src="/path/to/themes/gly/theme.js"></script>

<div class="file-loading">
    <input id="input-gly-1" name="input-gly-1[]" type="file" multiple>
</div>
<script>
$("#input-gly-1").fileinput({
    theme: "gly",
    uploadUrl: "/file-upload-batch/2",
    hideThumbnailContent: true // hide image, pdf, text or other content in the thumbnail preview
});
</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.