How to add form element CANVAS using ui component magento admin form

Question

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.

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.

• Github.com
• magento.stackexchange.com

Below is my code.

Namespace/Modulename/view/adminhtml/ui_component/sampleimageuploader_image_form.xml

<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>
                <item name="uploaderConfig" xsi:type="array">
                    <item name="url" xsi:type="url" path="sampleimageuploader/image/upload/field/image"/>
                </item>
            </item>
        </argument>
    </field>

    <!-- 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>
            </item>
        </argument>
    </field>
</fieldset>

Namespace/ModuleName/view/adminhtml/web/js/form/element/color-select.js

define([
'Magento_Ui/js/form/element/abstract'   
],function(Abstract) {
return Abstract.extend({
    defaults: {

    // How can i get image here>

});
});

Namespace/Modulename/view/adminhtml/web/template/form/element/color-select.html

<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>    
</div>

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!

Answer 1

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

/var/www/html/Projectname/vendor/magento/module-ui/view/base/web/js/form/element/file-uploader.js

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!