Image drag/drop in pathfield

Below is my page component dialog:

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

    jcr:primaryType="nt:unstructured"

    jcr:title="Page"

    sling:resourceType="cq/gui/components/authoring/dialog"

    extraClientlibs="[cq.common.wcm,cq.siteadmin.admin.properties,cq.wcm.msm.properties,granite.contexthub.configuration]"

    mode="edit">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/foundation/container"

        class="cq-dialog-content-page">

        <items jcr:primaryType="nt:unstructured">

            <tabs

                granite:class="cq-siteadmin-admin-properties-tabs"

                jcr:primaryType="nt:unstructured"

                sling:resourceType="granite/ui/components/coral/foundation/tabs"

                maximized="{Boolean}true"

                size="L">

                <items jcr:primaryType="nt:unstructured">

                    <custom

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/coral/foundation/include"

                        path="/apps/myproject/components/pageComp/custom_tab"/>

                </items>

            </tabs>

        </items>

    </content>

</jcr:root>

Also, PFB custom tab xml(as mentioned in above cd:dialog, path="/apps/myproject/components/pageComp/custom_tab") :

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

    cq:showOnCreate="{Boolean}true"

    jcr:primaryType="nt:unstructured"

    jcr:title="Image"

    sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">

    <items jcr:primaryType="nt:unstructured">

        <column

            jcr:primaryType="nt:unstructured"

            sling:resourceType="granite/ui/components/foundation/container">

            <items jcr:primaryType="nt:unstructured">

                <image

                    cq:showOnCreate="{Boolean}true"

                    jcr:primaryType="nt:unstructured"

                    sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

                    autoStart="{Boolean}false"

                    class="cq-droptarget"

                    fileNameParameter="./image/fileName"

                    fileReferenceParameter="./image/fileReference"

                    mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff]"

                    multiple="{Boolean}false"

                    name="./image/file"

                    uploadUrl="${suffix.path}"

                    useHTML5="{Boolean}true"/>

            </items>

        </column>

    </items>

</jcr:root>

How to make it work(cq/gui/components/authoring/dialog/fileupload field) in page properties?

An working example can also be found at Re: Image drag and drop in AEM 6.4 multifield component

John