Uploading multiple files using jquery from cloned input fields

Question

I've developed a dynamic add/remove input type file to upload files, it is working well, I needed it to clone same ids and names and it is doing so, the problem is when I hit submit button, it stores only the first input's file and ignore the others, even shows only one file in console network tab's header in binary format, I tried searching but no luck, please guide me Thanks Note: Not using multiple attribute because I want one field to carry only one file at a time...

Here's the code for html:

<div class="row margin-bottom">
  <div class="col-md-12 col-sm-12">
    <button type="button" class="add-box btn btn-info"><span class="glyphicon glyphicon-plus"></span> Add More Fields</button>
  </div>
</div>
<div class="form-horizontal">
  <div class="text-box form-group">
    <div class="col-sm-4"><input type="file" class="form-control" name="documents[]" id="documents"/></div>
  </div>
</div>

here's the code for add/remove fields:

<script type="text/javascript">
$(document).ready(function(){
  $('.add-box').click(function(){
    var n = $('.text-box').length + 1;
    if(n > 5) {
      alert('Only 5 Savy :D');
      return false;
    }
    var box_html = $('<div class="text-box form-group"><div class="col-sm-4"><input type="file" class="form-control" name="documents[]" id="documents" /></div><div class="col-sm-2"><button type="button" class="remove-box btn btn-danger btn-sm"><i class="fa fa-minus-circle fa-lg"></i></button></div></div>');
    $('.text-box:last').after(box_html);
    box_html.fadeIn('slow');
  });

  $('.form-horizontal').on('click', '.remove-box', function(){
    $(this).closest(".form-group").remove();
    return false;
  });
});
</script>

here's the code for submit:

var getDocuments = document.getElementById('documents').files.length;
for (var x = 0; x < getDocuments; x++) {
  formData.append("documents[]", document.getElementById('documents').files[x]);
}

An id must be unique. Use a class instead.

Louys Patrice Bessette
– Louys Patrice Bessette

2021-01-14 23:37:03 +00:00
Commented Jan 14, 2021 at 23:37 — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Jan 14, 2021 at 23:37
can you please write a little example ?

Ali
– Ali

2021-01-14 23:40:13 +00:00
Commented Jan 14, 2021 at 23:40 — Ali
– Ali, Commented Jan 14, 2021 at 23:40
$('.documents').files.length; like this ?

Ali
– Ali

2021-01-14 23:40:57 +00:00
Commented Jan 14, 2021 at 23:40 — Ali
– Ali, Commented Jan 14, 2021 at 23:40

Louys Patrice Bessette · Accepted Answer · 2021-01-15 00:23:52Z

Best would be like this...

Changed #document for .documents... Then you have to loop all the .documents and gather the files in an array... Which you will happend to the FormData.

$(document).ready(function() {
  $('.add-box').click(function() {
    var n = $('.text-box').length + 1;
    if (n > 5) {
      alert('Only 5 Savy :D');
      return false;
    }
    var box_html = $('<div class="text-box form-group"><div class="col-sm-4"><input type="file" class="form-control documents" name="documents[]" /></div><div class="col-sm-2"><button type="button" class="remove-box btn btn-danger btn-sm"><i class="fa fa-minus-circle fa-lg"></i></button></div></div>');
    $('.text-box:last').after(box_html);
    box_html.fadeIn('slow');
  });

  $('.form-horizontal').on('click', '.remove-box', function() {
    $(this).closest(".form-group").remove();
    return false;
  });
});

$("form").on("submit", function(e) {

  e.preventDefault()
  let formData = new FormData()
  
  // get all file object in an array
  let files = []
  $('.documents').each(function() {
    files.push(this.files[0])
    console.log(this.files[0].name)
  })

  // Append the array to the FormData
  formData.append("documents[]", files);
  
  console.log("FORMDATA:",formData.get("documents[]"))
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<form>
  <div class="row margin-bottom">
    <div class="col-md-12 col-sm-12">
      <button type="button" class="add-box btn btn-info"><span class="glyphicon glyphicon-plus"></span> Add More Fields</button>
    </div>
  </div>
  <div class="form-horizontal">
    <div class="text-box form-group">
      <div class="col-sm-4"><input type="file" class="form-control documents" name="documents[]" /></div>
    </div>
  </div>
  <button>Submit</button>
</form>

Ali · Accepted Answer · 2021-01-15 00:12:32Z

0

Just wanted to update : Changed my approach a bit here...

 jQuery.each(jQuery('input[name="documents[]"]'), function(i, value) 
{
    formData.append('documents['+i+']', value.files[0]);
});

That works for me Thanks

answered Jan 15, 2021 at 0:12

Ali

15513 bronze badges

Collectives™ on Stack Overflow

Uploading multiple files using jquery from cloned input fields

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related