jQuery clone for input type="file"

Question

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>

Albi · Accepted Answer · 2022-06-10 09:36:50Z

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

answered Jun 10, 2022 at 9:36

Albi

1,47815 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ezio Over a year ago

var file = $(li).parents(".qwer").find(".imageblock").files; var clone = $(li).parents(".qwer").clone(true); clone.children("input").files = file; Thank you worked for me :)

Collectives™ on Stack Overflow

jQuery clone for input type="file"

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related