ZF2 File Upload progress not working for me

问题

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: