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 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>
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