gistfile1.coffee

$(document).ready ->
  $('.chosen-select').chosen()  
  $('#import_form').fileupload
    autoUpload: false
    dataType: "json"
    add: (e, data) ->	 
      data.context = $(tmpl("template-upload", data.files[0]))
      $('#import_form').append(data.context)
	  $("#import_button").on "click", ->
	    $("#import_form").triggerHandler "fileuploadsubmit"
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')
  $('#import').click ->
	  alert('Data submitted for processing')	  
  $('#import_form').on("ajax:success", (e, data, status, xhr) ->
	  console.log("It works")	  
  ).bind("ajax:error", (e, xhr, status, error) ->
	  alert(error)
  )	 

I changed the code to the following but still getting 500 Internal Server Error on button click

$(document).ready ->
  $('.chosen-select').chosen()  

  $('#import_form').fileupload
    autoUpload: false
    dataType: "json"
    add: (e, data) ->    
        $button = $("#import_form")
        files = $("#import_form").data("files") or {}
        data.context = $(tmpl("template-upload", data.files[0]))
        $button.append data.context
        files[data.files[0].name] = data
        $button.data "files", files
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')


  $("#import_button").on "click", ->
    $this = $(this)
    files = $this.data("files")
    $.each files, (fileName, data) ->
      data.submit()

  $('#import_form').on("ajax:success", (e, data, status, xhr) ->
      console.log("It works")     
  ).bind("ajax:error", (e, xhr, status, error) ->
      alert(error)
  )  

Still getting 500 Internal Server Error? You have problem with sending files onclick only or not?

About 500 Error: it the sever error. I can help if you show me the request and it content. Can you copy request body and headers here?