Skip to content
Drag and drop file uploader addon using dropzonejs
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
blueprints
config
tests
typings/ember
vendor
.bowerrc
.editorconfig
.ember-cli
.eslintignore
.eslintrc.js
.gitignore
.jshintrc
.npmignore
.template-lintrc.js
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.js
jsconfig.json
package-lock.json
package.json
testem.js
yarn-error.log
yarn.lock

README.md

Ember Observer Score Codeship Status for FutoRicky/ember-cli-dropzonejs

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:

// controller.js

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() {
      // do something...
    };
  }),

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!

You can’t perform that action at this time.