Barra de Progresso no Upload

Olá a todos.!

eu estou fazendo um sistema de uploads, onde utilizo um plugin jquery que faz essa funcao (Jquery Filer), e eu preciso fazer uma barra de progresso do upload, que é enviado por ajax para o php. O upload, e o front estao funcionando, só resta a barra de progresso.

eu queria fazer uma que utilizasse somente javascript, algo com listener (eu acho), só que ja pesquisei um monte e ja tentei uns codigos de outros, só que nada funcionou.

Na propria documentação do plugin tem uma menção à ProgressBar, só que eu nao consegui, e nao acho ninguem que conheca esse plugin pra me dar uma luz. segue o código que eu fiz...

$('.file_input').filer({
maxSize: 5120,
limit: 10,
showThumbs: true,
templates: {

 box: '<ul class="jFiler-item-list"></ul>',
 item: '<li class="jFiler-item">\
 <div class="jFiler-item-container">\
 <div class="jFiler-item-inner">\
 <div class="jFiler-item-thumb">\
 <div class="jFiler-item-status"></div>\
 <div class="jFiler-item-info">\
 <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
 </div>\
 {{fi-image}}\
 </div>\
 <div class="jFiler-item-assets jFiler-row">\
 <ul class="list-inline pull-left">\
 <li><span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span></li>\
 </ul>\
 <ul class="list-inline pull-right">\
 <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
 </ul>\
 </div>\
 </div>\
 </div>\
 </li>',
 itemAppend: '<li class="jFiler-item">\
 <div class="jFiler-item-container">\
 <div class="jFiler-item-inner">\
 <div class="jFiler-item-thumb">\
 <div class="jFiler-item-status"></div>\
 <div class="jFiler-item-info">\
 <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
 </div>\
 {{fi-image}}\
 </div>\
 <div class="jFiler-item-assets jFiler-row">\
 <ul class="list-inline pull-left">\
 <span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span>\
 </ul>\
 <ul class="list-inline pull-right">\
 <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
 </ul>\
 </div>\
 </div>\
 </div>\
 </li>',
 progressBar: '<div class="bar"></div>',
 itemAppendToEnd: true,
 removeConfirmation: true,
 _selectors: {
 list: '.jFiler-item-list',
 item: '.jFiler-item',
 progressBar: '.bar',
 remove: '.jFiler-item-trash-action',
 }
 },
 addMore: true,
 captions: {
 removeConfirmation: "Deseja remover o arquivo?",
 errors: {
 filesLimit: "O limite de arquivos para ser enviado é de {{fi-limit}} arquivos por envio.",
 filesType: "Only Images are allowed to be uploaded.",
 filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.",
 filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
 }
 }
	});

Esse é o código do plugin Jquery.Filer, o código peguei da documentação do próprio.

Agora, o codigo que eu uso pra enviar o formulario por ajax.

// Cria uma variável que vamos utilizar para verificar se o
// formulário está sendo enviado
var enviando_formulario = false;

// Captura o evento de submit do formulário

$('#formUpload').submit(function(){

	// O objeto do formulário
	var obj = this;

	// O objeto jQuery do formulário
	var form = $(obj);

	// O botão de submit
	var submit_btn = $('.enviar');

	// O valor do botão de submit
	var submit_btn_text = submit_btn.html();

	// Dados do formulário
	var dados = new FormData(obj);

	if(form.valid()){
 // Retorna o botão de submit ao seu estado natural
 function volta_submit() {
 // Remove o atributo desabilitado
 submit_btn.removeAttr('disabled');

 // Retorna o texto padrão do botão
 submit_btn.html(submit_btn_text);

 // Retorna o valor original (não estamos mais enviando)
 enviando_formulario = false;
 }

 // Não envia o formulário se já tiver algum envio
 if ( ! enviando_formulario ) {

 // Envia os dados com Ajax
 $.ajax({
 // Antes do envio
 beforeSend: function() {
 // Configura a variável enviando
 enviando_formulario = true;

 // Adiciona o atributo desabilitado no botão
 submit_btn.attr('disabled', true);

 // Modifica o texto do botão
 submit_btn.text('Enviando...');

 // Remove o erro (se existir)
 $('.error').remove();
 },

 // Captura a URL de envio do form
 url: form.attr('action'),

 // Captura o método de envio do form
 type: form.attr('method'),

 // Os dados do form
 data: dados,

 // Não processa os dados
 processData: false,

 // Não faz cache
 cache: false,

 // Não checa o tipo de conteúdo
 contentType: false,

 // Se enviado com sucesso
 success: function( data ) {
 volta_submit();

 // Se os dados forem enviados com sucesso
 if ( data == 'OK' ) {
 swal("Concluído!", "Arquivos enviados com sucesso!", "success");
 } else {
 alert(data);
 // Volta o botão de submit
 volta_submit();

 swal({
 title: "Erro!",
 text: "Falha ao enviar arquivos!",
 type: "error",
 confirmButtonColor: "#78caed",
 confirmButtonText: "OK",
 closeOnConfirm: true
 });
 }
 },
 // Se der algum problema
 error: function (request, status, error){
 // Volta o botão de submit
 volta_submit();

 swal({
 title: "Erro!",
 text: "Falha ao enviar arquivos!",
 type: "error",
 confirmButtonColor: "#78caed",
 confirmButtonText: "OK",
 closeOnConfirm: true
 });
 }
 });
 }
 }
 // Anula o envio convencional
 return false;

	});

Se alguem puder me ajudar, eu agradeço..

Abraços.