Drag and drop file uploader addon for ember-cli using Dropzonejs.

DEMO

Versions

Current version is running ember-cli >= 3.5.0

Versions 1.1.1 <= are running ember-cli 2.13.1

Versions 0.8.6 <= are running ember-cli 1.13.8

Installation

ember install ember-cli-dropzonejs

This addon will use dropzone's default css by default. If you prefer to use your own css, add this option to your ember-cli-build.js :

var app = new EmberApp ( defaults , { -- - emberCliDropzonejs : { includeDropzoneCss : false } -- - } ) ;

Usage

Simply add the component to your template like so: {{drop-zone url='/endpoint'}}

You can see all properties in the Dropzonejs configuration docs.

To set properties simply add the name of the property inside the component call and assign a value.

example:

{{drop-zone url=' http://example.com/example ' clickable=false addRemoveLinks=true}}

You can also use dynamic options:

import Controller from ' @ember/controller ' ; import { computed } from ' @ember/object ' ; export default Controller . extend ( { addedfile : computed ( function ( ) { return function ( ) { Ember . Logger . debug ( ' addedFile happened ' ) ; } ; } ) , options : computed ( function ( ) { return { url : ' # ' , addRemoveLinks : true , autoProcessQueue : false , addedfile : this . addedfile } ; } ) } ) ;

// template.js {{drop-zone config=options}}

If you would like to use the whole document body as a drop location you can set maxDropRegion to true

Event Handling

Dropzonejs Events Docs

To use events, set your event handler in your controller like so:

addedFileEvent : computed ( function ( ) { return function ( ) { } ; } ) ,

and set it in your component declaration:

{{drop-zone url=" http://example.com/example " addedfile=addedFileEvent}}

Remember to add an url, this addon will not work without it

Contributions

All contributions are welcomed and encouraged.

Please make all pull requests to the dev branch.

Thanks!