Rails + Carrierwave + Jquery Fileupload +simple form - ruby-on-rails

Question

I want to make a simple form to upload an audio file. And i want to show a progress bar of the file uploading when the user submits the file. I only want to submit one file at a time.
My _upload.html.erb:
<%= form_for Sound.new do |f| %>
<%= f.file_field :fichier, name: 'sound[fichier]', :required => true %><br />
<%= f.text_field :title, :placeholder => 'Titre', :size => 10, :required => true %><br />
<%= f.submit 'Envoyer' %>
<%end%>
<div class="progress"><div class="bar" style="width: 0%;"></div></div>
My Js file:
$('#new_sound').submit(function() {
$('#new_sound').fileupload({
dataType: 'json',
progress: function (e, data){
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.bar').css('width', progress + '%');
},
});
});
EDIT: (I realize that i forgot my question) Actually it's not really a question it's just i don't get why it didn't work. With this js: it works but i want to wait until the user hits submit before the file is uploaded.
$(function () {
$('#new_sound').fileupload({
dataType: 'json',
add: function (e, data){
data.submit();
},
progress: function (e, data){
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.bar').css('width', progress + '%');
},
});
});

Answer 1

In your first snippet you are binding the submit function on your form that I'm assuming has an id of #new-sound.
Update your second snippet to reflect that. Should look something like this.
$('#new_sound').submit(function() {
$('#new_sound').fileupload({
dataType: 'json',
add: function (e, data){
data.submit();
},
progress: function (e, data){
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.bar').css('width', progress + '%');
},
});
});