CODEWITHSUNDEEP
jqueryruby-on-railsruby-on-rails-4
Justin
Justin

Reputation: 4940

Using jQuery File Upload with Rails

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

Upvotes: 2

Views: 1359

Answers (2)

Richard Peck
Richard Peck

Reputation: 76774

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

Upvotes: 2

jamesy829
jamesy829

Reputation: 428

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

Upvotes: 0

Related Questions