contao-component dropzone4

heimrichhannot/dropzone4

shim components repo for dropzone4.

, _(*1)

, _(*2)

Dropzone.js is a light weight JavaScript library that turns an HTML element into a dropzone. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX., _(*3)

If you want support, please use stackoverflow with the dropzone.js tag and not the GitHub issues tracker. Only post an issue here if you think you discovered a bug or have a feature request., _(*4)

Please read the contributing guidelines before you start working on Dropzone!, _(*5)

, _(*6)

, _(*7)

Starting with version 2.0.0 this library does no longer depend on jQuery (but it still works as a jQuery module)., _(*8)

Dropzone is compatible with component, there's a standalone version and an AMD module that's compatible with RequireJS in the downloads folder., _(*9)

, _(*10)

Main features

• Image thumbnail previews. Simply register the callback thumbnail(file, data) and display the image wherever you like
• Retina enabled
• Multiple files and synchronous uploads
• Progress updates
• Support for large files
• Complete theming. The look and feel of Dropzone is just the default theme. You can define everything yourself by overwriting the default event listeners.
• Well tested

Documentation

For the full documentation and installation please visit www.dropzonejs.com, _(*11)

Please also refer to the FAQ., _(*12)

Examples

For examples, please see the GitHub wiki., _(*13)

Usage

Implicit creation:, _(*14)

<form id="my-awesome-dropzone" action="/target" class="dropzone"></form>

That's it. Really!, _(*15)

Dropzone will automatically attach to it, and handle file drops., _(*16)

Want more control? You can configure dropzones like this:, _(*17)

// "myAwesomeDropzone" is the camelized version of the ID of your HTML element
Dropzone.options.myAwesomeDropzone = { maxFilesize: 1 };

...or instantiate dropzone manually like this:, _(*18)

new Dropzone("div#my-dropzone", { /* options */ });

Note that dropzones don't have to be forms. But if you choose another element you have to pass the url parameter in the options., _(*19)

For configuration options please look at the documentation on the website or at the source., _(*20)

Register for events

If you want to register to some event you can do so on the dropzone object itself:, _(*21)

Dropzone.options.myDropzone({
  init: function() {
    this.on("error", function(file, message) { alert(message); });
  }
});
// or if you need to access a Dropzone somewhere else:
var myDropzone = Dropzone.forElement("div#my-dropzone");
myDropzone.on("error", function(file, message) { alert(message); });

For a list of all events, please look at the chapter »Events« in the documentation or at the source., _(*22)

Browser support

• Chrome 7+
• Firefox 4+
• IE 10+
• Opera 12+ (Version 12 for MacOS is disabled because their API is buggy)
• Safari 6+

For all the other browsers, dropzone provides an oldschool file input fallback., _(*23)

Why another library?

I realize that there are already other libraries out there but the reason I decided to write my own are the following:, _(*24)

• I didn't want it to be too big, and to cumbersome to dive into.
• I want to design my own elements. I only want to register callbacks so I can update my elements accordingly.
• Big files should get uploaded without a problem.
• I wanted a callback for image previews, that don't kill the browser if too many too big images are viewed.
• I want to use the latest API of browsers. I don't care if it falls back to the normal upload form if the browser is too old.
• I don't think that it's necessary anymore to depend on libraries such as jQuery (especially when providing functionality that isn't available in old browsers anyway).

MIT License

See LICENSE file, _(*25)