javascript - Ajax file upload, $_FILES empty

Question

I'm trying to access a uploaded file that gets posted with AJAX but my $_FILES array is empty. I can still access everything in my $_POST array.

I've seen a bunch of posts regarding similar issues but none of the fixes seemed to work. I've done this multiple times before with no problems and i can't see what could be wrong here.

Here is my HTML form

<form enctype="multipart/form-data" action="include/ajaxCall.inc.php" class="postForm d-flex flex-column" method="post" id="createProduct">
        <input id="createProductImg" type="file" name="post_img" required><br>
        <input id="createProductName" type="text" name="post_name" placeholder="name" required>
        <input id="createProductPrice" type="text" name="post_price" placeholder="price" required>
        <input id="createProductManufactur" type="text" name="post_manufactur" placeholder="manufactur">
        <select id="createProductType" name="post_type"  required>
        </select>
        <select id="clothingsex" name="clothingsex" required>
        <option value="unisex">Unisex</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
        </select>
        <textarea id="createProductDescription" name="post_description" required style="resize: none; placeholder="Write your description here:"></textarea>
        <input type="submit">
    </form>

and here is my ajax

 $("#createProduct").submit(function(event) {
        console.log("log");
            event.preventDefault();
            var form = $(this);
            var url = form.attr('action');
            $.ajax({
                type: "POST",
                url: url,
                data: form.serialize() + "&addProduct=1",
                success: function(data) {
                    console.log(data);
                }
            });
        });

and her is the file that i send the POST to

if (isset($_POST['addProduct'])) {
        echo var_dump($_FILES);
}

question from:https://stackoverflow.com/questions/65902055/ajax-file-upload-files-empty

Answer 1

You need to use FormData instead of serialize() method, it is possible to add addProduct=1 parameter within AJAX URL or append FormData object. What if you make your AJAX call like this :

var form = $('#createProduct')[0];
var formData = new FormData(form);
formData.append('addProduct', '1');
$("#createProduct").submit(function(event) {
    console.log("log");
    event.preventDefault();
    var form = $(this);
    var url = form.attr('action');
    $.ajax({
        type: "POST",
        url: url,
        contentType: false, //THIS IS MANDATORY
        processData: false, //THIS IS MANDATORY
        data: formData,
        success: function(data) {
            console.log(data);
        }
    });
});