File Upload not working, additional post data not being sent

[Lea Fairbanks]

Hi Everyone,

I am trying to post some additional data along with a file upload, and I am basically trying to extend the Basic Plus UI to do it.  I am running into trouble because the extra post data, nor any files, are coming to the server.

I am using Google Chrome to troubleshoot, and when I upload a file, the request headers look like this:

1. POST /admin/orders/upload_document HTTP/1.1
2. Host: www.mysite.me
   Connection: keep-alive
   Content-Length: 88
   Accept: application/json, text/javascript, */*; q=0.01
   Origin: http://www.mysite.me
   X-Requested-With: XMLHttpRequest
   User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36
   Content-Type: text/plain;charset=UTF-8
   Referer: http://www.mysite.me/admin/orders/documents/008778031A11C61498CBD721410891589356
   Accept-Encoding: gzip,deflate
   Accept-Language: en-US,en;q=0.8
   Cookie: filters_open=true; com_mysite_id=lln7rpdkodvvt29emj63rv80v2; core_ITJ01FIgyRd9N7uyY9hUdohLxRU9LWq7=5691f1842d13c60f6649f77257a61aac
   
   Request Payload
   
3. [object FormData]&core_btZyx4ZsXBL7KJxqyWfC5chB5K72rpDm=5691f1842d13c60f6649f77257a61aac

I would expect it to list the files in Request Payload with the ------WebKitFormBoundary dividers, but it is not. It just uses [object FormData] which I have never seen before.

Additionally, the following code:

var_dump($_POST);

    array (size=0)  empty

var_dump($_REQUEST);
    array (size=1)  '/admin/orders/upload_document' => string '' (length=0)

var_dump($_FILES);
    array (size=0)  empty

Here's my HTML, basically the demo with two added hidden form inputs:

...

<script src="jquery.ui.widget.js"></script>

<script src="tmpl.min.js"></script>

<script src="jquery.iframe-transport.js"></script>

<script src="jquery.fileupload.js"></script>

<script src="jquery.fileupload-process.js"></script>

<script src="jquery.fileupload-ui.js"></script>

...

<form action="/admin/orders/upload_document" id="fileupload" enctype="multipart/form-data" method="post" accept-charset="utf-8">

<input type="hidden" name="core_btZyx4ZsXBL7KJxqyWfC5chB5K72rpDm" value="5691f1842d13c60f6649f77257a61aac" style="display:none;">

<input type="hidden" name="order_id" value="123">

<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->

<div class="row fileupload-buttonbar">

<div class="col-lg-7">

<!-- The fileinput-button span is used to style the file input field as button -->

<span class="btn btn-success fileinput-button">

<i class="fa fa-plus"></i>

<span>Add files...</span>

<input type="file" name="files[]" multiple="">

</span>

<button type="submit" class="btn btn-primary start">

<i class="fa fa-upload"></i>

<span>Start upload</span>

</button>

<button type="reset" class="btn btn-warning cancel">

<i class="fa fa-ban"></i>

<span>Cancel upload</span>

</button>

<button type="button" class="btn btn-danger delete">

<i class="fa fa-trash"></i>

<span>Delete</span>

</button>

<!--                <input type="checkbox" class="toggle">-->

<!-- The global file processing state -->

<span class="fileupload-process"></span>

</div>

<!-- The global progress state -->

<div class="col-lg-5 fileupload-progress fade">

<!-- The global progress bar -->

<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">

<div class="progress-bar progress-bar-success" style="width:0%;"></div>

</div>

<!-- The extended global progress state -->

<div class="progress-extended">&nbsp;</div>

</div>

</div>

<!-- The table listing the files available for upload/download -->

<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

</form>

Additionally I have all the templates copied from the demo.

Here's my very simple JS

$('#fileupload').fileupload({

        url: '/admin/orders/upload_document',

});

$('#fileupload').bind('fileuploadsend', function (e, data) {

console.log(data.formData(data.form));

});

That console log in the fileuploadsend outputs this, which seems to be correct (but is missing files, should it be?): 

[Object, Object]
0: Object
    name: "core_btZyx4ZsXBL7KJxqyWfC5chB5K72rpDm"
    value: "5691f1842d13c60f6649f77257a61aac"
1: Object
    name: "order_id"
    value: "123"
...

Additionally, Jquery's $.post is extended to append the csrf token core_btZyx4ZsXBL7KJxqyWfC5chB5K72rpDm=5691f1842d13c60f6649f77257a61aac to the request, but it doesn't seem like fileupload is using it.

I have tried 

• No additional post data (still doesn't work)
• using inputs on the form, seen here
• manually adding the data by hooking the fileuploadsend event
• All methods of attaching extra form data suggested in the wiki
• eliminating all extra fileupload javascript files; jquery.fileupload.js and jquery.fileupload-ui.js remained

What am I missing?

Thanks!

Lea Fairbanks

[Lea Fairbanks]

Alright, I fixed it.  It's always as soon as you ask for help that you fix it.

As I mentioned in my post, the system adds the csrf token automatically to ajax posts.  It was treating the data as a string and appending it like follows:

if(!options.data)

     options.data = '';

options.data += '&'+this.getToken()+'='+this.getHash();

I added a check to see if options.data instanceof FormData and appended it otherwise.

if (options.data instanceof FormData) {

    options.data.append(this.getToken(), this.getHash());

} else {

    if(!options.data)

options.data = '';

    options.data += '&'+this.getToken()+'='+this.getHash();

}

The code probably doesn't apply to anyone else, though.  So as to not make this thread a complete waste, can anyone suggest how to make this better or more complete/capable?