How to download files through select options with Rails and jQuery?

Question

I am trying to build a form in my Rails app where the user can select a file extension from a select box and then the selected file gets downloaded.

Form:

select_tag :data_export, options_for_select(format_options)

Form helper:

def format_options
  options = []
  options << ["Please select...", nil]
  %w(csv xml xlsx).each do |format|
    options << [ format.upcase, invoices_path(:format => format) ]
  end
  options
end

Controller action:

def index
  @invoices = Invoice.all
  respond_to do |format|
    format.csv {  send_data(invoices_file(:csv),  filename: 'invoices.csv',  disposition: 'attachment') }
    format.xlsx { send_data(invoices_file(:xlsx), filename: 'invoices.xlsx', disposition: 'attachment') }
    format.xml {  send_data(invoices_file(:xml),  filename: 'invoices.xml',  disposition: 'attachment') }
  end
end

jQuery:

$('#data_export').on('change', function() {
  var url = $(this).val();
  if (url) {
    location = url;
  }
});

The code works and the selected file gets downloaded. But it also throws (minor) errors in Chrome and Safari such as:

Resource interpreted as Document but transferred with MIME type text/csv

Is there an alternative to the approach above, possibly using Ajax?

Thanks for any help.

Does the same error occur when you open the link in the new tab/window with javascript? — F.E.A, Dec 21 '18 at 18:09

score 1 · Answer 1 · answered Dec 21 '18 at 18:13

1

Maybe you could consider use send_data for downloads like this:

  def index
    @invoices = Invoice.all
    respond_to do |format|
      format.csv { send_data(invoices_file(:csv), filename: 'invoices.csv', disposition: 'attachment') }
      format.xlsx { send_data(invoices_file(:xlsx), filename: 'invoices.xlsx', disposition: 'attachment') }
      format.xml { send_data(invoices_file(:xml), filename: 'invoices.xml', disposition: 'attachment') }
    end
  end

answered Dec 21 '18 at 18:13

Javier Menéndez Rizo

2,138
3
12
22

Hi and thanks but that's actually what my code looks like already. I just wanted to keep things simple, so I didn't include it in my original post. Just added it above. – Tintin81 Dec 21 '18 at 18:39
Can you put some info about your routes? – Javier Menéndez Rizo Dec 21 '18 at 18:46
It's just a RESTful controller named `InvoicesController`. So the only route concerned here is the `invoices_path` I guess. – Tintin81 Dec 21 '18 at 19:53
1

The problem seems to be on the client side, look at this: https://stackoverflow.com/questions/1066452/easiest-way-to-open-a-download-window-without-navigating-away-from-the-page you could create the link on your onchange function or put a hidden link on your html – Javier Menéndez Rizo Dec 21 '18 at 21:07

score 0 · Answer 2 · answered Dec 22 '18 at 09:42

OK, I wasn't able to remove the errors but I realised that they were not due to the fact that I was using select boxes but occurred whenever I tried to download from invoices_path. The errors can be removed by adding :download => :download to the download links. So I switched from select boxes to links and now the errors are gone. This other question here on SO helped me a lot.

How to download files through select options with Rails and jQuery?

2 Answers2