JSFiddle - React, Tailwind, and code Playground

by Glink

HTML

<!-- <p>Name: <input type="file" id="test"></p>
<button id="file_button">Show Value</button>-->

<form method="POST" enctype="multipart/form-data" action="javascript:alert('Enviado!');"> 
    <div id="dynamicInput">
         Foto<br><input type="file" class="test" name="myInputs[]">
    </div>
     
    <input type="button" id="btn2" value="Add foto" ><br>
    <input type="submit">
</form>

JavaScript

$(document).ready(function() {

    var counter = 1;
    var limit = 5;
    $("#btn2").click(function() {

        if (counter == limit) {
            alert("You have reached the limit of " + counter + " fotos");
        } else {
            $("#dynamicInput").append("<br>Foto <br><input class='test' type='file' name='myInputs[]'>");
        }
        counter++;
    });


    $("form").submit(function() {

        $('.test').each(function(i, obj) {

            var file = $(this).val();
            var ext = $(this).val().substr(($(this).val().lastIndexOf('.') + 1));
            //alert(file);
            if (ext == "jpg" || ext == "png" || ext == "JPG" || ext == "jpeg") {
                alert("File: " + file + " Valid");
                //return true;
            } else {
                alert("Invalid file only files with extension. Jpeg,. Jpg or. Png are accepted.");
                return false;
            }

        });

    });


});