File Count Validation Demo   Tips

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

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 -->
<input id="input-fcount-1" name="inputfcount1[]" multiple type="file" class="file-loading" accept="image/*">
<script>
$("#input-fcount-1").fileinput({
    uploadUrl: "/file-upload-batch/2",
    maxFileCount: 4,
    validateInitialCount: true,
    overwriteInitial: false,
    initialPreview: [
        "<img style='height:160px' src='http://lorempixel.com/800/460/nature/1'>",
        "<img style='height:160px' src='http://lorempixel.com/800/460/nature/2'>",
        "<img style='height:160px' 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 -->
<input id="input-fcount-2" name="inputfcount2[]" multiple type="file" class="file-loading" accept="image/*">
<script>
$("#input-fcount-2").fileinput({
    uploadUrl: "/file-upload-batch/2",
    minFileCount: 2,
    validateInitialCount: true,
    overwriteInitial: false,
    initialPreview: [
        "<img style='height:160px' src='http://lorempixel.com/800/460/city/1'>",
        "<img style='height:160px' 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 -->
<input id="input-fcount-3" name="inputfcount3[]" multiple type="file" class="file-loading" accept="image/*">
<script>
$("#input-fcount-3").fileinput({
    maxFileCount: 4,
    validateInitialCount: true,
    overwriteInitial: false,
    initialPreview: [
        "<img style='height:160px' src='http://lorempixel.com/800/460/nature/1'>",
        "<img style='height:160px' src='http://lorempixel.com/800/460/nature/2'>",
        "<img style='height:160px' 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 -->
<input id="input-fcount-4" name="inputfcount4[]" multiple type="file" class="file-loading" accept="image/*">
<script>
$("#input-fcount-4").fileinput({
    minFileCount: 2,
    validateInitialCount: true,
    overwriteInitial: false,
    initialPreview: [
        "<img style='height:160px' src='http://lorempixel.com/800/460/city/1'>",
        "<img style='height:160px' 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.


<input id="input-freqd-1" name="inputfreqd3[]" multiple type="file" class="file-loading" accept="image/*">
<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-default 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 -->
<input id="input-freqd-2" name="inputfreqd4[]" multiple type="file" class="file-loading" accept="image/*">
<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-default 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">
<input id="input-freqd-3" name="inputfreqd3[]" multiple type="file" class="file-loading" accept="image/*">
<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-default 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">
<input id="input-freqd-4" name="inputfreqd4[]" multiple type="file" class="file-loading" accept="image/*">
<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-default 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>