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 + '%')

score 2 · Answer 1 · edited May 23 '17 at 10:27

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 '17 at 10:27

Community

1
1

answered Feb 04 '14 at 11:51

Richard Peck

76,116
9
93
147

1

Thanks for the reply. That is submitting the form, but the file is no longer attached with the form submission. – Justin Feb 04 '14 at 14:06
Can you post a screenshot? It is probably to do with the indenting – Richard Peck Feb 04 '14 at 14:08
I'll show you the JS file I have in an update on my original question. – Justin Feb 04 '14 at 14:11
@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. – d_rail Sep 17 '14 at 16:21

score 0 · Answer 2 · answered Feb 04 '14 at 01:58

0

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

answered Feb 04 '14 at 01:58

jamesy829

428
4
7

Using jQuery File Upload with Rails

2 Answers2