makapen-file-upload

File-upload

This is a small wrapper around jquery-file-upload. The url parameter is the location of the file storage site (e.g. s3). The uploadUrl is the location of your middleware api. The default flow is a request to your middleware for the credentials to upload the image to your file storage site. If you extend the component you can override how to handle the file upload actions.

To install the package:

npm install --save makapen-file-upload

You can override what the upload function does by extending the component:

send: function(e, data_) {}`
error: function(e) {}`
done: function(e, data) {}` 

If you stick with the default implmentation, it will send the actions:

addUpload: function(e, data) {}`
errorUpload: function(e) {}`
doneUpload: function(e, data) {}` 

To use this addon: npm install --save makapen-file-upload

Example of use

In the template

{{#file-upload addUpload='addUpload' doneUpload='doneUpload'}}
  <div class="{{if noFileUploading 'invisible'}}">
    loading
  </div>
  <div class="{{if hideControls 'invisible'}}">
    <button>Button Text</button>
    <input id='upload' class="image-uploader" name="file" type='file'>
    <p class="padding-t">Or drag &amp; drop a file onto the screen</p>
  </div>

  <div class="{{if fileUploaded 'visible' 'invisible'}}">
    File Uploaded
  </div>
{{/file-upload}}

In the controller

  noFileUploading: Ember.computed.not('fileUploading'),
  hideControls: Ember.computed.or('fileUploading', 'fileUploaded'),

  actions: {
    addUpload() {
      this.set('fileUploading', true);
    },

    doneUpload() {
      this.set('fileUploaded', true);
      this.set('fileUploading', false);
    }
  }

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

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