Multiple fileUpload Problem for different indexes

Question

I am having problem with my jquery code

I am dynamically adding multiple <input type='file' multiple> each of them name parameter is change means 1st one is

color_images_1 <input type='file' multiple name='color_images_1'> 

and will dynamically increase this 1 okay so every color has multiple images of its own color.

So basically I want to achieve this and I am using jS new FormData for it so here's my problem I am appending multiple files to formdata.

$(function() {

    let $i = 1;
    $(document).on('click', '.btn_color', function() {
        $i++;
        $('.color_wrapper').append("<div class='form-group'><label for='color_name" + $i + "'>Color Name</label><input type='text' name='color_name" + $i + "' id='color_name" + $i + "' class='form-control'></div><div class='form-group'><label for='sku" + $i + "'>Sku</label><input type=text class='form-control' id='sku" + $i + "' name='sku" + $i + "'></div><div class='form-group'><button type='button' class='btn btn-link pull-right btn_color'>Add more colors</button><label for='color_images" + $i + "'>Color Images</label><input type='file' name='color_images" + $i + "' multiple id='color_images" + $i + "' class='form-control'></div>");
    });
    $("#product_form").on('submit', function(e) {
        e.preventDefault();
        let files = '';
        let form = document.getElementById('product_form');
        let formData = new FormData(form);
        files = $("#color_images" + $i).get(0).files;
        $(files).each(function(index, file){
            formData.append("color_images_" + [$i],file);
        });
        formData.append('variable', $i);
        $.ajax({
            url: 'product_ajax.php',
            method: 'post',
            data: formData,
            success: function(data) {
                console.log(data);
            },
            contentType: false,
            cache: false,
            processData: false
        });
    });

});

Now I am getting just only one file if I give index so I am getting multiple files otherwise not

[color_images_1] => Array
    (
        [name] => dht_feed.dat
        [type] => application/octet-stream
        [tmp_name] => D:\xampp\tmp\php4E11.tmp
        [error] => 0
        [size] => 2
    )

)

what I want

color_images_1 its all multiple files

color_images_2 its all multiple files

html Code:

                                   <form id="product_form" method="post" enctype="multipart/form-data">
                                <div class="form-group">
                                    <label for="product_name">Product Name</label>
                                    <input type="text" class="form-control" name="product_name" id="product_name">
                                </div>
                                <div class="form-group">
                                    <label for="product_slug">Product Slug</label>
                                    <input type="text" class="form-control" name="product_slug" id="product_slug">
                                </div>
                                <div class="form-group">
                                    <label for="product_price">Product Price</label>
                                    <input type="text" class="form-control" name="product_price" id="product_price">
                                </div>
                                <div class="form-group">
                                    <label for="product_description">Product Description</label>
                                    <textarea class="form-control" name="product_description" id="product_description"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="color_name1">Color Name</label>
                                    <input type="text" name="color_name1" id="color_name1" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="sku1">Stock Keeping Unit</label>
                                    <input type="text" name="sku1" id="sku1" class="form-control">
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-link pull-right btn_color" type="button">Add more colors</button>
                                    <label for="color_images1">Color Images</label>
                                    <input type="file" name="color_images1" multiple id="color_images1" class="form-control">
                                </div>
                                <div class="color_wrapper">
                                </div>

                                <button class="btn btn-primary btn-block" type="submit">Add Product</button>
                            </form>

Answer 1

You need to iterate i as well.

Please replace below code

    files = $("#color_images" + $i).get(0).files;
    $(files).each(function(index, file){
        formData.append("color_images_" + [$i],file);
    });
    formData.append('variable', $i);

With this one

   for (var j = 1; j <= $i; j++) {
     files = $("#color_images" + j).get(0).files;
     $(files).each(function(index, file) {
       formData.append("color_images_" + [j], file);
     });
     formData.append("variable", j);
   }