Image drag/drop in pathfield

Avatar

Avatar

forumu74220352

Avatar

forumu74220352

forumu74220352

09-07-2019

We are working with Coral UI 3. As in classic UI , we can drag and drop image in pathfield(field will be updated with the image path on drag/drop), same does not happen in touch ui.

Is there any way to achieve the same in TOUCH UI?

Appreciate quick help on this.

Thanks!

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

09-07-2019

with pathfield its not possible but with fileUpload (cq/gui/components/authoring/dialog/fileupload) it is.

References

/apps/core/wcm/components/image/v1/image

/apps/core/wcm/components/image/v1/image/cq:editConfig/cq:dropTargets

Answers (3)

Answers (3)

Avatar

Avatar

JohnBunker

Employee

Avatar

JohnBunker

Employee

JohnBunker
Employee

09-07-2019

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

John

Avatar

Avatar

forumu74220352

Avatar

forumu74220352

forumu74220352

09-07-2019

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>

Avatar

Avatar

forumu74220352

Avatar

forumu74220352

forumu74220352

09-07-2019

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