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);
}

Does this answer your question? [How can I upload files asynchronously?](https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) — Tangentially Perpendicular, Jan 26 '21 at 13:34
You probably can solve your issue by adding the `contentType` in your ajax call to `multipart/form-data`. — Thiago Augustus Oliveira, Jan 26 '21 at 22:12

score 1 · Answer 1 · edited Aug 10 '21 at 05:45

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];
$("#createProduct").submit(function(event) {
    var formData = new FormData(form);
    formData.append('addProduct', '1');
    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);
        }
    });
});

There is a problem with this solution. You append the html form before the actual submit event. — Chris, Jan 27 '21 at 10:01

score 0 · Accepted Answer · answered Jan 27 '21 at 10:01

0

Okay i found the solution. My original code works fine the problem was that i appended the form data before the form was filled.

answered Jan 27 '21 at 10:01

Chris

51
1
5

Ajax file upload, $_FILES empty

2 Answers2