Not able to store the drag and drop values in JCR

[Bhavani_B]

Hi. I have an issue with the drag and drop fileupload properties. I can able to drag and drop the images from content finder but the values are not getting stored in the JCR. Can anyone help me to solve this. Thanks in advance.

<image
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldDescription="Select Banner Image Path"
fieldLabel="Select Banner Image Path"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mimeTypes="[image/*]"
multiple="{Boolean}false"
name="./image"
required="{Boolean}true"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>

 <cq:dropTargets jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="cq:DropTargetConfig"
accept="[image/.*]"
groups="[media]"
propertyName="./fileReference">
<parameters
jcr:primaryType="nt:unstructured"
sling:resourceType="training/components/content/image"
imageCrop=""
imageMap=""
imageRotate=""/>
</image>
</cq:dropTargets> 

[Anudeep_Garnepudi · Accepted solution]

@Bhavani_B 

Which AEM version you are using? Working fine in 6.5.4. Try updating mimeTypes to image  once.

<image
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldDescription="Select Banner Image Path"
fieldLabel="Select Banner Image Path"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./image"
required="{Boolean}true"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>

[Bhavani_B]

Hi Anudeep_Garnepudi, Tried changing the mimetype still values are  not getting updated in jcr and i am using AEM6.5.2

[Anudeep_Garnepudi]

@Bhavani_B what all values are not getting stored?

[Bhavani_B]

I checked the filereference value in content node. its not updated, and i am trying to implement the dragging and drop of images inside the multifield component. Do i need to include any other properties to achieve the image issue?

[Anudeep_Garnepudi]

Try the below, if does't work share full dialog.

<multi
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Images">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./images">
<items jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="/libs/cq/gui/components/authoring/dialog/fileupload"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldDescription="Select Banner Image Path"
fieldLabel="Select Banner Image Path"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./image"
required="{Boolean}true"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
</items>
</field>
</multi>

[Bhavani_B]

Checked your code structure with my code its actually looks same. Code Below

<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<item
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Carousel Items">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./carouselItems">
<items jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldDescription="Select Banner Image Path"
fieldLabel="Select Banner Image Path"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mimeTypes="[image/*]"
multiple="{Boolean}false"
name="./image"
required="{Boolean}true"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
<imageAltTag
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Image Alt Tag"
name="./imageAltTag"/>
<lineOne
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Caption Bold"
name="./lineOneHpCarousel"/>
</items>
</field>
</item>
</items>
</column>
</items>
</content>

[Anudeep_Garnepudi]

@Bhavani_BUse below dialog

<content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <item
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                        composite="{Boolean}true"
                        fieldLabel="Carousel Items">
                        <field
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            name="./carouselItems">
                            <items jcr:primaryType="nt:unstructured">
                                <image
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/form/fileupload"
                                    autoStart="{Boolean}false"
                                    class="cq-droptarget"
                                    fieldDescription="Select Banner Image Path"
                                    fieldLabel="Select Banner Image Path"
                                    fileNameParameter="./fileName"
                                    fileReferenceParameter="./fileReference"
                                    mimeTypes="[image/*]"
                                    multiple="{Boolean}false"
                                    name="./image"
                                    required="{Boolean}true"
                                    uploadUrl="${suffix.path}"
                                    useHTML5="{Boolean}true"/>
                                <imageAltTag
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                    fieldLabel="Image Alt Tag"
                                    name="./imageAltTag"/>
                                <lineOne
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                    fieldLabel="Caption Bold"
                                    name="./lineOneHpCarousel"/>
                            </items>
                        </field>
                    </item>
                </items>
            </column>
        </items>
    </content>

Use  granite/ui/components/foundation/form/fileupload. In 6.5.4 cq/gui/components/authoring/dialog/fileupload is working.

[ChitraMadan]

Hi @Bhavani_B ,

This is working fine for me. Can you please try using this:

<image

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/fileupload"

allowUpload="{Boolean}false"

autoStart="{Boolean}false"

class="cq-droptarget"

fieldLabel="Card Image"

fileNameParameter="./cardImgName"

fileReferenceParameter="./fileReference"

mimeTypes="[image]"

multiple="{Boolean}false"

name="./cardImgReference"

title="Upload Image"

uploadUrl="${suffix.path}"

useHTML5="{Boolean}true"/>