Advanced usage examples of the bootstrap-fileinput plugin.
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)
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).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, description: "<h5>The Moon</h5>The Moon is Earth's only natural satellite and the fifth largest moon in the solar system. The Moon's distance from Earth is about 240,000 miles (385,000 km).", size: 930321, width: "120px", key: 1},
{caption: "Earth.jpg", downloadUrl: url2, description: "<h5>The Earth</h5> The Earth is the 3<sup>rd</sup> planet from the Sun and the only astronomical object known to harbor and support life. About 29.2% of Earth's surface is land and remaining 70.8% is covered with water.", size: 1218822, width: "120px", key: 2}
],
deleteUrl: "/site/file-delete",
overwriteInitial: false,
maxFileSize: 100,
initialCaption: "The Moon and the Earth"
});
});
</script>
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).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, description: "<h5>The Moon</h5>The Moon is Earth's only natural satellite and the fifth largest moon in the solar system. The Moon's distance from Earth is about 240,000 miles (385,000 km).", size: 930321, width: "120px", key: 1},
{caption: "Earth.jpg", filename: "EarthFull.jpg", downloadUrl: url2, description: "<h5>The Earth</h5> The Earth is the 3<sup>rd</sup> planet from the Sun and the only astronomical object known to harbor and support life. About 29.2% of Earth's surface is land and remaining 70.8% is covered with water.", size: 1218822, width: "120px", key: 2}
],
deleteUrl: "/site/file-delete",
overwriteInitial: true,
maxFileSize: 100,
initialCaption: "The Moon and the Earth"
});
});
</script>
<div class="file-loading">
<input id="input-20" type="file">
</div>
<script>
$(document).ready(function() {
// For Bootstrap 5.x
$("#input-20").fileinput({
browseClass: "btn btn-info",
mainClass: "d-grid",
showCaption: false,
showRemove: false,
showUpload: false
});
// For Bootstrap 4.x uncomment and use below code
/*
$("#input-20").fileinput({
browseClass: "btn btn-primary btn-block",
showCaption: false,
showRemove: false,
showUpload: false
});
*/
});
</script>
<div class="file-loading">
<input id="input-21" type="file" accept="image/*">
</div>
<script>
$(document).ready(function() {
$("#input-21").fileinput({
previewFileType: "image",
browseClass: "btn btn-success",
browseLabel: "Pick Image",
browseIcon: "<i class=\"bi-file-image\"></i> ",
removeClass: "btn btn-danger",
removeLabel: "Delete",
removeIcon: "<i class=\"bi-trash\"></i> ",
uploadClass: "btn btn-info",
uploadLabel: "Upload",
uploadIcon: "<i class=\"bi-upload\"></i> "
});
});
</script>
<div class="file-loading">
<input id="input-22" name="input22[]" type="file" accept="text/plain" multiple>
</div>
<script>
$(document).ready(function() {
$("#input-22").fileinput({
previewFileType: "text",
allowedFileExtensions: ["txt", "md", "ini", "text"],
previewClass: "bg-light"
});
});
</script>
<div class="file-loading">
<input id="input-23" name="input23[]" type="file" multiple>
</div>
<script>
$(document).ready(function() {
// For Bootstrap 5.x
$("#input-23").fileinput({
showUpload: false,
layoutTemplates: {
main1: "{preview}\n" +
"<div class=\'input-group {class}\'>\n" +
" {browse}\n" +
" {upload}\n" +
" {remove}\n" +
" {caption}\n" +
"</div>"
}
});
// For Bootstrap 4.x uncomment and use below code
/*
$("#input-23").fileinput({
showUpload: false,
layoutTemplates: {
main1: "{preview}\n" +
"<div class=\'input-group {class}\'>\n" +
" <div class=\'input-group-btn\ input-group-prepend'>\n" +
" {browse}\n" +
" {upload}\n" +
" {remove}\n" +
" </div>\n" +
" {caption}\n" +
"</div>"
}
});
*/
});
</script>
<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).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>
fileTypeSettings. <div class="file-loading">
<input id="input-41" name="input41[]" type="file" multiple>
</div>
<script>
$(document).ready(function() {
$("#input-41").fileinput({
maxFileCount: 10,
allowedFileTypes: ["image", "video"]
});
});
</script>
<div class="file-loading">
<input id="input-42" name="input42[]" type="file" multiple>
</div>
<script>
$(document).ready(function() {
$("#input-42").fileinput({
maxFileCount: 10,
allowedFileExtensions: ["jpg", "gif", "png", "txt"]
});
});
</script>
<div class="file-loading">
<input id="input-43" name="input43[]" type="file" multiple>
</div>
<div id="errorBlock" class="help-block"></div>
<script>
$(document).ready(function() {
$("#input-43").fileinput({
showPreview: false,
allowedFileExtensions: ["jpg", "jpeg", "gif", "png"],
elErrorContainer: "#errorBlock"
});
});
</script>
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).ready(function() {
$("#input-44").fileinput({
uploadUrl: '/file-upload-batch/2',
maxFilePreviewSize: 10240
});
});
</script>
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.