jQuery clone for input type="file"-CodePudding

Hi i am trying to clone a div with input tag of type-file i.e-

The div gets cloned but the image or file which i uploaded in the original input tag doesnt get copied to the cloned input tag...The cloned input tag displays the name of the file but when i save the form it's not passed and is not saved

$(".imageblockbtn").click(function () {
    var langid = jQuery(this).attr("id");

    $(
      `#dynamic${langid}`
    ).append(`<div  id="imageblock">
                                                <label for="imageblock">Image Block</label>
                                                <input  type="file" accept="image/*" name="data[${langid}][imageblock${k}]"><span ></span><span
                                                ></span>
                                                <button type="button" ><i  style="font-size:18px;color:red">remove_circle</i></button>

                                                <div >
                                                        <a >Duplicate</a>
                                                        <div >

                                                        <li id="1"><a href="javascript:void(0)">English</a> </li>
                                                        <li id="3"><a href="javascript:void(0)">Chineese</a></li>
                                                        <li id="9"><a href="javascript:void(0)">German</a></li>
                                                        <li id="10"><a href="javascript:void(0)">Italian</a></li>
                                                        <li id="4"><a href="javascript:void(0)">Korean</a></li>
                                                        <li id="5"><a href="javascript:void(0)">Japanese</a></li>
                                                        <li id="6"><a href="javascript:void(0)">Spanish</a></li>
                                                        <li id="11"><a href="javascript:void(0)">Russian</a></li>
                                                        <li id="7"><a href="javascript:void(0)">Ukranian</a></li>
                                                        <li id="8"><a href="javascript:void(0)">French</a></li>

                                            </div>
                                            </div>

                                            </div>`);
      k;

    $(".image_dd li").each(function (index, li) {
      var lid = $(li).attr("id");
      // console.log($(li).parents(".qwer"));
      $(li).unbind("click");
      $(li).on("click", function () {
        var clone = $(li).parents(".qwer").clone(true);

        clone
          .children("h1")
          .children("input")
          .attr("name", `data[${lid}][imageblock${k}]`);
        clone.insertAfter(`#dynamic${lid}`);
          k;
        alert("Duplicated");
      });
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

that is because clone in jQuery doesn't copy all associated relations of the input but only the structure and the properties. The same happens with <Select> tag when cloning it looses the value in certain situations. To solve this set the value after cloning. This part is answered in another question. Check this one : Copy/Clone files from File Input to another Input