Blueimp FileUpload : fileuploadsubmit error in ret

Question

I'm working with the Blueimp FileUpload plugin and all is well apart from when i attempt to capture the response after the image has been uploaded:

var fi = $('#fileupload'); //file input 
    var process_url = '/backoffice/listings/upload-images ';
    var progressBar = $('<div/>').addClass('progress').append($('<div/>').addClass('progress-bar')); //progress bar
    var uploadButton = $('<button/>').addClass('button btn-blue upload').text('Upload');    //upload button

    uploadButton.on('click', function () {
        var $this = $(this), data = $this.data();
         data.submit().always(function () {
                $this.parent().find('.progress').show();
                $this.parent().find('.remove').remove();
                $this.remove();
        });
    });

      fi.fileupload({
            url: process_url,
            dataType: 'json',
            autoUpload: false,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mp4|mp3)$/i,
            maxFileSize: 1048576, //1MB
            disableImageResize: /Android(?!.*Chrome)|Opera/ 
            .test(window.navigator.userAgent),
            previewMaxWidth: 50,
            previewMaxHeight: 50,
            previewCrop: true,
            dropZone: $('#dropzone')
    });

   //other functions work fine

   //Code which needs to comes after submit 
   fi.on('fileuploadsubmit', function (e, data) {    
        console.log('submit');
        console.log(data);

    });

});

a quick glance in the developer console reveals that indeed there's a response text:

but when i attempt to grab the response: console.log(data.jqXHR.responseText);, i get a Uncaught TypeError: Cannot read property 'responseText' of undefined error.

where could i be going wrong?