Blueimp file upload plugin, progress bar completes before file is uploaded - php

Question

I'm using this plugin to upload files:
https://github.com/hashmode/cakephp-jquery-file-upload
The upload works, but the progress bar always completes before the file is uploaded. Prior to using this plugin, I attempted to use the blueimp uploader standalone. I had the same problem.
Any idea how to make the progress bar work properly?
I'm testing this via a proxy. I can see the proxy is still awaiting the response. Yet the progress bar is 100%.
This is the code I'm using in my view:
<?php echo $this->JqueryFileUpload->loadCss(); ?>
<?php echo $this->JqueryFileUpload->loadScripts(); ?>
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="header">
<h4 class="title">Import Session Data</h4>
<p class="category">category text</p>
</div>
<div class="content">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Select files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
</div>
<div class="footer">
<hr>
<div class="stats">
<i class="fa fa-history"></i> footer
</div>
</div>
</div>
</div>
</div>
<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = '/sessions/import';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
},
success: function(response) {
var json = $.parseJSON(response);
alert(json['message']);
}
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
In my controller I have:
public function import()
{
if ($this->request->is('post')) {
$options = array(
'max_file_size' => 2048000,
'max_number_of_files' => 10,
'access_control_allow_methods' => array(
'POST'
),
'accept_file_types' => '/\.(png|jpg)$/i',
'upload_dir' => '../uploads/workbench/', //WWW_ROOT . 'files' . DS . 'uploads' . DS,
'upload_url' => '/files/uploads/',
'print_response' => false
);
$result = $this->JqueryFileUpload->upload($options);
print_r($result);
die();
}
}

Answer 1

Solved. It was something to do with me using a proxy. When I removed the proxy it worked fine. No idea why that happens though.