PHPackages wwwision/neos-mediabrowserdialog - 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. [Utility & Helpers](/categories/utility) 4. / 5. wwwision/neos-mediabrowserdialog ActiveNeos-package[Utility & Helpers](/categories/utility) wwwision/neos-mediabrowserdialog ================================ JavaScripts to provide asset selection via Media Browser in Neos Backend Modules 2.4.0(2y ago)75.6k↓40%2MITJavaScript Since Feb 7Pushed 2y ago1 watchersCompare [ Source](https://github.com/bwaidelich/Wwwision.Neos.MediaBrowserDialog)[ Packagist](https://packagist.org/packages/wwwision/neos-mediabrowserdialog)[ GitHub Sponsors](https://github.com/sponsors/bwaidelich)[ Fund](https://www.paypal.me/bwaidelich)[ RSS](/packages/wwwision-neos-mediabrowserdialog/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (2)Versions (12)Used By (0) Wwwision.Neos.MediaBrowserDialog ================================ [](#wwwisionneosmediabrowserdialog) JavaScripts to provide asset selection via Media Browser in Neos Backend Modules Installation ------------ [](#installation) Install via composer: ``` composer require wwwision/neos-mediabrowserdialog ``` Usage ----- [](#usage) In the configuration of a Neos backend module, include the provided `dist.js` file: ``` Neos: Neos: modules: 'administration': submodules: 'some-module': # ... additionalResources: javaScripts: - 'resource://Wwwision.Neos.MediaBrowserDialog/Public/dist.js' styleSheets: - 'resource://Wwwision.Neos.MediaBrowserDialog/Public/dist.css' ``` With that in place, the following `data` attributes can be added to HTML elements in the module in order to include the Neos Media Browser and/or asset preview: AttributeEffectAllowed on elements`asset`If not empty the specified asset id/s is/are used to populate preview and form fields (required)container`asset-constraints-media-types`Comma separated list of allowed mediaTypes (optional)container`asset-constraints-asset-sources`Comma separated list of allowed asset sources (optional)container`asset-multiple`If set, multiple assets can be added (optional)container`asset-neos-uri-path`Can be set if the Neos routes don't reside underneath `/neos` (optional)container`asset-hide-if-set`Element will be hidden if an asset is selected (optional)any element within the container`asset-hide-if-missing`Element will be hidden if no asset is selected (optional)any element within the container`asset-field`Element value will contain the identifier of the selected field (optional)any input form field within the container, usually a hidden field`asset-preview-template`Template element that will be added to the DOM, if an asset is added (optional)`template` element within the container`asset-preview-container`Element that the `asset-preview-template` template will be added to, if an asset is selected (optional)any element within the container`asset-preview-label`Element will contain the label of the asset, if one is selected (optional)any element within the container`asset-preview-image`Element will render a preview of the asset, if one is selected (optional)any `img` element within the container`asset-browse`Element will open the Media Browser on click (optional)any element within the container that dispatches `click` events`asset-replace`Element will unset a previously selected asset (optional)any element within the container that dispatches `click` events`asset-move-up`Element will move the selected asset one position up (optional, only for asset lists)any element within the container that dispatches `click` events`asset-move-down`Element will move the selected asset one position down (optional, only for asset lists)any element within the container that dispatches `click` events### Example [](#example) #### Simple asset selection [](#simple-asset-selection) To render just the input field and a button to open the Media Browser: ``` ``` #### Asset preview [](#asset-preview) To render a preview image and the label of a previously selected asset: ``` - ``` Elements with the `data-asset-hide-if-missing` attribute will be *hidden* when no asset is selected. Elements with the `data-asset-hide-if-set` attribute will only be *visible* if no asset is selected – this allows for rendering fallbacks. #### Example 01 (Single image upload, Fluid) [](#example-01-single-image-upload-fluid) The following example renders a hidden field and browse button. If an asset is selected, the browse button is replaced with the label of the asset and a button to replace the asset. If the label is clicked, the Media Browser is opened allowing to inspect or replace the selected asset. Furthermore, the Media Browser will be limited to only show documents and images of the `neos` and `someAssetSource`Asset sources (see [Asset Constraints](https://neos.readthedocs.io/en/stable/References/PropertyEditorReference.html#property-type-asset-neos-media-domain-model-asset-array-neos-media-domain-model-asset-asseteditor-file-selection-editor)): ``` Browse assets ``` #### Example 02 (Multiple images upload, Fluid) [](#example-02-multiple-images-upload-fluid) The following example, renders a list of `{images}` as preview image. Next to every image, move buttons are shown and a delete button is shown that removes the specific asset from the list. Underneath the list, a Browse button allows to select additional images and finally the whole list can be emptied with an additional button: ``` No images have been selected yet Add image(s) Add image(s) ``` **Note:** For multiple assets to be mapped correctly, you might need to explicitly allow them in the MVC controller: ``` class SomeController extends ActionController { // ... protected function initializeUpdateAction(): void { $this->arguments->getArgument('images')->getPropertyMappingConfiguration()->allowAllProperties(); } /** * @param array $images * @Flow\IgnoreValidation("$images") */ public function updateAction(array $images = []): void { // ... } } ``` ### Events [](#events) The following events are dispatched on the container element (with the `data-asset` attribute): EventPayload`assetChosen`The asset identifier (in `event.detail`)`assetRemoved`-#### Example [](#example-1) ``` document.querySelectorAll('[data-asset]').forEach(container => { container.addEventListener('assetChosen', e => console.log('Asset selected: ' + e.detail)); container.addEventListener('assetRemoved', e => console.log('Asset removed')); }); ``` Acknowledgements ---------------- [](#acknowledgements) The idea for this package and parts of the implementation are inspired by [Alois Rietzler](https://github.com/riea) from [brandung GmbH](https://brandung.de), thank you! Contribution ------------ [](#contribution) Contributions in the form of issues or pull requests are highly appreciated. License ------- [](#license) See [LICENSE](./LICENSE) ### Health Score 32 — LowBetter than 72% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity30 Limited adoption so far Community12 Small or concentrated contributor base Maturity55 Maturing project, gaining track record Bus Factor1 Top contributor holds 76.5% of commits — single point of failure 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 ~65 days Total 11 Last Release 903d ago Major Versions 1.1.0 → 2.0.02022-12-15 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/307571?v=4)[Bastian Waidelich](/maintainers/bwaidelich)[@bwaidelich](https://github.com/bwaidelich) --- Top Contributors [![bwaidelich](https://avatars.githubusercontent.com/u/307571?v=4)](https://github.com/bwaidelich "bwaidelich (13 commits)")[![so-grimm](https://avatars.githubusercontent.com/u/119854907?v=4)](https://github.com/so-grimm "so-grimm (3 commits)")[![riea](https://avatars.githubusercontent.com/u/10829329?v=4)](https://github.com/riea "riea (1 commits)") ### Embed Badge ![Health badge](/badges/wwwision-neos-mediabrowserdialog/health.svg) ``` [![Health](https://phpackages.com/badges/wwwision-neos-mediabrowserdialog/health.svg)](https://phpackages.com/packages/wwwision-neos-mediabrowserdialog) ``` ### Alternatives [sitegeist/monocle An living-styleguide for Neos that is based on the actual fusion-code 45315.9k10](/packages/sitegeist-monocle)[sitegeist/kaleidoscope Responsive-images for Neos 29352.4k10](/packages/sitegeist-kaleidoscope)[flowpack/listable Tiny extension for listing things 35209.0k7](/packages/flowpack-listable)[kaufmanndigital/gdpr-cookieconsent A ready-to-run package, that integrates an advanced cookie consent banner into your Neos CMS site. 2540.7k](/packages/kaufmanndigital-gdpr-cookieconsent)[neos/seo SEO configuration and tools for Neos 13990.5k24](/packages/neos-seo)[shel/neos-colorpicker A plugin for Neos CMS which provides a colorpicker editor 1494.4k6](/packages/shel-neos-colorpicker) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)