Using jQuery File Upload with Rails

Question

I followed the Railscasts episode (http://railscasts.com/episodes/381-jquery-file-upload) to get file uploads working on my site. Everything works the way the tutorial intended, but i'd like to change up one thing and haven't been successful thus far.

I'd like to form to NOT submit until after they've clicked a submit button. Right now, and I believe with the following js, the form submits when a user finds a file.

#Snippet
data.submit()


#Whole JS File
jQuery ->
  $('#new_update').fileupload
    dataType: "script"
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        data.context = $(tmpl("template-upload", file))
        $('#new_update').append(data.context)
        data.submit()
      else
        alert("#{file.name} is not a gif, jpeg, or png image file")
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

I'd prefer to remove this and use a button instead because I have a textarea that I want the user to fill out before submitting the form.

How can I pause image upload until after the user clicks a button???

Update

Full JS file

jQuery ->
  $('#new_update').fileupload
    dataType: "script"
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        data.context = $(tmpl("template-upload", file))
        $('#new_update').append(data.context)
      else
        alert("#{file.name} is not a gif, jpeg, or png image file")

      $("#submt_button").on 'click', ->
        data.submit()

    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

Community · Accepted Answer · 2017-05-23 10:27:31Z

2

As the original answer stated, you'd be able to achieve this by removing data.submit(), however, you'd need to then ensure the "submit" event triggered the JQuery file upload:

jQuery file upload: Is it possible to trigger upload with a submit button?

#Whole JS File
jQuery ->
  $('#new_update').fileupload
    dataType: "script"
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        data.context = $(tmpl("template-upload", file))
        $('#new_update').append(data.context)
      else
        alert("#{file.name} is not a gif, jpeg, or png image file")

      $("#submit_button").on 'click', (formEvent) ->
        formEvent.preventDefault()
        data.submit()

    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Feb 4, 2014 at 11:51

Richard Peck

76.8k9 gold badges98 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Justin Over a year ago

Thanks for the reply. That is submitting the form, but the file is no longer attached with the form submission.

Richard Peck Over a year ago

Can you post a screenshot? It is probably to do with the indenting

Justin Over a year ago

I'll show you the JS file I have in an update on my original question.

d_rail Over a year ago

@JustinLicata I had a similar problem. But my issue was that the form was submitting instead of jquery upload plugin submitting. Add preventDefault() so the form doesn't submit.

jamesy829 · Accepted Answer · 2014-02-04 01:58:27Z

0

Looking at the js, I noticed there is a data.submit(), remove that and it should not submit the form

answered Feb 4, 2014 at 1:58

jamesy829

4284 silver badges7 bronze badges

Collectives™ on Stack Overflow

Using jQuery File Upload with Rails

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related