jQuery clone for input type="file"

Question

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

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 class="col-12 form-group qwer" id="imageblock"> <label for="imageblock">Image Block</label> <input class="imageblock" type="file" accept="image/*" name="data[${langid}][imageblock${k}]"><span class="up"></span><span class="down"></span> <button type="button" class="btn remove-dyna"><i class="material-icons" style="font-size:18px;color:red">remove_circle</i></button> <div class="dropdown"> <a class="dropbtn">Duplicate</a> <div class="dropdown-content image_dd"> <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>

Answer 1

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