PHPackages yassinehamouten/ux-dropzone-multiple - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [File & Storage](/categories/file-storage) 4. / 5. yassinehamouten/ux-dropzone-multiple ActiveSymfony-bundle[File & Storage](/categories/file-storage) yassinehamouten/ux-dropzone-multiple ==================================== File input dropzones multiple for Symfony Forms v0.0.2(4y ago)14.0k5MITPHPPHP >=7.2.5 Since Nov 7Pushed 4y agoCompare [ Source](https://github.com/yassinehamouten/ux-dropzone-multiple)[ Packagist](https://packagist.org/packages/yassinehamouten/ux-dropzone-multiple)[ RSS](/packages/yassinehamouten-ux-dropzone-multiple/feed)WikiDiscussions main Synced yesterday READMEChangelogDependencies (8)Versions (3)Used By (0) Symfony UX Dropzone =================== [](#symfony-ux-dropzone) Symfony UX Dropzone is a Symfony bundle providing light dropzones for file inputs in Symfony Forms. It is part of [the Symfony UX initiative](https://symfony.com/ux). It allows visitors to drag and drop files into a container instead of having to browse their computer for a file. Installation ------------ [](#installation) Symfony UX Dropzone requires PHP 7.2+ and Symfony 4.4+. Install this bundle using Composer and Symfony Flex: ``` composer require symfony/ux-dropzone # Don't forget to install the JavaScript dependencies as well and compile yarn install --force yarn encore dev ``` Also make sure you have at least version 2.0 of [@symfony/stimulus-bridge](https://github.com/symfony/stimulus-bridge)in your `package.json` file. Usage ----- [](#usage) The most common usage of Symfony UX Dropzone is to use it as a drop-in replacement of the native FileType class: ``` // ... use yassinehamouten\UX\DropzoneMultiple\Form\DropzoneMultipleType; class CommentFormType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options) { $builder // ... ->add('photo', DropzoneMultipleType::class) // ... ; } // ... } ``` ### Customizing the design [](#customizing-the-design) Symfony UX Dropzone provides a default stylesheet in order to ease usage. You can disable it to add your own design if you wish. In `assets/controllers.json`, disable the default stylesheet by switching the `@yassinehamouten/ux-dropzone-multiple/src/style.css` autoimport to `false`: ``` { "controllers": { "@yassinehamouten/ux-dropzone-multiple": { "dropzone-multiple": { "enabled": true, "webpackMode": "eager", "autoimport": { "@yassinehamouten/ux-dropzone-multiple/src/style.css": false } } } }, "entrypoints": [] } ``` > *Note*: you should put the value to `false` and not remove the line so that Symfony Flex won't try to add the line again in the future. Once done, the default stylesheet won't be used anymore and you can implement your own CSS on top of the Dropzone. ### Extend the default behavior [](#extend-the-default-behavior) Symfony UX Dropzone allows you to extend its default behavior using a custom Stimulus controller: ``` // mydropzone_controller.js import { Controller } from 'stimulus'; export default class extends Controller { connect() { this.element.addEventListener('dropzone-multiple:connect', this._onConnect); this.element.addEventListener('dropzone-multiple:change', this._onChange); this.element.addEventListener('dropzone-multiple:clear', this._onClear); } disconnect() { // You should always remove listeners when the controller is disconnected to avoid side-effects this.element.removeEventListener('dropzone-multiple:connect', this._onConnect); this.element.removeEventListener('dropzone-multiple:change', this._onChange); this.element.removeEventListener('dropzone-multiple:clear', this._onClear); } _onConnect(event) { // The dropzone was just created } _onChange(event) { // The dropzone just changed } _onClear(event) { // The dropzone has just been cleared } } ``` Then in your form, add your controller as an HTML attribute: ``` // ... use yassinehamouten\UX\DropzoneMultiple\Form\DropzoneMultipleType; class CommentFormType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options) { $builder // ... ->add('photo', DropzoneMultipleType::class, [ 'attr' => ['data-controller' => 'mydropzone'], ]) // ... ; } // ... } ``` Backward Compatibility promise ------------------------------ [](#backward-compatibility-promise) This bundle aims at following the same Backward Compatibility promise as the Symfony framework: However it is currently considered [**experimental**](https://symfony.com/doc/current/contributing/code/experimental.html), meaning it is not bound to Symfony's BC policy for the moment. Run tests --------- [](#run-tests) ### PHP tests [](#php-tests) ``` php vendor/bin/phpunit ``` ### JavaScript tests [](#javascript-tests) ``` cd Resources/assets yarn test ``` ### Health Score 25 — LowBetter than 37% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity21 Limited adoption so far Community17 Small or concentrated contributor base Maturity36 Early-stage or recently created project Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~3 days Total 2 Last Release 1643d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/66b2eb288f92240a7af89fda10b1cc9cead050ffc0ccedec21792ae6255b6f5b?d=identicon)[yassinehamouten](/maintainers/yassinehamouten) --- Top Contributors [![nicolas-grekas](https://avatars.githubusercontent.com/u/243674?v=4)](https://github.com/nicolas-grekas "nicolas-grekas (6 commits)")[![tgalopin](https://avatars.githubusercontent.com/u/1651494?v=4)](https://github.com/tgalopin "tgalopin (6 commits)")[![weaverryan](https://avatars.githubusercontent.com/u/121003?v=4)](https://github.com/weaverryan "weaverryan (4 commits)")[![Kocal](https://avatars.githubusercontent.com/u/2103975?v=4)](https://github.com/Kocal "Kocal (2 commits)")[![kl3sk](https://avatars.githubusercontent.com/u/2953145?v=4)](https://github.com/kl3sk "kl3sk (1 commits)")[![chalasr](https://avatars.githubusercontent.com/u/7502063?v=4)](https://github.com/chalasr "chalasr (1 commits)")[![yassinehamouten](https://avatars.githubusercontent.com/u/22196574?v=4)](https://github.com/yassinehamouten "yassinehamouten (1 commits)")[![derrabus](https://avatars.githubusercontent.com/u/1506493?v=4)](https://github.com/derrabus "derrabus (1 commits)")[![dunglas](https://avatars.githubusercontent.com/u/57224?v=4)](https://github.com/dunglas "dunglas (1 commits)")[![Jibbarth](https://avatars.githubusercontent.com/u/3168281?v=4)](https://github.com/Jibbarth "Jibbarth (1 commits)") --- Tags symfony-ux ### Embed Badge ![Health badge](/badges/yassinehamouten-ux-dropzone-multiple/health.svg) ``` [![Health](https://phpackages.com/badges/yassinehamouten-ux-dropzone-multiple/health.svg)](https://phpackages.com/packages/yassinehamouten-ux-dropzone-multiple) ``` ### Alternatives [vich/uploader-bundle Ease file uploads attached to entities 1.9k25.9M116](/packages/vich-uploader-bundle)[symfony/ux-dropzone File input dropzones for Symfony Forms 541.5M4](/packages/symfony-ux-dropzone)[symfony/stimulus-bundle Integration with your Symfony app & Stimulus! 17314.3M161](/packages/symfony-stimulus-bundle)[symfony/ux-chartjs Chart.js integration for Symfony 1003.2M18](/packages/symfony-ux-chartjs)[symfony/ux-toggle-password Toggle visibility of password inputs for Symfony Forms 26508.0k5](/packages/symfony-ux-toggle-password)[symfony/ux-cropperjs Cropper.js integration for Symfony 19280.3k3](/packages/symfony-ux-cropperjs) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)