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/theme.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 $.fn.fileinputThemes['<theme-name>'] from the JS file (e.g. via $.fn.fileinputThemes['<theme-name>']).
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.
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)
bs5. This theme uses the icons from Bootstrap 5 Icons library. To ensure this theme works, you must pre-load the Bootstrap 5 Icons library assets/CSS. gly. This theme uses the icons from Glyphicons library. To ensure this theme works, you must pre-load the Glyphicons library assets/CSS. fa4. This theme uses the icons from Font Awesome 4.x library. To ensure this theme works, you must pre-load the Font Awesome 4.x library assets/CSS. fa5. This theme uses the icons from Font Awesome 5.x library. To ensure this theme works, you must pre-load the Font Awesome 5.x library assets/CSS. fa6. This theme uses the icons from Font Awesome 6.x library. To ensure this theme works, you must pre-load the Font Awesome 6.x library assets/CSS. explorer. This theme uses the icons from Bootstrap 5 Icons library. To ensure this theme works, you must pre-load the Bootstrap 5 Icons library assets/CSS. explorer-fa4. This theme uses the icons from Font Awesome 4.x library. To ensure this theme works, you must pre-load the Font Awesome 4.x library assets/CSS. explorer-fa5. This theme uses the icons from Font Awesome 5.x library. To ensure this theme works, you must pre-load the Font Awesome 5.x library assets/CSS. explorer-fa6. This theme uses the icons from Font Awesome 6.x library. To ensure this theme works, you must pre-load the Font Awesome 6.x library assets/CSS.
Comments & Discussion
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.