I'm trying to upload files on one of our pages. It's multiupload and I need to track the progress as well. The problem is my XHR request for progress details returns "No upload in progress" message.
So here is the code:
js:
$file.on('change', function(e) {
e.preventDefault();
$('#upload-button').prop('disabled', 'disabled');
hideErrors();
hideProgress();
if ($file.val() == '') {
showErrors('No file(s) selected');
return;
}
//$.fn.ajaxSubmit.debug = true;
$(this).closest("form").ajaxSubmit({
url: '/task/upload-attachments',
target: '#output',
success: function (response, statusText, xhr, $form) {
$('#upload-button').removeProp('disabled');
if (response.status == 'success') {
var attachmentNames = $attachmentNames.val().split('###');
$.each(response.attachments, function(key, attachment) {
attachmentNames.push(attachment);
$('#attachments-list').append(
'<li class="attachment-item attachment-temp">' +
'<div class="btn-group">' +
'<a href="#" class="btn btn-sm btn-default dropdown-toggle attachment-btn" data-toggle="dropdown" aria-expanded="false">' +
'<span class="glyphicon glyphicon-paperclip"></span> ' + attachment + ' <span class="caret"></span>' +
'</a>' +
'<ul class="dropdown-menu" role="menu">' +
'<li>' +
'<a href="#" class="delete-attachment-btn">' +
'<span class="glyphicon glyphicon-remove-circle text-danger"></span> Delete' +
'</a>' +
'</li>' +
'</ul>' +
'</div>' +
'</li>'
)
});
$attachmentNames.val(attachmentNames.join('###'));
}
$file.val('');
},
error: function(a, b, c) {
$('#upload-button').removeProp('disabled');
$file.val('');
}
});
startProgress();
});
Server side handling (PHP):
public function sessionProgressAction()
{
$id = $this->params()->fromQuery('id', null);
$progress = new ProgressBar\Upload\SessionProgress();
$view = new JsonModel([
'id' => $id,
'status' => $progress->getProgress($id),
]);
return $view;
}
public function uploadAttachmentsAction()
{
$form = new TaskUploadForm('task-files');
$request = $this->getRequest();
$files = [];
$attachmentNames = [];
if ($request->isPost()) {
// Postback
$data = array_merge_recursive(
$request->getPost()->toArray(),
$request->getFiles()->toArray()
);
$form->setData($data);
if ($form->isValid()) {
$files = $form->getData()['file'];
foreach ($files as $file) {
$attachmentNames[] = pathinfo($file['tmp_name'], PATHINFO_BASENAME);
}
}
}
if (count($files)) {
return new JsonModel([
'status' => 'success',
'msg' => 'Attachment successfully added.',
'attachments' => $attachmentNames
]);
} else {
return new JsonModel([
'status' => 'error',
'msg' => 'Failed to upload attachments.'
]);
}
}
Serverside Form Class:
public function addElements()
{
// File Input
$file = new Element\File('file');
$file
->setLabel('File Input')
->setAttributes([
'id' => 'file',
'multiple' => true,
]);
$this->add($file);
// Progress ID hidden input is only added with a view helper,
// not as an element to the form.
}
public function createInputFilter()
{
$inputFilter = new InputFilter\InputFilter();
// File Input
$file = new InputFilter\FileInput('file');
$file->setRequired(true);
$file->getFilterChain()->attachByName(
'filerenameupload',
[
'target' => Constants::UPLOAD_TMP . 'attachment',
'overwrite' => true,
'randomize' => true,
'use_upload_name' => true
]
);
// Allowed extensions
$file->getValidatorChain()->attachByName(
'fileextension',
[
'doc', 'docx', 'xls', 'xlsx', 'pdf', 'csv', 'png', 'jpg', 'gif', 'ods', 'odt', 'ott', 'txt'
]
);
$inputFilter->add($file);
return $inputFilter;
}
I have checked the PHP configuration and set appropriate options:
session.upload_progress.enabled = On session.upload_progress.freq = "1%" session.upload_progress.min_freq = "1"
And also turned off proxy buffering on nginx.
Can anybody help me out please? Will be much appreciated