ImageUploader component | Adobe Commerce Developer Guide

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

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

Configuration options

Title	Type	Default	Description
`openDialogTitle`	String	—	Defines the title that appears when opening the media browser dialog slideout.

Source files

Extends FileUploader:

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

ImageUploader Component Example