jquery file uploader submit on click

Question

I am using jquery file uploader. I am trying to make it so that rather than automatically uploading the picture like normal, the picture does not get uploaded until the submit button is pressed. I found this code on the jquery-file-uploader page but I can't get it to work.

Coffeescript:

jQuery ->
  $("#the_form").fileupload
    dataType: "script"
    add: (e, data) ->
      data.context = $("#sub_but").text("Upload").appendTo(document.body).click(->
        data.context = $("<p/>").text("Uploading...").replaceAll($(this))
        data.submit()
      )

    done: (e, data) ->
      data.context.text "Upload finished."

Here is the form:

<form id="the_form" class="clearfix" method="post" enctype="multipart/form-data" 
 data-remote="true" action="/profiles/36" accept-charset="UTF-8">
     <input id="file" class="field file-field" type="file" name="profile[pic][]" 
      multiple="multiple" />
     <input id="sub_but" type="submit" value="yolo" name="commit" />
</form>

For some reason, when I upload a picture, the submit button disappears. How do I fix this?

Answer 1

something like this might work...

$('#the_form').fileupload({
  dataType: 'json',
    add: function (e, data) {            
    $("#sub_but").on('click', function () {
    data.submit();
    });
}, });