File type data not getting in the process page

Question

I am adding the file type dynamically which is working but when I click on submit then I am getting only the first filename in the process page. how to get all the file name in process page? I tried var_dump($_FILES) to check but it is displaying only the first file name.

then I notice that if I remove numberIncr from the name ( name="workpic[]' + numberIncr + '" ) then it's working but my validation not working.

Process.php

if(isset($_FILES)){
echo"<pre>";
//var_dump($_FILES) ;
print_r($_FILES['workpic']['name']);

    foreach($_FILES['workpic']['name'] as $key=>$val){
    $fileName = basename($_FILES['workpic']['name'][$key]); 
     print_r($fileName);
        }
}

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var x = 1; //Initial field counter is 1
  //var count = 2;
  var numberIncr = 1; // used to increment the name for the inputs
  // var addrm = '';

  //Once add button is clicked
  $(document).on('click', '#clicktoadd', function() {
    //Check maximum number of input fields
    if (x < maxField) {
      $(".medication_info").append(' <input type="file" name="workpic[]' + numberIncr + '" class="dynamicVal"><br />');
      x++; //Increment field counter
      numberIncr++;
    }
    // count++;

  });


});

$('#register').on('submit', function(event) {
  event.preventDefault();
  // adding rules for inputs with class 'comment'
  $('.dynamicVal').each(function() {
    $(this).rules("add", {
      required: true
    })
  });
  // test if form is valid 
  if ($('#register').validate().form()) {
    var formData = new FormData(this);
    $.ajax({
      //url:"process.php",
      url: "process2.php",
      type: "POST",
      dataType: "json",
      data: formData,
      contentType: false,
      cache: false,
      processData: false,

      success: function(data) {
        alert("success");
      },
    }); // AJAX Get Jquery statment
  }
  //alert('hellow');
});

$('#register').validate({
  errorPlacement: function(error, element) {
    if (element.is("select")) {
      error.insertAfter(element.parent());
    } else {
      error.insertAfter(element);
    }

  }
});

<div id="clicktoadd"><a href="javascript:void(0);" class="btn btn-bg">Add More</a></div>
<form action="#" method="post" id="register" name="register" enctype="multipart/form-data">
  <div class="row">
    <div class="medication_info">
      <input type="file" name="workpic[]" class="dynamicVal"><br />
    </div>
  </div>

  <input type="submit" name="send" value="submit">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>

Can anyone help me out with this issue?

I am getting this output but I added 3 images and it's displaying only one.

Array
(
    [0] =>bTml75QAfHo-unsplash.jpg
)

Would you help me out in this issue?

score 1 · Accepted Answer · answered May 19 '20 at 15:16

1

You shouldn't put numberIncr after name=workpic[]. Using a name ending in [] will automatically make it an array in PHP. So just do:

      $(".medication_info").append(' <input type="file" name="workpic[]" class="dynamicVal"><br />');

If you need to give specific indexes, rather than letting them automatically increment from 0, you should put the index inside the [] rather than after it.

      $(".medication_info").append(' <input type="file" name="workpic[' + numberIncr + ']" class="dynamicVal"><br />');

answered May 19 '20 at 15:16

Barmar

741,623
53
500
612

You mean I have to remove the numberIncr [] increment from the dynamic field. right? – user9437856 May 19 '20 at 15:19
But the issue is, If I remove the numberIncr[] increment the I will get the issue invalidation. I am using increment because fo the validation. – user9437856 May 19 '20 at 15:20
You can check my question here for validation: https://stackoverflow.com/questions/61883622/which-is-the-best-jquery-validation-for-dynamic-field-and-send-data-to-the-proce – user9437856 May 19 '20 at 15:22
See https://stackoverflow.com/questions/14943121/jquery-validate-dynamic-input-array – Barmar May 19 '20 at 15:23
@Barmat, Actually Mr.Sparky suggest me to use like increment. Give me some time to check your second solution. – user9437856 May 19 '20 at 15:26
I think your the second option is working for me. Let me confirm again – user9437856 May 19 '20 at 15:29
Yes, I tested the second option i.e. name="workpic[' + numberIncr + ']" trick is working perfect for me. Thank you so much for the solution. I am really appreciate your help and support. Upvote from my side. – user9437856 May 19 '20 at 15:39

score 0 · Answer 2 · answered May 18 '20 at 15:36

0

I inspected the form data being send when there are multiple input type="file" added with following code

var formData = new FormData(this);
console.log([...formData.entries()]);

Here's the structure

[
  [
    "workpic[]",
    {
      ...
    }
  ],
  [
    "workpic[]1",
    {
      ...
    }
  ],
  [
    "workpic[]2",
    {
      ...
    }
  ]
]

Based on that you can access files following way

print_r($_FILES['workpic[]']['name']);
print_r($_FILES['workpic[]1']['name']);
print_r($_FILES['workpic[]2']['name']);

Or

foreach($_FILES as $file){
  echo $file['name']; 
}

answered May 18 '20 at 15:36

Józef Podlecki

10,453
5
24
50

I am adding dynamically so I can't use the first option. I tried your forech but I am getting the error Notice: Array to string conversion in /opt/lampp/htdocs/example/process2.php on line 19 Array – user9437856 May 18 '20 at 15:59
the structure is correct. I increment the variable because of the validation. If I remove the increment then it's working but my validation not working. – user9437856 May 18 '20 at 16:00
Check my code, I added a foreach condition which I am using it and also updated the output. – user9437856 May 18 '20 at 16:03
Any more help in this? – user9437856 May 19 '20 at 11:59
What if you replace `workpic[]`, `workpic[]1` with `workpic1`, `workpic2`...? Does it work with for loop? – Józef Podlecki May 19 '20 at 12:00
if I replace workpic1 then how can we get dynamic data in the process page? – user9437856 May 19 '20 at 12:05
And if I use like workpic[] and my validation not working – user9437856 May 19 '20 at 12:06
I asked one question related to the validation here https://stackoverflow.com/questions/61883622/which-is-the-best-jquery-validation-for-dynamic-field-and-send-data-to-the-proce – user9437856 May 19 '20 at 12:08
[Looks like there was similar question asked before](https://stackoverflow.com/questions/5444827/how-do-you-loop-through-files-array) – Józef Podlecki May 19 '20 at 12:13
let me check this out – user9437856 May 19 '20 at 12:19
I checked, That OP is getting issue in count and I am getting the issue how to get the dynamic data in process – user9437856 May 19 '20 at 12:26

File type data not getting in the process page

2 Answers2