php - get file data after cloned input field

Question

I have form with input file which can be cloned by specific button.

when i choose some file, clone the input field, and choose new file (in the new input field) and submit, i'm not getting all the first file data in the ajax file.

Here is the html in the main page:

<a href="#" class="clone-ele-btn" data-target="clone_box" data-des="clone_des">Clone</a>
<form action="#" method="post" enctype="multipart/form-data">

    <span id="clone_box">
        <input type='file' name='file[]' />
    </span>

    <span id="clone_des"></span>    

    <a href="#" class="new-files-btn">Submit</a>
    
</form>

JQUERY:

// CLONE FILE INPUT FIELD
$(document).on("click", ".clone-ele-btn", function(e){

    var target = $(this).data("target");
    var des = $(this).data("des");
    
    $( "#" + target ).clone().appendTo( "#" + des );

    e.preventDefault(); 
});

// UPLOAD FILES
$(document).on("click", ".new-files-btn", function(e){

    var form = $(this).closest('form')[0]; 
    var formData = new FormData(form);
    
    
    $.ajax ({
        type: 'POST',
        url: 'ajax/files-control.php',
        data: formData,
        dataType: 'json',
        contentType: false,
        cache: false,
        processData:false
        }).done(function(data) 
        { 
        ....
        ...
        ..

files-control.php:

<?PHP
   var_dump ($_FILES);
?>

NETWORK DEBUG:

C:\wamp3\www\folder\ajax\files-control.php:13:
array (size=1)
  'file' => 
    array (size=5)
      'name' => 
        array (size=2)
          0 => string 'IMG_8913.JPG' (length=12)
          1 => string 'I-dont-have.jpg' (length=36)
      'type' => 
        array (size=2)
          0 => string '' (length=0)
          1 => string 'image/jpeg' (length=10)
      'tmp_name' => 
        array (size=2)
          0 => string '' (length=0)
          1 => string 'C:\wamp3\tmp\php36B6.tmp' (length=24)
      'error' => 
        array (size=2)
          0 => int 1
          1 => int 0
      'size' => 
        array (size=2)
          0 => int 0
          1 => int 50906

Does this answer your question? [Change the maximum upload file size](https://stackoverflow.com/questions/2184513/change-the-maximum-upload-file-size) — Markus Zeller, Aug 04 '20 at 05:18

Markus Zeller · Accepted Answer · 2020-08-04T05:17:52.593

1

Not tested, but try to create new input field instead of cloning the old one.

let el = document.createElement('input');
el.type = 'file';
el.name = 'file[]';
document.getElementById('clone_box').appendChild(el);

The jQuery way

$("#clone_box").append('<input type="file" name="file[]">');

Update

It is not the field, it is the file itself which makes the problem. It is too large and exceeds the php.ini upload limit.

UPLOAD_ERR_INI_SIZE
Value: 1; The uploaded file exceeds the upload_max_filesize directive in php.ini.

So you need to adapt your php.ini settings or overload it in a .htaccess file.

edited Aug 04 '20 at 05:17

answered Aug 03 '20 at 18:36

Markus Zeller

8,516
2
29
35

good solution. i"ll try that...by the way - can you write your code in jquery instead of js? – roi Aug 03 '20 at 19:05
Sorry, I don't use it anymore and not sure about correct syntax. JQuery is just a wrapper of Vanilla JavaScript, but that code will work on any browser. I've looked up and updated the answer. – Markus Zeller Aug 03 '20 at 19:30
well, i tried to create new instead of clone - not working :/ – roi Aug 03 '20 at 20:30
Please see my answer updated. It is not the fields problem. The file is too large! – Markus Zeller Aug 04 '20 at 05:12

php - get file data after cloned input field

1 Answers1

Update