ImageUploader component

The ImageUploader UI component gives users the ability to upload images to the Media Gallery.

This component is a variation of the FileUploader component and uses the same configuration settings.

Options

Source files

Extends FileUploader:

• app/code/Magento/Ui/view/base/web/js/form/element/image-uploader.js
• app/code/Magento/Ui/view/base/web/templates/form/element/uploader/image.html
• app/code/Magento/Ui/view/base/ui_component/etc/definition/imageUploader.xsd
• app/code/Magento/Ui/Component/Form/Element/DataType/Media/Image.php

Example

<form>
    ...
    <fieldset>
        ...
        <field name="imageUploaderExample" formElement="imageUploader">
            <settings>
                <notice translate="true">Some notice.</notice>
                <label translate="true">Image Uploader Example</label>
                <componentType>imageUploader</componentType>
            </settings>
            <formElements>
                <imageUploader>
                    <settings>
                        <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                        <maxFileSize>2097152</maxFileSize>
                        <uploaderConfig>
                            <param xsi:type="string" name="url">path/to/save</param>
                        </uploaderConfig>
                    </settings>
                </imageUploader>
            </formElements>
        </field>
        ...
    </fieldset>
    ...
</form>

Result