To add clear button;

_ux_media_widget.html.twig (vendor/arkounay/ux-media/templates/) / add button near to other buttons

<button type="button" class="btn btn-light btn-upload" data-action="arkounay--ux-media--media#clear" data-arkounay--ux-media--media-target="clearButton">
  <span>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  class="bi bi-trash" viewBox="0 0 16 16">
    <path  d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/> 
    <path  fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/> </svg>
  </span>
 </button>

Modification node_modules/@arkounay/ux-media/src/media_controller.js (stimilius included media_conroller.js in dist directory)

static targets = ['inputPath', 'filePreview', 'fileManagerModal', 'progress',  'cropModal', 'cropButton', 'fileError', 'fileErrorMessage'];

replace:

static targets = ['inputPath', 'filePreview', 'fileManagerModal', 'progress', 'clearButton' , 'cropModal', 'cropButton', 'fileError', 'fileErrorMessage'];

const hasValue = this.pathValue !== '';
        this.#disableCropButton();
        if (hasValue) {

replace with;

const hasValue = this.pathValue !== '';
        this.#disableCropButton();
        this.#hideClearButton();
        if (hasValue) {

img.addEventListener('error', () => {
                    this.imageLoaded = false;
                    this.#disableCropButton();

});

replace with;

img.addEventListener('error', () => {
                    this.imageLoaded = false;
                    this.#disableCropButton();
                    this.#hideClearButton();
});

img.addEventListener('load', () => {
                    this.imageLoaded = true;
                    this.#disableCropButton(!img.getAttribute('src').match(/^\/.+(jpg|jpeg|png|gif)$/i));
});

replace with;

img.addEventListener('load', () => {
                    this.imageLoaded = true;
                    this.#disableCropButton(!img.getAttribute('src').match(/^\/.+(jpg|jpeg|png|gif)$/i));
                    this.#hideClearButton(!img.getAttribute('src'));
});

this.filePreviewTarget.innerHTML = `<div class="border p-2 text-secondary bg-light rounded">${icon}</div>`;
                    this.#disableCropButton();
                } else {

replace with;

this.filePreviewTarget.innerHTML = `<div class="border p-2 text-secondary bg-light rounded">${icon}</div>`;
                    this.#disableCropButton();
                    this.#hideClearButton();
                } else {

add function (node_modules/@arkounay/ux-media/src/media_controller.js)

#hideClearButton(hidden = true) {
        if (this.hasClearButtonTarget) {
            this.clearButtonTarget.style.display = hidden ? 'none' : '';
        }
    }

Hello,
First, Thank you for your work on this adaptation for SF UX and on the Media bundle in general :D
I have a little problem and I can't solve it.

An error that is triggered each time the crop is saved (this.cropper.parentNode is null) at the time of the destroy, but everything works fine whether it's the flip, the rotate or the crop it still works, there really isn't than the alert that goes off.

an idea ?
Thanks.

Hi, what do you think support for Asset mapper?

Do you plan to remove deprecation ?
...
Symfony\Component\DependencyInjection\Extension\PrependExtensionInterface::prepend()" might add "void" as a native return type declaration in the future. Do the same in implementation "Arkounay\Bundle\UxMediaBundle\DependencyInjection\ArkounayUxMediaExtension" now to avoid errors or add an explicit @return annotation to suppress this message
...
Symfony\Component\DependencyInjection\Extension\ExtensionInterface::load()" might add "void" as a native return type declaration in the future. Do the same in implementation "Arkounay\Bundle\UxMediaBundle\DependencyInjection\ArkounayUxMediaExtension" now to avoid errors or add an explicit @return annotation to suppress this message.
...

hi,
i using Live Form components

Example 1 (this giving error 'Uncaught Error: Invalid model name' in console. but everything working well )

• ux v2.13.0
• • Throwing an error when setting an invalid model name.

->add('images', UxMediaCollectionType::class, [
                'conf' => 'default',
                'entry_options' => ['readonly' => false]
            ])

Example 2 (no error, working well too)

->add(child: 'images', type: LiveCollectionType::class, options: [
     'entry_type' => UxMediaType::class,
     'entry_options' => ['label' => false,'conf' => 'default',],
     'label' => false,
     'allow_add' => true,
      'allow_delete' => true,
      'by_reference' => false,
])

Even though it worked perfectly, I wanted to solve the error but I couldn't find it. Do you have any ideas about this?

After upload image, input value is not set. Please take look on following code the input value is empty.

<div class="flex-grow-1"><input type="text" class="form-control" data-action="arkounay--ux-media--media#updatePathValue" data-arkounay--ux-media--media-target="inputPath" id="zone_Media" name="zone[Media]" value="" placeholder="ux_media.path.placeholder"><div class="progress d-none" data-arkounay--ux-media--media-target="progress"><div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div></div></div>

I use config dir (for user path) with service in config :
`artgris_file_manager:
conf:
default:
service: App\Service\MediaService
#dir: '%kernel.project_dir%/public/upload'
perso:
#service: App\Service\MediaService
dir: '%kernel.project_dir%/public/media'

arkounay_ux_media:
cropped_path: crops/`

default not have crop button
perso have crop button

using, Bootstrap 5;

UxMediaCollectionType seems correctly. (div got row and mb3 class)

changed block ux_media_row in ux_media_form_theme.html.twig

like this;

{% block ux_media_row %}
    {%- if 'ux_media_collection_entry' in block_prefixes -%}
        {%- set row_attr = row_attr|merge({'data-arkounay--ux-collection--collection-target': 'collectionElement'}) -%}
    {%- endif -%}

    {%- if 'ux_media_collection_entry' in block_prefixes -%}
        <div {% for k, v in row_attr|default %}{{ k }}="{{ v }}"{% endfor %}>
        {{ form_label(form) }}
        <div {% for k, v in attr|default %}{{ k }}="{{ v }}"{% endfor %}>
        {{ form_widget(form) }}
        {{ form_errors(form) }}
        {{ form_rest(form) }}
        </div>
        </div>
    {%- else %}
        {{ form_row(form) }}
        {{ form_errors(form) }}
        {{- form_rest(form) -}}
    {% endif %}
{% endblock %}

and final;
i tried this way (UxMediaType and UxMediaCollectionType seems working correctly now)

I'm not sure if this method is the best way, I think you can solve it with a better method. thanks

Hello,
I am having troubles using the formtype in easyadmin...
File manager does not appear...

Symfony 6.1
Easyadmin 4.3.5

I created a Field for easyadmin :

<?php

namespace App\Admin\Field;

use Arkounay\Bundle\UxMediaBundle\Form\UxMediaType;
use EasyCorp\Bundle\EasyAdminBundle\Contracts\Field\FieldInterface;
use EasyCorp\Bundle\EasyAdminBundle\Field\FieldTrait;

final class MediaField implements FieldInterface
{
    use FieldTrait;

    public static function new(string $propertyName, ?string $label = null): self
    {
        return (new self())
            ->setProperty($propertyName)
            ->setLabel($label)
            ->setFormType(UxMediaType::class)
            ->setFormTypeOptions([
                'conf' => 'default',
                'display_file_manager' => true,
                'allow_crop' => false,
            ])
            ;
    }
}

Then I use it in my CrudController (it was a vich uploader form type) :

...
MediaField::new('imageFile')->hideOnIndex(),

I also added the webpack encore files to the easyadmin layout (overriding default layout.html.twig)

{% block head_stylesheets %}
        <link rel="stylesheet" href="{{ asset('app.css', ea.assets.defaultAssetPackageName) }}">
    {% endblock %}

    {% block configured_stylesheets %}
        {{ include('@EasyAdmin/includes/_css_assets.html.twig', { assets: ea.assets.cssAssets ?? [] }, with_context = false) }}
        {{ include('@EasyAdmin/includes/_encore_link_tags.html.twig', { assets: ea.assets.webpackEncoreAssets ?? [] }, with_context = false) }}
    {% endblock %}

    {% block head_favicon %}
        <link rel="shortcut icon" href="{{ asset(ea.dashboardFaviconPath) }}">
    {% endblock %}

    {% block head_javascript %}
        <script src="{{ asset('app.js', ea.assets.defaultAssetPackageName) }}"></script>
    {% endblock head_javascript %}

    {% block configured_javascripts %}
        {{ include('@EasyAdmin/includes/_js_assets.html.twig', { assets: ea.assets.jsAssets ?? [] }, with_context = false) }}
        {{ include('@EasyAdmin/includes/_encore_script_tags.html.twig', { assets: ea.assets.webpackEncoreAssets ?? [] }, with_context = false) }}
    {% endblock %}

    {% block javascripts %}
        {{ encore_entry_script_tags('app') }}
    {% endblock %}

If you have any idea....
Thank you

Hello, is there a way to autocrop image ( modal crop selected and selection squre showing) on a selection (upload or filemenager)

Thank!

Hello,
I wanted to thank you for the compatibility to "Symfony 6" and "Symfony UX".
I also use your version of "gregwar-image-bundle".
and your ux-collection

Everything works great, it's a great job! Tanks for all !