Show image thumbnail near to ElFinderType widget

[frizquierdo]

Hi, I'm starting to use this bundle, it's wonderful.

Short description of what this feature will allow to do: It's possible show an image thumbnail near to ElFinderType widget after select and immage from Elfinder browser?

Example of how to use this feature something like this but much more refined and the associated event handler:

% block elfinder_widget %}
    {% if value is not empty %}
        <div class="content d-flex align-items-stretch w-100">
            <div class="d-flex w-100">
                <div class="d-flex align-items-center w-100">
                    <img class="img-thumbnail " src="{{ value }}" width="100px;" height="100px;"/>
                </div>
            </div>
        </div>
    {% endif %}

  -- rest of widget definition ----
    <input type="text" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %} data-type="elfinder-input-field" />
    {% if enable and instance is defined %}
        <script type="text/javascript" charset="utf-8">
            live('click', '[data-type="elfinder-input-field"][id="{{ id }}"]', function (event) {
                console.warn('Test');
                var childWin = window.open("{{path('elfinder', {'instance': instance, 'homeFolder': homeFolder })}}?id={{ id }}", "popupWindow", "height=450, width=900");
            });
            function live (eventType, elementQuerySelector, cb) {
                document.addEventListener(eventType, function (event) {
                    var qs = document.querySelectorAll(elementQuerySelector);
                    if (qs) {
                        var el = event.target, index = -1;
                        while (el && ((index = Array.prototype.indexOf.call(qs, el)) === -1)) {
                            el = el.parentElement;
                        }
                        if (index > -1) {
                            cb.call(el, event);
                        }
                    }
                })
            }
            function setValue(value, element_id) {
                document.querySelector('[data-type="elfinder-input-field"]' + (element_id ? '[id="'+ element_id +'"]': '')).value = value;
            }
        </script>
    {% endif %}
{% endblock %}

The idea is to get something like this:

[helios-ag]

hi @frizquierdo This bundle only provides basic functionality for frontend part, you can try to intercept events between windows (parent and elfinder's)(or share state between them), but this needs to be researched

[frizquierdo]

hi @frizquierdo This bundle only provides basic functionality for frontend part, you can try to intercept events between windows (parent and elfinder's)(or share state between them), but this needs to be researched

Thank you for yours tips. exactly, the solution was in "share" from getFileCallback(), in elfinder/simple.html.twig, a selected file url with the window.owner that open elfinder browser ; and customize _elfinderwidget.html.twig and add necessaries listeners to the new view elements to open elfinder browser and remove selected image.