javascript add form model name to formdata

Question

Update: Here is how to add files by dropping from computer on folders in treeview widget from kartik:

 function allowDrop(event) {
        event.preventDefault();
    }

    function drop(event) {
        event.preventDefault();
        var dropFiles = event.dataTransfer.files;
        event.target.click();
            setTimeout(function(){
                var formData = new FormData();
                $.each(dropFiles, function(i, file){  
                    formData.append('Files[files][]',file);  //Files[files][] is the key to making this work with kartik treeview widget
                });                  

                $.ajax({
                       url : '/files/upload-files',
                       type : 'POST',
                       data : formData,
                       processData: false,  // tell jQuery not to process the data
                       contentType: false,  // tell jQuery not to set contentType
                       success : function(data) {
                           // console.log(data);
                       }
                });
            }, 1000);
    }

    function highlightToggle(event) {
        event.preventDefault();
        event.target.classList.toggle("highlightDrop");
    }

Original problem and question:

Given a form created by this code:

echo $form->field($modalModel, 'files[]')->fileInput(['multiple' => true]); ?>

creates a form like this:

<input type="file" id="files-files" name="Files[files][]" multiple="">

and produces formdata like this: (note the 'files' array within the 'Files' array)

  array(1) {
["Files"]=>
array(5) {
  ["name"]=>
  array(1) {
    ["files"]=>
    array(1) {
      [0]=>
      string(15) "Skjermbilde.PNG"
    }
  }
  ["type"]=>
  array(1) {
    ["files"]=>
    array(1) {
      [0]=>
      string(9) "image/png"
    }
  }
  ["tmp_name"]=>
  array(1) {
    ["files"]=>
    array(1) {
      [0]=>
      string(18) "/run/tmp/phpOAvRyO"
    }
  }
  ["error"]=>
  array(1) {
    ["files"]=>
    array(1) {
      [0]=>
      int(0)
    }
  }
  ["size"]=>
  array(1) {
    ["files"]=>
    array(1) {
      [0]=>
      int(75933)
    }
  }
}

how can I generate the exact same formatted data with javascript? (no form)

here is my attempt:

                var formData = new FormData();
            $.each(dropFiles, function(i, file){  
            formData.append('Files[]',file);                     
            // formData.append('Files[]',file, file['name']);//no difference                     
            // formData.append('Files[files[]]',file, file['name']);//no data submitted                      
            });

and result:

  array(1) {
["Files"]=>
array(5) {
  ["name"]=>
  array(1) {
    [0]=>
    string(16) "Skjermbilde1.PNG"
  }
  ["type"]=>
  array(1) {
    [0]=>
    string(9) "image/png"
  }
  ["tmp_name"]=>
  array(1) {
    [0]=>
    string(18) "/run/tmp/phpkwxGHp"
  }
  ["error"]=>
  array(1) {
    [0]=>
    int(0)
  }
  ["size"]=>
  array(1) {
    [0]=>
    int(74596)
  }
}

The formdata must have the 'files' element within the 'Files' element to work with the Kartik Treeview File Upload class.

Thank you for any help.

Here is what it looks like when you use the form to upload multiple files:

    ["Files"]=>
array(5) {
  ["name"]=>
  array(1) {
    ["files"]=>
    array(2) {
      [0]=>
      string(16) "Skjermbilde1.PNG"
      [1]=>
      string(15) "Skjermbilde.PNG"
    }
  }
  ["type"]=>
  array(1) {
    ["files"]=>
    array(2) {
      [0]=>
      string(9) "image/png"
      [1]=>
      string(9) "image/png"
    }
  }
  ["tmp_name"]=>
  array(1) {
    ["files"]=>
    array(2) {
      [0]=>
      string(18) "/run/tmp/phpKPbssh"
      [1]=>
      string(18) "/run/tmp/phpBDLxn0"
    }
  }
  ["error"]=>
  array(1) {
    ["files"]=>
    array(2) {
      [0]=>
      int(0)
      [1]=>
      int(0)
    }
  }
  ["size"]=>
  array(1) {
    ["files"]=>
    array(2) {
      [0]=>
      int(74596)
      [1]=>
      int(75933)
    }
  }
}

javascript add form model name to formdata

0 Answers0