1

I want to display preview/thumbnail of the image as per mention in image when i upload image in admin panel. How it is possible without ui_component?

Please help me.

Thanks in advance :) enter image description here

$image11 = $fieldset->addField(
        'image',
        'image',
        [
            'name' => 'image',
            'label' => __('Background Image'),
            'title' => __('Background Image'),
            'tabindex' => 1,
            'onchange' => 'imagechange(this)',
        ],'text'
        );

I used dependency in this field..when I select background type image, then background image field will be show . But 'background image' label is not hide because of 'after_element_html'. How can i hide 'Background Image' label use with the use of 'after_element_html'

0

You can get output like this :

$image11 = $fieldset->addField(
        'image',
        'image',
        [
            'name' => 'image',
            'label' => __('Background Image'),
            'title' => __('Background Image'),
            'tabindex' => 1,
            'onchange' => 'imagechange(this)',
        ],'text'
        );

After you can set with help of imagechange function and display image thumbnail of the image when upload :

function imagechange(input)
{
    require(['jquery'], function($)
    {
        $('#preimage').remove();
        var table_html = "<img alt='' width='22' height='22' id='preimage' name='preimage'>";
        $('#page_image').before(table_html);
        if (input.files && input.files[0]){
            var reader = new FileReader();
            reader.onload = function (e){
                jQuery('#preimage').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.