File Count Validation Demo

Thankful to Krajee!
to get more out of us.

Advanced file count validation for minFileCount and maxFileCount. You can choose to include initial preview file count in these checks by setting validateInitialCount property to true. This can be validated for both ajax uploads (with uploadUrl) and non-ajax uploads (without uploadUrl).

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 with validateInitialCount property set to true, to include initialPreview files from server in the file count validation. Note overwriteInitial property must be set to false for initial count validation to be effective.
<!-- Include initial preview count -->
<div class="file-loading">
    <input id="input-fcount-1" name="input-fcount-1[]" multiple type="file" accept="image/*">
</div>
<script>
$("#input-fcount-1").fileinput({
    uploadUrl: "/file-upload-batch/2",
    maxFileCount: 4,
    validateInitialCount: true,
    overwriteInitial: false,
    initialPreview: [
        "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/nature/1'>",
        "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/nature/2'>",
        "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/nature/3'>"
    ],
    initialPreviewConfig: [
        {caption: "Nature-1.jpg", size: 628782, width: "120px", url: "/site/file-delete", key: 1},
        {caption: "Nature-2.jpg", size: 982873, width: "120px", url: "/site/file-delete", key: 2}, 
        {caption: "Nature-3.jpg", size: 567728, width: "120px", url: "/site/file-delete", key: 3} 
    ],
    allowedFileExtensions: ["jpg", "png", "gif"]
});
</script>
Similar validation for minFileCount. Try deleting a file from initial preview to test a minFileCount of 2. You need to also set validateInitialCount properties to true, to validate count of initialPreview files from server in the file count validation. Note overwriteInitial property must be set to false for initial count validation to be effective.

Note

The minFileCount check cannot be comprehensive and complete by client validation alone. The client validation routine for minFileCount is triggered only at file upload and file delete. So an user can technically skip upload after deletion and minFileCount check can be compromised. You need to hence write your server code appropriately to ensure validation of minFileCount for uploaded files. You would need to ensure the files on server not deleted until minFileCount is adhered to.
<!-- Include initial preview count -->
<div class="file-loading">
    <input id="input-fcount-2" name="input-fcount-2[]" multiple type="file" accept="image/*">
</div>
<script>
$("#input-fcount-2").fileinput({
    uploadUrl: "/file-upload-batch/2",
    minFileCount: 2,
    validateInitialCount: true,
    overwriteInitial: false,
    initialPreview: [
        "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/city/1'>",
        "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/city/2'>"
    ],
    initialPreviewConfig: [
        {caption: "City-1.jpg", size: 823677, width: "120px", url: "/site/file-delete", key: 1},
        {caption: "City-2.jpg", size: 926367, width: "120px", url: "/site/file-delete", key: 2}
    ],
    allowedFileExtensions: ["jpg", "png", "gif"]
});
</script>
A maxFileCount validation but for non-ajax (form based) upload scenario.
<!-- Include initial preview count -->
<div class="file-loading">
    <input id="input-fcount-3" name="input-fcount-3[]" multiple type="file" accept="image/*">
</div>
<script>
$("#input-fcount-3").fileinput({
    maxFileCount: 4,
    validateInitialCount: true,
    overwriteInitial: false,
    initialPreview: [
        "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/nature/1'>",
        "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/nature/2'>",
        "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/nature/3'>",
    ],
    initialPreviewConfig: [
        {caption: "Nature-1.jpg", size: 628782, width: "120px", url: "/site/file-delete", key: 1},
        {caption: "Nature-2.jpg", size: 982873, width: "120px", url: "/site/file-delete", key: 2}, 
        {caption: "Nature-3.jpg", size: 567728, width: "120px", url: "/site/file-delete", key: 3}, 
    ],
    allowedFileExtensions: ["jpg", "png", "gif"]
});
</script>
A minFileCount validation but for non-ajax (form based) upload scenario.

Note

The minFileCount check cannot be comprehensive and complete by client validation alone. The client validation routine for minFileCount is triggered only at file upload and file delete. So an user can technically skip upload after deletion and minFileCount check can be compromised. You need to hence write your server code appropriately to ensure validation of minFileCount for uploaded files. You would need to ensure the files on server not deleted until minFileCount is adhered to.
<!-- Include initial preview count -->
<div class="file-loading">
    <input id="input-fcount-4" name="input-fcount-4[]" multiple type="file" accept="image/*">
</div>
<script>
$("#input-fcount-4").fileinput({
    minFileCount: 2,
    validateInitialCount: true,
    overwriteInitial: false,
    initialPreview: [
        "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/city/1'>",
        "<img class='kv-preview-data file-preview-image' src='http://lorempixel.com/800/460/city/2'>",
    ],
    initialPreviewConfig: [
        {caption: "City-1.jpg", size: 823677, width: "120px", url: "/site/file-delete", key: 1},
        {caption: "City-2.jpg", size: 926367, width: "120px", url: "/site/file-delete", key: 2}, 
    ],
    allowedFileExtensions: ["jpg", "png", "gif"]
});
</script>
Validation of required property for ajax upload scenario, which will enforce files to be selected and required before upload. This scenario includes a custom upload button and a custom reset button (and default upload and remove buttons are hidden). The upload will force a file to be selected and required - else a validation error as set in msgRequired will be shown.

<div class="file-loading">
    <input id="input-freqd-1" name="input-freqd-1[]" multiple type="file" accept="image/*">
</div>
<hr>
<div class="text-center">
    <button type="button" class="btn btn-lg btn-success btn-upload-3"><i class="fa fa-upload"></i> Upload</button>
    <button type="button" class="btn btn-lg btn-secondary btn-reset-3"><i class="fa fa-ban"></i> Clear</button>
</div>
<script>
$("#input-freqd-1").fileinput({
    uploadUrl: "/file-upload-batch/2",
    showUpload: false,
    showRemove: false,
    required: true,
    allowedFileExtensions: ["jpg", "png", "gif"]
});
$(".btn-upload-3").on("click", function() {
    $("#input-freqd-1").fileinput('upload');
});
$(".btn-reset-3").on("click", function() {
    $("#input-freqd-1").fileinput('clear');
});
</script>
Validation of same scenario above for required property for ajax upload scenario, but additionally includes initial preview count in the required validation. The validateInitialCount property is set to true to include initial count in validating if files are selected. This scenario again includes a custom upload button and a custom reset button (and default upload and remove buttons are hidden). The upload will force a file to be selected and required - else a validation error as set in msgRequired will be shown.

<!-- Include initial preview count -->
<div class="file-loading">
    <input id="input-freqd-2" name="input-freqd-2[]" multiple type="file" accept="image/*">
</div>
<hr>
<div class="text-center">
    <button type="button" class="btn btn-lg btn-success btn-upload-4"><i class="fa fa-upload"></i> Upload</button>
    <button type="button" class="btn btn-lg btn-secondary btn-reset-4"><i class="fa fa-ban"></i> Clear</button>
</div>
<script>
$("#input-freqd-2").fileinput({
    uploadUrl: "/file-upload-batch/2",
    showUpload: false,
    showRemove: false,
    required: true,
    validateInitialCount: true,
    overwriteInitial: false,
    initialPreviewAsData: true,
    initialPreview: [
        "http://lorempixel.com/800/460/animals/6"
    ],
    initialPreviewConfig: [
        {caption: "Animals-6.jpg", size: 628782, width: "120px", url: "/site/file-delete", key: 1} 
    ],
    allowedFileExtensions: ["jpg", "png", "gif"]
});
$(".btn-upload-4").on("click", function() {
    $("#input-freqd-2").fileinput('upload');
});
$(".btn-reset-4").on("click", function() {
    $("#input-freqd-2").fileinput('clear');
});
</script>
Validation of required property for form based upload (non ajax) scenario, which will enforce files to be selected and required before upload. This scenario includes custom form submit and reset buttons for upload (and default upload and remove buttons are hidden). The upload will force a file to be selected and required - else a validation error as set in msgRequired will be shown.

<form enctype="multipart/form-data" method="post" action="/site/file-up?type=1" class="krajee-example-form">
    <div class="file-loading">
        <input id="input-freqd-3" name="input-freqd-3[]" multiple type="file" accept="image/*">
    </div>
    <hr>
    <div class="text-center">
        <button type="submit" class="btn btn-lg btn-success btn-submit"><i class="fa fa-upload"></i> Submit</button>
        <button type="reset" class="btn btn-lg btn-secondary btn-reset"><i class="fa fa-refresh"></i> Reset</button>
    </div>
</form>
<script>
$("#input-freqd-3").fileinput({
    showUpload: false,
    showRemove: false,
    required: true,
    allowedFileExtensions: ["jpg", "png", "gif"]
});
$(".btn-upload-3").on("click", function() {
    $("#input-freqd-3").fileinput('upload');
});
</script>
Validation of same scenario above for required property for form based upload (non ajax) scenario, but additionally includes initial preview count in the required validation. The validateInitialCount property is set to true to include initial count in validating if files are selected. This scenario again includes custom form submit and reset buttons for upload (and default upload and remove buttons are hidden). The upload will force a file to be selected and required - else a validation error as set in msgRequired will be shown.

<!-- Include initial preview count -->
<form enctype="multipart/form-data" method="post" action="/site/file-up?type=2" class="krajee-example-form">
    <div class="file-loading">
        <input id="input-freqd-4" name="inputfreqd4[]" multiple type="file" accept="image/*">
    </div>
    <hr>
    <div class="text-center">
        <button type="submit" class="btn btn-lg btn-success btn-submit"><i class="fa fa-upload"></i> Submit</button>
        <button type="reset" class="btn btn-lg btn-secondary btn-reset"><i class="fa fa-refresh"></i> Reset</button>
    </div>
</form>
<script>
$("#input-freqd-4").fileinput({
    showUpload: false,
    showRemove: false,
    required: true,
    validateInitialCount: true,
    overwriteInitial: false,
    initialPreviewAsData: true,
    initialPreview: [
        "http://lorempixel.com/800/460/animals/7"
    ],
    initialPreviewConfig: [
        {caption: "Animals-7.jpg", size: 628782, width: "120px", url: "/site/file-delete", key: 1} 
    ],
    allowedFileExtensions: ["jpg", "png", "gif"]
});
$(".btn-upload-4").on("click", function() {
    $("#input-freqd-4").fileinput('upload');
});
</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.