File Upload via ajax ends up in php://input

Question

---Solved

By replacing

$.ajax({ // create an AJAX call...
    type: $(this).attr('method'), // GET or POST
    url: $(this).attr('action'), // the file to call
    processData: false,
    cache: false,
    contentType: false,
    data: formData, // get the form data
    beforeSend: function() {
    $(".dynamicContentWindow").load("loading.php"); // hides the window during load
    },
    success: function(data, status) { // on success..
    $(".dynamicContentWindow").html(data); // update the DIV
    contentLoaded(); //recall the catchers for the new page
    },
});

with:

var request = new XMLHttpRequest();
request.open("POST", $(this).attr('action'));
request.send(formData);

solves the problem. However, I do not understand why and I think it is neither explained in another post. If somone would be able to point that out it would be a great relieve.

Heyho everyone, I am quite new to working with jQuery and I am currently trying to establish an asynchronous file upload with ajax. However my requests ends all the time up in the php://input and is not passed to $_POST or $_FILES. I googled the complete day yesterday and tried several things, but I am not able to figure out the problem. The server used is apache 2.2.9 (yes it is actually ready for the museum, but it was not my choice)

The html code is in this case:

<form action="ua_import_files.php" method="POST" enctype="multipart/form-data" class="file">
    <input type="hidden" name="tab_select" value="0" />
    <input type="hidden" name="MAX_FILE_SIZE" value="9999000000" />
    <input type="hidden" name="file_type" value="planview" />
    <input name="uploadedfile" type="file" size="40" style="background:#D0D0D0; font-size:10px;  margin-top:7px;" /></p>
    <br/>
    <br/>
    <input type="submit" value="Upload File" style="font-size:12px; width: 100px; margin-top:7px; float:left;display:block;" />
</form>

the related javascript code is:

$("form").each(function() {
    if($(this).attr('class') == "file") {
        $(this).submit(function(e){
        e.preventDefault(); // cancel original event to prevent form submitting
        console.log("File Upload, FileReader: " + window.FileReader + "FormData: " + window.FormData);
        var form = new FormData(this);
        console.log(form);
        $.ajax({ // create an AJAX call...
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            beforeSend: function() {
                $(".dynamicContentWindow").load("loading.php"); // hides the window during load
            },
            success: function(data, status) { // on success..
                $(".dynamicContentWindow").html(data); // update the DIV
                contentLoaded(); //recall the catchers for the new page
            },
            data: form, // get the form data
            processData: false,
            contentType: false,
            cache: false
            }); 
        });
    }
});

Hereby the console.log() produces an output as well. But if I then dump $_FILES or $_POST on the server I get in both cases empty arrays. However, when dumping file_get_contents("php://input") i get this:

string(2941129) "-----------------------------29431251527956 Content-Disposition: form-data; name="tab_select" 0 -----------------------------29431251527956 Content-Disposition: form-data; name="MAX_FILE_SIZE" 9999000000 -----------------------------29431251527956 Content-Disposition: form-data; name="file_type" exp -----------------------------29431251527956 Content-Disposition: form-data; name="uploadedfile"; filename="file.exp" Content-Type: application/octet-stream EXP op 2015-08-13T00:00:00.000Z 2016-01-01T00:00:00.000Z XXX XXX ..."

(I only but some of the string in here) I already checked the config files, which should give enough resources to the server to process the request:

memory_limit = 128M;
max_execution_time = 3600; 
max_input_time = 600;
upload_max_filesize = 30M
post_max_size = 100M

I assume, that I have either something wrong with the headers, which stops the server of parsing the data or another mistake in the config,w hich I did not found yet. Does anyone has an idea?

possible duplicate of [jQuery Ajax File Upload](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — Kristiyan, Aug 19 '15 at 07:35
`$(this).submit(function(e){` what is `$(this)` in here? is this denotes `form`? How many forms do you have? — Jai, Aug 19 '15 at 07:45
I added the $("form").each(function(){}); in the code to explain the $(this) statement. — Jendrik, Aug 19 '15 at 08:12

score 1 · Answer 1 · answered Aug 19 '15 at 07:38

Try this code .Give your id form id

var formData = new FormData($('#yourformid')[0]);

$.ajax({

        type: $(this).attr('method'),
        url:  $(this).attr('action'),
        data: formData,
        async: false,
        cache: false,
        processData: false,
        contentType: false,
        beforeSend: function() {
        $(".dynamicContentWindow").load("loading.php"); // hides the window during load
    },
    success: function(data, status) { // on success..
              your code 

        }
      });

call phpinfo(); and see upload_max_filesize override or not .

Jai · Answer 2 · 2015-08-19T08:06:30.447

You have some issues with your code:

if($(this).attr('class') == "file") { // <---what $(this) is here
    $(this).submit(function(e){ // what $(this) in here? is it one of many forms?

now here you have to set the file which you want to upload but you are not doing it.

    var form = new FormData(this); // <---what this belogs here.

There are several other issues as well. so lets get to the solution:

  $('.file').submit(function(e) { // submit the actual form
      e.preventDefault();
      var form = new FormData(this); // pass this as a reference to the form
      form.append('file', form.files[0]); //<----append the file here
      $.ajax({
        type: $(this).attr('method'), // <----form method as type in ajax
        url: $(this).attr('action'), // <-----form action as a url in ajax
        beforeSend: function() {
          $(".dynamicContentWindow").load("loading.php");
        },
        success: function(data, status) {
          $(".dynamicContentWindow").html(data);
          contentLoaded();
        },
        data: form, //<------------sending form which have `file` as a key to the file name
        processData: false,
        contentType: false,
        cache: false
      });
  });

You don't have to check for the class name of the form class="file" and you just submit the form and make formData with FormData(this) and pass this as a reference to the submitting form then append the file with a key : value pair as form.append('file', form.files[0]);.

As a side note:

console.log(form);

You can't see everything in the console but better to check the network tab of your browser, where you can see in the headers all information about the sent formdata.

I tried this, but when I try to call form.append('file', form.files[0]); I get the error: TypeError: formData.files is undefined. I thought as well, that the file is already added to the FormData by passing this to the constructor or am I wrong? — Jendrik, Aug 19 '15 at 08:27
Have you tried without appending it? i guess you are right as the form is inside the formdata so append is not needed. — Jai, Aug 19 '15 at 08:29
Yes I tried it without it, but it is still the same error. They arrive, but only in the php://input. — Jendrik, Aug 19 '15 at 08:31
Oky, I thought it does that by default, thanks then I will do that :) — Jendrik, Aug 19 '15 at 08:36

File Upload via ajax ends up in php://input

2 Answers2