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

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:

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.

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>

<label class="control-label">Select File</label>
<input id="input-fa" name="inputfa[]" type="file" multiple class="file-loading">
<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>

<label class="control-label">Select File</label>
<input id="input-fa-1" name="inputfa1[]" type="file" multiple class="file-loading">
<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>

<label class="control-label">Select File</label>
<input id="input-gly" name="inputgly[]" type="file" multiple class="file-loading">
<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>

<label class="control-label">Select File</label>
<input id="input-gly-1" name="inputgly1[]" type="file" multiple class="file-loading">
<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>