jquery - handle posted formData object with files and other inputs in php

I need to handle inputs from form post and I have no idea, how to do it in php, because when I write for example $_POST["header"], it var_dumps null.

I am creating formData object and inserting all inputs from form. Then posting it with ajax.

Can you please help me? I need to handle "header", "content", "password" and files.

<form method="post" enctype="multipart/form-data" id="uploadFiles">
    <label for="newsHeader" id="headerLabel">Nadpis</label>
    <input type="text" name="newsHeader" id="newsHeader">
    <label for="content" id="contentLabel">Text novinky</label>
    <textarea name="content" id="content"></textarea>
    <label for="files" id="filesLabel">Fotky</label>
    <input type="file" name="files" id="files" accept="image/jpeg" multiple>
    <label for="password" id="passwordLabel">Heslo pro upload</label>
    <input type="text" name="password" id="password">
    <button type='submit' id='uploadFilesSubmit'>NAHR??T</button>
</form>



$("#uploadFiles").submit(function(event){
        event.preventDefault();
        var formDataObj = new FormData(),
        header = $("#newsHeader").val(),
        content = $("#content").val(),
        password = $("#password").val();

        formDataObj.append("header", header);
        formDataObj.append("content", content);
        formDataObj.append("password", password);
        $.each($("#files")[0].files, function(i, file) {
            formDataObj.append('file', file);
        });

        console.log(Array.from(formDataObj));


        $("#uploadFilesSubmit").html("<div class='buttonSubmitIcon'><i class='fas fa-sync'></i></div>");
        $.ajax({
            method: "POST",
            url: "uploadNews.php",
            data: {
                formDataObj: formDataObj
            },
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function(results){

            }, error: function(){

            }

        });


    });

In uploadNews.php I have this:

exit(json_encode(var_dump($_POST["header"])));

It always returns "Undefined index: header", same as content or count($_FILES["file"]["name"])

All I want is to get somehow to posted values.. Thank you very much

Solution:

You just to pass the actual formDataObj variable via your $.ajax. This is not the correct syntax to pass FormData via ajax => formDataObj: formDataObj

A FormData itself is an object which stores your data so what you are doing is making another object on top of it when you pass it via data

You can now var_dump(header) or var_dump($_FILES["file"]["name"]) to see everything coming to your PHP file.

Live Demo: (Change you jQuery code to this below and it will just work fine)

$("#uploadFiles").submit(function(event) {
  event.preventDefault();

  var formDataObj = new FormData(),
    header = $("#newsHeader").val(),
    content = $("#content").val(),
    password = $("#password").val();

  formDataObj.append("header", header);
  formDataObj.append("content", content);
  formDataObj.append("password", password);

  $.each($("#files")[0].files, function(i, file) {
    formDataObj.append('file', file);
  });

  $("#uploadFilesSubmit").html("<div class='buttonSubmitIcon'><i class='fas fa-sync'></i></div>");
  $.ajax({
    method: "POST",
    url: "uploadNews.php",
    data: formDataObj, //just pass the form Data object.
    dataType: 'json',
    contentType: false,
    processData: false,
    success: function(results) {

    },
    error: function() {

    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" id="uploadFiles">
  <label for="newsHeader" id="headerLabel">Nadpis</label>
  <input type="text" name="newsHeader" id="newsHeader">
  <label for="content" id="contentLabel">Text novinky</label>
  <textarea name="content" id="content"></textarea>
  <label for="files" id="filesLabel">Fotky</label>
  <input type="file" name="files" id="files" accept="image/jpeg" multiple>
  <label for="password" id="passwordLabel">Heslo pro upload</label>
  <input type="text" name="password" id="password">
  <button type='submit' id='uploadFilesSubmit'>NAHR??T</button>
</form>