Krajee

File Count Validation Demo

  1. Home
  2. Bootstrap File Input
  3. Demos
  4. File Count Validation
Star Fork Watch Follow
Thankful to Krajee! BUY A COFFEEor 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)

Max Files (Ajax)

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='https://picsum.photos/id/909/1920/1080'>",
        "<img class='kv-preview-data file-preview-image' src='https://picsum.photos/id/910/1920/1080'>",
        "<img class='kv-preview-data file-preview-image' src='https://picsum.photos/id/911/1920/1080'>"
    ],
    initialPreviewConfig: [
        {caption: "Scene-1.jpg", description: "<h5>Number One</h5> This is a representative placeholder description number one for this image..", size: 628782, width: "120px", url: "/site/file-delete", key: 1},
        {caption: "Scene-2.jpg", description: "<h5>Number Two</h5> This is a representative placeholder description number two for this image.", size: 982873, width: "120px", url: "/site/file-delete", key: 2}, 
        {caption: "Scene-3.jpg", description: "<h5>Number Three</h5> This is a representative placeholder description number three for this image.", size: 567728, width: "120px", url: "/site/file-delete", key: 3} 
    ],
    allowedFileExtensions: ["jpg", "png", "gif"]
});
</script>

Min Files (Ajax)

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='https://picsum.photos/id/1049/1920/1080'>",
        "<img class='kv-preview-data file-preview-image' src='https://picsum.photos/id/1050/1920/1080'>"
    ],
    initialPreviewConfig: [
        {caption: "Places-1.jpg", description: "<h5>Place One</h5> This is a representative placeholder description number one for this image.", size: 823677, width: "120px", url: "/site/file-delete", key: 1},
        {caption: "Places-2.jpg", description: "<h5>Place Two</h5> This is a representative placeholder description number two for this image.", size: 926367, width: "120px", url: "/site/file-delete", key: 2}
    ],
    allowedFileExtensions: ["jpg", "png", "gif"]
});
</script>

Max Files (Non-Ajax)

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='https://picsum.photos/id/1045/1920/1080'>",
        "<img class='kv-preview-data file-preview-image' src='https://picsum.photos/id/1055/1920/1080'>",
        "<img class='kv-preview-data file-preview-image' src='https://picsum.photos/id/1056/1920/1080'>",
    ],
    initialPreviewConfig: [
        {caption: "Nature-1.jpg", description: "<h5>Nature One</h5> This is a representative placeholder description number one for this image.", size: 628782, width: "120px", url: "/site/file-delete", key: 1},
        {caption: "Nature-2.jpg", description: "<h5>Nature Two</h5> This is a representative placeholder description number two for this image.", size: 982873, width: "120px", url: "/site/file-delete", key: 2}, 
        {caption: "Nature-3.jpg", description: "<h5>Nature Three</h5> This is a representative placeholder description number three for this image.", size: 567728, width: "120px", url: "/site/file-delete", key: 3}, 
    ],
    allowedFileExtensions: ["jpg", "png", "gif"]
});
</script>

Min Files (Non-Ajax)

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='https://picsum.photos/id/1047/1920/1080'>",
        "<img class='kv-preview-data file-preview-image' src='https://picsum.photos/id/1054/1920/1080'>",
    ],
    initialPreviewConfig: [
        {caption: "City-1.jpg", description: "<h5>City One</h5> This is a representative placeholder description number one for this image.", size: 823677, width: "120px", url: "/site/file-delete", key: 1},
        {caption: "City-2.jpg", description: "<h5>City Two</h5> This is a representative placeholder description number two for this image.", size: 926367, width: "120px", url: "/site/file-delete", key: 2}, 
    ],
    allowedFileExtensions: ["jpg", "png", "gif"]
});
</script>

Max Files (Special)

Maximum file count special validation, which includes setting up of both maxFileCount and maxTotalFileCount properties. This example will allow only 3 files to be selected for upload initially at a time via maxFileCount and not more than 8 files (maxTotalFileCount) in total including the initial preview files. Try uploading 4 files first which will give an error. Next, try uploading 3 files first which will get you 6 files in initialPreview and then try uploading another 3 files to get a disallowed error, as the total file count (9) and will exceed 8 as set in maxTotalFileCount. 
<!-- Include initial preview count -->
<div class="file-loading">
    <input id="kartik-input-705" name="kartik-input-705[]" multiple type="file">
</div>
<script>
$("#kartik-input-705").fileinput({
    uploadUrl: "/file-upload-batch/2",
    maxFileCount: 3,
    maxTotalFileCount: 8,
    initialPreviewAsData: true,
    overwriteInitial: false,
    initialPreview: [
        "https://kartik-v.github.io/bootstrap-fileinput-samples/samples/Desert.jpg",
        "https://kartik-v.github.io/bootstrap-fileinput-samples/samples/Koala.jpg",
        "https://kartik-v.github.io/bootstrap-fileinput-samples/samples/Jellyfish.jpg",
    ],
    initialPreviewConfig: [
        {caption: "Desert.jpg", description: "<h5>The Desert</h5> This is a representative placeholder description number one for this image.", size: 628782, width: "120px", url: "/site/file-delete", key: 1},
        {caption: "Koala.jpg", description: "<h5>The Koala</h5> This is a representative placeholder description number two for this image.", size: 982873, width: "120px", url: "/site/file-delete", key: 2}, 
        {caption: "Jellyfish.jpg", description: "<h5>The Jellyfish</h5> This is a representative placeholder description number three for this image.", size: 567728, width: "120px", url: "/site/file-delete", key: 3} 
    ],
});
</script>

Required Validation 1 (Ajax)

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>

Required Validation 2 (Ajax)

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: [
        "https://picsum.photos/id/237/1920/1080"
    ],
    initialPreviewConfig: [
        {caption: "Animals-6.jpg", description: "<h5>Animals Random</h5> This is a representative placeholder description number one for this image.", 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>

Required Validation 1 (Non Ajax)

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>

Required Validation 2 (Non Ajax)

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: [
        "https://picsum.photos/id/238/1920/1080"
    ],
    initialPreviewConfig: [
        {caption: "City-1.jpg", description: "<h5>Cities Random</h5> This is a representative placeholder description number one for this image.", 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>

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.

 
visitors to Krajee Jquery Plugins since 22-May-2017