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)
  )	 

remove from add callback

$("#import_button").on "click", ->
     $("#import_form").triggerHandler "fileuploadsubmit"

and add it to dom ready after all fileupload init

OK, but now the file does not get uploaded at all. The changed code is as follows

$(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)     
    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", ->
       $("#import_form").triggerHandler "fileuploadsubmit"  

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

You mean don't upload after you click import_button?

Form gets submmitted but the file data is not submitted along with it.

I get the example http://blueimp.github.io/jQuery-File-Upload/basic-plus.html with autoUpload: false. See it source for more information. In your example change onclick handler to this:

$("#import_button").on('click', function () {
    var $this = $(this),
         files = $this.data('files');
    $.each(files, function (fileName, data) {
        data.submit();
    });
});

and change in your fileupload config add handler like this:

$().on('fileuploadadd', function (e, data) {
    var $button = $('#import_form');
    var files = $("#import_button").data('files') || {};

    data.context = $(tmpl("template-upload", data.files[0]))
    $button.append(data.context);

    files[data.files[0].name] = data;
    $button.data('files', files);
})

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?