minFileCount validation doesn't work properly when more than one input field in the same form

[xqxian]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of bootstrap-fileinput.
• This is not an usage question. I confirm having read the plugin documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

First of all thanks for your great plugin! But I've met some validation problems in Form Submission Mode when I tried setting minFileCount(or data-min-file-count) in a form containing more than one input field. Briefly speaking only the last input field will be validated properly. For example, assume that I want the first input to upload at least 2 files, and the second one at least 1 file, so I organized my code like this:

<form action="" method="post" enctype="multipart/form-data">
        <input id="input-id" type="file" class="file" data-min-file-count="2" multiple required />
        <input id="input-id2" type="file" class="file" data-min-file-count="1" multiple required />
        <button class="btn btn-primary" type="submit">submit</button>
</form>

Then I selected 1 file in the first input and 1 file in the second one and submitted the form. The submission was supposed to be failed and show an error message since there was only 1 file selected in the first input, which was unexpected . However, the submission hasn't been aborted in this case, which meant the min-file validation of the first input hasn't been triggered, but may worked properly in the second input.

To confirm my guess I made a slight change, this time the second input must upload at least 2 files, and the first one only 1 file, just like the following:

<form action="" method="post" enctype="multipart/form-data">
        <input id="input-id" type="file" class="file" data-min-file-count="1" multiple required />
        <input id="input-id2" type="file" class="file" data-min-file-count="2" multiple required />
        <button class="btn btn-primary" type="submit">submit</button>
</form>

Then as in the first case, I selected 1 file in the first input and 1 file in the second one and submitted the form. This time the validation finally worked to abort the submission, and showed me an error message that "You must select at least 2 files to upload", which proved that only the last input field would be validated properly.

Due to the specifics of my project I don't want the users to upload individual file so the Ajax Submission Mode doesn't seem to suitable for me... Actually I did try the Ajax Mode and change my code to this:

<form action="" method="post" enctype="multipart/form-data">
        <input id="input-id" type="file" multiple required/>
        <input id="input-id2" type="file" multiple required/>
        <button class="btn btn-primary" type="submit">submit</button>
</form>
<script>
    $("#input-id").fileinput({
        uploadUrl: "#",
        uploadAsync: false,
        minFileCount: 2
    });
    $("#input-id2").fileinput({
        uploadUrl: "#",
        uploadAsync: false,
        minFileCount: 2
    });
</script>

As in the above cases I selected 1 file in the first input and 1 file in the second one then clicked the submit button, but the file-count validation of both input didn't seem to be triggered and the form just been submitted directly. Only the default "Upload" button in each input field could trigger the validation properly. So I think the Form Submission Mode is still a better choice for me(?).

Hope you can recreate the problem and fix this bug, thanks!

PS: What about triggering the minFileCount validation when the files are selected from Browse button? Just as the maxFileCount validation does.

Best regards! : )

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version: 1.10.2
• bootstrap-fileinput version: 4.3.7

[kartik-v]

You seem to be combining both modes (ajax submission and form submission) which is strictly NOT SUPPOSED TO BE DONE as highlighted in the USAGE modes of the plugin.

Do not provide any uploadUrl if you are uploading via form submit. I am not clear on the other part of your query... can you summarize the issue?

[xqxian]

@kartik-v
Simply I used the Form Submission Mode first (the first two parts of code above), but found that only the last input field will be validated properly. So I tried the Ajax Mode and changed my code to the last part, but it didn't triggered any validation when I clicked the submit button (now I know maybe I'm combining both modes in this way). Due to the specifics of my project I don't want the users to upload individual file and I want to use my own submit button, so I think the Form Submission Mode is more suitable for me. Sorry to make you confused but the min-file validation in Form Submission Mode really have some problems. I've updated the first comment a little bit and hope you can understand what I mean now. : )

[dendral]

Hello @kartik-v I am getting the same issue that @xqxian reported. Basically, if I define more than one input-file inside the same html-form (Form Submission Mode), the plugin only validates the last one in the form. I used the example page included in the download *.zip

<form enctype="multipart/form-data">
        <input id="file-one" class="file" type="file" multiple data-min-file-count="1">
        <br>
        <input id="file-two" class="file" type="file" multiple data-min-file-count="2">
        <br>
        <input id="file-three" class="file" type="file" multiple data-min-file-count="3">
        <br>
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="reset" class="btn btn-default">Reset</button>
</form>

Thank you in advance.

[kartik-v]

Will provide a fix soon