Skip to content

asjongers/ember-cli-file-saver

 
 

Repository files navigation

Ember-cli-file-saver

Provides support to save binary file from an API for an Ember CLI application.

Upon install it will:

  • add a bower dependency to FileSaver
  • add a transport layer for jQuery to handle arraybuffer and blob dataType.

To make this new transport layer works nicely with ember-data it is necessary to make your adapter extend the adapter-arraybuffer-mixin mixin and pass either arraybuffer:true or blob:true as an AJAX option.

Usage

ES6 Import

This addon provides the ability to import FileSaver as an ES6 module.

import FileSaver from 'file-saver';

Adapter Mixin for ArrayBuffer / Blob response

import ActiveModelAdapter from 'active-model-adapter';
import AdapterArrayBufferMixin from 'ember-cli-file-saver/mixins/adapter-arraybuffer-mixin';

const ApplicationAdapter = ActiveModelAdapter.extend(AdapterArrayBufferMixin);

ApplicationAdapter.reopen({
 // 
});

export default ApplicationAdapter;

Download from a component

import Ember from 'ember';
import FileSaverMixin from 'ember-cli-file-saver/mixins/file-saver';

const { Component, computed } = Ember;

export default Component.extend(FileSaverMixin, {

  tagName: 'button',

  click() {
    this.attrs.download()
      .then((content) => this.saveFileAs(this.get('filename'), content, this.get('contentType')));
  }
});

Using from a model

This works well with the ember-api-actions project:

// models/invoice.js

import Ember from 'ember';
import DS from 'ember-data';
import { memberAction } from 'ember-api-actions';

const { computed } = Ember;
const { belongsTo, attr, Model } = DS;

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

Installation

  • git clone <repository-url> this repository
  • cd ember-cli-file-saver
  • npm install
  • bower install

Running

Running Tests

  • npm test (Runs ember try:each to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://ember-cli.com/.

About

Include FileSaver into an Ember CLI application

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 83.7%
  • HTML 16.3%