Downloading files with Ember app

Question

I have Ember App (built with Ember-CLI). On the backend I have Rails application which handles requests. Lets say that my API has following routes:

/model — returns list of models

/model/1 — returns model

/model/1/download — returns file

How can I force Ember app to start file download (using /download path) and how can I construct link for file download from within Ember app?

score 3 · Answer 1 · answered Nov 19 '14 at 21:40

3

Why don't you just return the URL path for the download in your model for "/model/1". Then you can easily create links in your handlebars templates like so:

<a href="{{model.download}}" target="_blank">Download File</a>

answered Nov 19 '14 at 21:40

Wojciech Wieroński

457
3
9

2

If the file to download comes from Ember's back-end, I don't think it can work just like this. This will just open a new window displaying the Ember app with a route corresponding to the file URI, that may match nothing. – Arnaud DUSSART Aug 25 '15 at 14:58

score 3 · Answer 2 · edited May 23 '17 at 12:00

3

If you're going to hit the endpoint and return the file contents, I believe you'll need to set the Content Disposition header. More details here: Force download through js or query

Content-disposition=attachment; filename=some.file.name

If you are linking to the file directly, you could use the HTML5 download attribute;

<a href="{{model.download}}" download>Download File</a>

edited May 23 '17 at 12:00

Community

1
1

answered Oct 30 '15 at 19:28

ToddSmithSalter

715
6
20

1

The __download__ attribute is not very well supported: http://caniuse.com/#feat=download – yuяi Oct 18 '16 at 17:36
1

For anyone stumbling upon this, the html download attribute has 96% browser support now so Yuri's comment is no longer valid. – Branden Silva Aug 30 '21 at 17:00
I agree with you @BrandenSilva. Support is strong across all current browsers. – ToddSmithSalter Aug 31 '21 at 18:42

score 1 · Answer 3 · answered Sep 26 '17 at 11:33

Don't do any of these manually, keep it simple and use ember-cli-file-saver!

// models/invoice.js
export default Model.extend({
  invoiceNumber: attr('number'),

  download: memberAction({ path: 'download', type: 'GET', ajaxOptions: { arraybuffer: true } })
});

// in a component
invoiceModel
  .download()
  .then((pdfContent) => this.saveFileAs('invoice.pdf', pdfContent, 'application/pdf'));

Downloading files with Ember app

3 Answers3