Bootstrap File Input Demo

Thankful to Krajee!
to get more out of us.

A demonstration for auto replacing files in the preview when it exceeds the maxFileCount setting. For this to work, you must set the autoReplace property to true with a proper maxFileCount setting. For restricting to single (ONE) file uploads, in addition to setting maxFileCount to 1, do NOT SET the multiple attribute of the file input (to prevent multiple selections).

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 maxFileCount to 1 and DO NOT set the multiple attribute on your file input markup to allow ONLY ONE file to be selected OR uploaded at a time.
<!-- AUTO REPLACE AFTER EVERY 1 FILE SELECTED -->
<div class="file-loading">
    <input id="input-repl-1" name="input-repl-1" type="file">
</div>
<script>
$("#input-repl-1").fileinput({
    uploadUrl: "/file-upload-batch/2",
    autoReplace: true,
    maxFileCount: 1,
    allowedFileExtensions: ["jpg", "png", "gif"]
});
</script>
An alternative to the one file limit above, which includes an initial preview. This scenario consists a configuration that will automatically overwrite initial preview files and overwrite uploaded thumbnails to always show one file in the preview. Note: Initial preview thumbnail deletion capability has been disabled for this demo.
<!-- AUTO REPLACE AFTER EVERY 1 FILE SELECTED -->
<div class="file-loading">
    <input id="input-repl-1a" name="input-repl-1a" type="file" accept="image/*">
</div>
<script>
$("#input-repl-1a").fileinput({
    uploadUrl: "/file-upload-batch/2",
    autoReplace: true,
    overwriteInitial: true,
    showUploadedThumbs: false,
    maxFileCount: 1,
    initialPreview: [
        "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/nature/1'>"
    ],
    initialCaption: 'Initial-Image.jpg',
    initialPreviewShowDelete: false,
    showRemove: false,
    showClose: false,
    layoutTemplates: {actionDelete: ''}, // disable thumbnail deletion
    allowedFileExtensions: ["jpg", "png", "gif"]
});
</script>
You can also validate multiple file uploads and auto-replace the files in preview after the maxFileCount has been reached.
<!-- AUTO REPLACE AFTER EVERY 5 FILE SELECTED -->
<div class="file-loading">
    <input id="input-repl-2" name="input-repl-2" type="file" accept="image/*" multiple>
</div>
<script>
$("#input-repl-2").fileinput({
    uploadUrl: "/file-upload-batch/2",
    autoReplace: true,
    maxFileCount: 5,
    allowedFileExtensions: ["jpg", "png", "gif"]
});
</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.