Ember drop zone

Downloads in past


411.0.06 years ago7 years agoMinified + gzip package size for ember-drop-zone in KB


Ember-drop-zone is an Ember-cli addon that provides a drop-zone component.


  • ember install ember-drop-zone



Create a drop-zone using the {{drop-zone}} component.
{{#drop-zone action=(action "doSomething")}}
  drop items here...

Then handle the action in your controller or component.
import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    doSomething(droppedItem) {
      // do something with `droppedItem`

By default the DropZoneComponent component will extract string data from the event.dataTransfer object.

Get Files

The DropZoneComponent be setup to enable dropping files onto it. First, you need to import the getFiles method into your controller or component.
import getFiles from 'ember-drop-zone/utils/get-files';

export default Ember.Component.extend({

Then assign the getFiles method to the getData method of the DropZoneComponent. This will change the behavior of the DropZoneComponent so that it will extract files from the event.dataTransfer object instead of text.
{{#drop-zone action=(action "doSomething") getData=getFiles}}
  Drop files here...


You can use the DroppableMixin to create your own drop-zone.
// my-drop-zone.js
import Ember from 'ember';
import DroppableMixin from 'ember-drop-zone/mixins/droppable';

export default Ember.Component.extend(DroppableMixin, {

  drop(event) {
    // do something...



You can use the DraggableMixin to create a draggable component. Add the DraggableMixin to a component that you want to make draggable.
import Ember from 'ember';
import DraggableMixin from 'ember-drop-zone/mixins/draggable';

export default Ember.Component.extend(DraggableMixin, {
  // ...

By default the DraggableMixin will look for a model on the component and send the id and type of that model encoded as JSON to the event.dataTransfer Object.

Installation for development

  • git clone <repository-url> this repository
  • cd ember-drop-zone
  • npm install
  • bower install


Running Tests

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


  • ember build

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