CODEWITHSUNDEEP
ruby-on-railsjquerycoffeescriptjquery-file-upload
Philip7899
Philip7899

Reputation: 4677

jquery file uploader submit on click

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?

Upvotes: 1

Views: 393

Answers (2)

Fractaliste
Fractaliste

Reputation: 5957

I used to point the file input rather than the form, I don't know if it's the problem you can easily test it:

$("#file").fileupload
    dataType: "script"
    ...

Upvotes: 0

rav
rav

Reputation: 753

something like this might work...

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

Upvotes: 1

Related Questions