Bootstrap File Upload clone

Question

I am using Krajee's Bootstrap file upload plugin for file input & I am trying to clone the file input so that users can add multiple files from different folders rather than selecting it at once. The issue I am facing is after the file input gets cloned, it behaves weirdly. I have setup a fiddle for this. When I am trying to reset or clear the file input, it always clears the first input. Have been trying a lot of options & after spending so many hours decided to post here. JS Fiddle: https://jsfiddle.net/asfg9mna/

Any ideas as to how to make it work fine? Issue is whenever i click on delete icon, it always deletes the first input's file & not the current one.

HTML code:

<form role="form" id="upload-form" class="form-horizontal">
    <div class="addFiles text-nowrap">
        <div class="appendClass form-group" style="margin-bottom: 1.5%;">
            <label class="col-md-2 control-label" for="input-2">Select Files</label>
            <div class="col-md-9 col-9-input uploadFile">
                <input placeholder="Select Files" id="input-2" name="input2[]" type="file" class="file input-upload" data-show-upload="false" data-show-preview="false">
            </div>
            <button type="button" class="btn btn-box-tool addFilesBtn" data-toggle="tooltip" title="Click to add more files">
                <i class="fa fa-plus"> </i>
            </button>
            <button type="button" class="btn btn-box-tool closeFilesBtn" data-toggle="tooltip" title="Click to remove this block">
                <i class="fa fa-times"> </i>
            </button>
        </div>
    </div>
</form>

JS Code:

//Clone Upload File Div
$(document).on('click', ".addFilesBtn", function(e) {
    e.preventDefault();
    $(this).tooltip('hide');
    $(".appendClass:first").clone(true).appendTo(".addFiles");
    $('.closeFilesBtn').show();
    $('.closeFilesBtn:first').hide();
    //$fileInput = $('.input-upload');
    //$fileInput.replaceWith( $fileInput = $fileInput.clone( true ) );
    //$('.input-upload').fileinput('clear').fileinput();
    $('.uploadFile').next().trigger('reset');
});

Rahul · Accepted Answer · 2017-01-03T09:12:19.180

Here is jsfiddle

Update your js code like this,

$(document).on('click', ".addFilesBtn", function(e) {
  e.preventDefault();
  $(this).tooltip('hide');
  parent_element = $(".appendClass:first");
  $(".input-upload").fileinput('destroy');
  element = parent_element.clone();
  element.appendTo(".addFiles");
  $(".input-upload").fileinput();

  $('.closeFilesBtn').show();
  $('.closeFilesBtn:first').hide();
  //$fileInput = $('.input-upload');
  //$fileInput.replaceWith( $fileInput = $fileInput.clone( true ) );
  //$('.input-upload').fileinput('clear').fileinput();
  //$('.uploadFile').next().trigger('reset');
});

And please write your code to update ids of every elements which will be cloned.

EDIT

$(document).on('click', ".addFilesBtn", function(e) {
  e.preventDefault();
  $(this).tooltip('hide');
  $(".has_clone").each(function() {
    $this = $(this);
    var parent_element = $(this).closest(".appendClass");
    var $element = parent_element.clone();
    $element.find(".file-input").remove();
    var counter = parseInt($("#counter").val()) + 1;
    $element.find(".col-md-9").append('<input placeholder="Select Files" id="input-' + counter + '" name="input2[]" type="file" class="file dynamic_clone input-upload " data-show-upload="false" data-show-preview="false">');
    $("#counter").val(counter);
    $element.appendTo(".addFiles");
    $(".input-upload").fileinput({
      'showPreview': true
    });
  });
$('.closeFilesBtn').show();
  $('.closeFilesBtn:first').hide();
});

//Close addFile div - Upload files
$(document).on('click', ".closeFilesBtn", function(e) {
  e.preventDefault();
  $(this).closest(".appendClass").hide();
});

Thanks

@V for Vendetta Thanks for posting the answer! I saw the fiddle ; actually in the fiddle on clicking the add button, the previous input's value is also getting removed as you have called the `destroy()` method. Any idea how to have `destroy()` method invoked on next `.input-upload` class except the first one. e.g. something like `$('.input-upload:next').destroy()` ??? — Jestino Sam, Jan 03 '17 at 06:54
@V for Vendetta Perfect.. Works exactly the way I wanted. Had been spending hours for searching a solution on this problem. Thanks again ! — Jestino Sam, Jan 03 '17 at 09:17

Bootstrap File Upload clone

1 Answers1