file upload progress bar - ruby-on-rails

Question

i need to create a progress bar for my form ,
i want when the user click on submit button a progress bar appear and start uploading the mp3
i m using ruby on rails and paperclip gem
here is my code
<% provide(:title, "Upload") %>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(#song, url: upload_path ) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.label :title, t('song.title') %>
<%= f.text_field :title, class: 'form-control', required: true %>
<%= f.label :artist, t('song.artist') %>
<%= f.collection_select :artist_id, #artists, :id, :name, {prompt: "Select a Artist"}, {class: "form-control selectpicker", "data-live-search" => "true", "required" => "true" } %>
<%= f.label :mp3, t('song.mp3') %>
<%= f.file_field :mp3 %>
</br>
<%= f.submit t('song.submit'), class: "btn btn-primary", data: { disable_with: 'Uploading'} %>
<% end %>
</div>
</div>
thanks
Edit 1 :
<% provide(:title, "Upload") %>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(#song, url: upload_path ) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.label :title, t('song.title') %>
<%= f.text_field :title, class: 'form-control', required: true %>
<%= f.label :artist, t('song.artist') %>
<%= f.collection_select :artist_id, #artists, :id, :name, {prompt: "Select a Artist"}, {class: "form-control selectpicker", "data-live-search" => "true", "required" => "true" } %>
<%= f.label :mp3, t('song.mp3') %>
<%= f.file_field :mp3, required: true, multiple: true, name: 'song' %>
<div class="progress-wrapper">
<p>Bitrate: <span class="bitrate"></span></p>
<div class="progress">
<div class="progress-bar" role="progressbar">
0%
</div>
</div>
</div>
</br>
<%= f.submit t('song.submit'), class: "btn btn-primary", data: { disable_with: 'Uploading'} %>
<% end %>
</div>
</div>
<script>
$(document).ready(function() {
var upload = $('#new_song');
var wrapper = upload.find('.progress-wrapper');
var progress_bar = wrapper.find('.progress-bar');
var bitrate = wrapper.find('.bitrate');
upload.fileupload({
dataType: 'script',
add: function (e, data) {
types = /(\.|\/)(mp3)$/i;
file = data.files[0];
if (types.test(file.type) || types.test(file.name)) {
data.submit();
}
else { alert(file.name + " must be mp3 file"); }
}
});
upload.on('fileuploadstart', function() {
wrapper.show();
});
upload.on('fileuploaddone', function() {
wrapper.hide();
progress_bar.width(0); // Revert progress bar's width back to 0 for future uploads
});
upload.on('fileuploadprogressall', function (e, data) {
bitrate.text((data.bitrate / 1024).toFixed(2) + 'Kb/s');
var progress = parseInt(data.loaded / data.total * 100, 10);
progress_bar.css('width', progress + '%').text(progress + '%');
});
});
</script>
this is my try but not working
it give me error :
undefined method `permit' for # Did you mean? print
and the Bitrat not showing
http://img3.stooorage.com/images/669/20501499_screenshot-14--2016-west-08-02-14.png