I want to add Canvas field element using UI component admin form.

My requirement is i have a ui component form i want to add Canvas field. check below screen shoot.

enter image description here

As per above screen-shoot i would like to display uploaded image in below canvas field.

How can i add <item name="formElement" xsi:type="string">canvas</item> is this is valid method?

EDIT 1.0.0

I got success to add canvas by using below references.

Below is my code.


<field name="image">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">string</item>
                <item name="source" xsi:type="string">image</item>
                <item name="label" xsi:type="string" translate="true">Image</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="formElement" xsi:type="string">fileUploader</item>
                <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                <item name="previewTmpl" xsi:type="string">Namespace_Modulename/image-preview</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                <item name="uploaderConfig" xsi:type="array">
                    <item name="url" xsi:type="url" path="sampleimageuploader/image/upload/field/image"/>

    <!-- This field has data type 'text'
    and override standard 'input' form element's tempate and constructor by custom ones -->
    <field name="color">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <!--component constructor-->
                <item name="component" xsi:type="string">Namespace_Modulename/js/form/element/color-select</item>
                <!--main template for form field that renders elementTmpl as a child template-->
                <item name="template" xsi:type="string">ui/form/field</item>
                <!--customized form element template that will show colors-->
                <item name="elementTmpl" xsi:type="string">Namespace_Modulename/form/element/color-select</item>
                <item name="label" xsi:type="string">Autumn colors</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">sampleimageuploader</item>


],function(Abstract) {
return Abstract.extend({
    defaults: {

    // How can i get image here>



<input type="hidden" id="placeholder_img" value="">
    <div class="canvas-container" style="width: 500px;height: 500px;position: relative;user-select: none;">
    <canvas id="canvas" width="500" height="500" style="border: 1px solid rgb(170, 170, 170);background-color: #E9EEF1;position: absolute;width: 500px;height: 500px;left: 0px;top: 0px;touch-action: none;user-select: none;" class="lower-canvas"></canvas>    

Now i want uploaded image value in color-select.js or color-select.html.

How can i achieve this thing.

Any help would be appreciated!

1 Answer 1


I got solution after override file-uploader.js in my custom module located at


file-uploader.js file is responsible for logic of file upload & also preview uploaded image in UI admin form.

You can find getFilePreview function it returns path to the uploaded file's

So using this i can set value to my custom field as per my requirement. and it's works!

  • Do you know how we can preview pdf file? Commented Jun 16, 2022 at 7:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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