$_FILES is not populated with file when called through AJAX

Question

I am using simple ajax call to submit form data where I am trying to POST some form inputs along with an file.

    $("#submit-uploaded-audio").on("click", function () {
    var post_data = new FormData();
    var file = $("#audio_file").prop('files')[0];

    post_data.append('key1', 'value1');
    post_data.append('key2', 'value2');
    post_data.append('file', file);

    $.ajax({
        url: "/process_audio_upload",
        type: "POST",
        data: post_data,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
            console.log(data);
            // some logic
        },
        error: function(error) {
            // some logic here
        }
    });
});

Ajax call goes to the server url (codeigniter framework) but data posted in call is not getting populated into $_POST as well as $_FILES (both arrays are empty)

Checked php.ini settings and file upload settings looks good

However, "php://input" shows required data in raw format

var_dump(file_get_contents("php://input"));

I want to get this data into respective $_POST and $_FILES array so that I can do further actions.

Thanks in advance.

Also tried following solutions

https://stackoverflow.com/a/10899796/4349933

Does `console.log(post_data)` display the data you want to _POST_? — CPHPython, Jan 30 '18 at 09:38
@CPHPython Yes, it does also transfer required data to server. but in raw input stream instead of super-global variables $_POST & $_FILES — Danish, Jan 30 '18 at 12:34

CPHPython · Answer 1 · 2018-01-30T14:13:15.710

1

It may be related to the post_data variable being empty, since you are creating an empty FormData and then it may be attempting to append through jQuery append, which was designed to append HTML elements...

Try simply doing:

post_data.key1 = 'value1';
post_data.file = file;
console.log(post_data);

And that should return:

FormData {key1: "value1", file: {...}}

If the FormData.append is not working properly, I'd try not using jQuery just for a test and do Javascript default requests.

Edit: Test if the URL is the right one

Since the post_data seems to be alright, then perform a POST request through another website (e.g. hurl.it) by using the same URL, i.e. yourdomain.here/process_audio_upload. If nothing comes back, it's likely that the URL routing is the issue.

edited Jan 30 '18 at 14:13

answered Jan 30 '18 at 09:48

CPHPython

12,379
5
59
71

1

I used suggested way to create FormData obj. It prints all key-value as expected in my console but still no data received at server end. – Danish Jan 30 '18 at 12:31
Using your browser's Developer Tools is another way to see what is being sent to what url. Check the request headers. – DFriend Jan 30 '18 at 14:16
If you see the question, I have mentioned that I am getting the data into input stream at server end. Its just an issue that data is raw and I need to get it in $_POST and $_FILES for further processing – Danish Feb 01 '18 at 06:25

score 0 · Answer 2 · answered Jan 30 '18 at 11:23

Try this code:

$("#submit-uploaded-audio").on("click", function () {
    var post_data = new FormData();
    var file = document.getElementById('audio_file').files[0];

    post_data.append('key1', 'value1');
    post_data.append('key2', 'value2');
    post_data.append('file', file);

    $.ajax({
    url: "/process_audio_upload",
    method: "POST",
    data: post_data,
    contentType: false,
    processData: false,
    success: function(data) {
        console.log(data);
        // some logic
    },
    error: function(error) {
        // some logic here
    }

    });
});

Now try by printing print_r($_FILES) and print_r($_POST)

I noticed you are using 'type' parameter instead 'method'. So try this code. I have made few changes.

no success. Still getting empty arrays for both $_FILES and $_POST. Also tried changing "type" to "method" — Danish, Jan 30 '18 at 12:26

score 0 · Answer 3 · answered Jan 30 '18 at 14:15

Try creating the formData object by passing the <form> element to the constructor. For instance, given this html

<form id='a-form' ...>

and assuming that key1 and key2 are the names of <input> elements in the <form> do this

$("#submit-uploaded-audio").on("click", function () {
    var form = document.getElementById('a-form');
    var post_data = new FormData(form);

    $.ajax({
    url: "/process_audio_upload",
    method: "POST",
    data: post_data,
    //etc ...

Good docs HERE

score 0 · Answer 4 · answered Jul 23 '19 at 12:17

After lot of hassle on this, I actually ended up with workaround. Now I am directly uploading file to S3 bucket using "dropzone js" library and which in-turns places file to S3 bucket.

If needed to manipulate file info or store file meta-data on server (like size, name etc) - I am using on_success callback handler of dropzone which can pass on control to server (AJAX call) and access previously uploaded S3 file to further manipulate.

NOTE: I know this may not be the answer for question, but that's what I did. I hope it helps if someone is in same situations and none of the above answers helped you.

$_FILES is not populated with file when called through AJAX

4 Answers4

Edit: Test if the URL is the right one