Expand my Community achievements bar.

SOLVED

Image drag and drop in AEM 6.4 multifield component

Avatar

Level 2

Hello,

I am having trouble getting Image drag and drop working in a multi-field component in AEM 6.4. I am using sling:resourceType="granite/ui/components/foundation/form/fileupload".

                                        <bgimg

                                            jcr:primaryType="nt:unstructured"

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

                                            allowUpload="{Boolean}false"

                                            autoStart="{Boolean}false"

                                            class="cq-droptarget"

                                            fieldDescription="Select an image as background for the panel. Image height: 240px (min), 240px (max)."

                                            fieldLabel="Background Image"

                                            fileNameParameter="./hbgfileName"

                                            fileReferenceParameter="./hbgfileReference"

                                            mimeTypes="[image]"

                                            multiple="{Boolean}false"

                                            name="./file"

                                            required="{Boolean}true"

                                            title="Upload Image Asset"

                                            uploadUrl="${suffix.path}"

                                            useHTML5="{Boolean}true"/>

Based on suggestions I tried cq/gui/components/authoring/dialog/fileupload but neither of them work.

In neither of the cases do I see an image file drag and drop option.

Has anyone go this working successfully? Help will be appreciated,.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Did you include cq:dropTargets node definition where you allow the mimetypes to be dropped?

Follow the dialog definition of /apps/core/wcm/components/image/v2/image and fix your code accordingly -

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

View solution in original post

25 Replies

Avatar

Level 1

Thanks! I grabbed the code from the same implementations, so the code is the same. I also tried deleting the uloadUrl since autostart is set to false.

Still getting the json error though. Just to clarify, it works fine without being in a multifield. Cannot use coral3 fileupload since AFAIK it cannot drag&drop assets, tried to make drag&drop work until I found that issue.

Avatar

Level 10

Below is the link of component that works for me on 6.4.3. Coral3 fileupload works fine for first level multifield.

fileupload.zip - Google Drive

a.gif

Avatar

Level 1

Thanks for the example, as you said it works fine in 6.4.3 but it doesn't works in 6.4.2. I checked it myself, unfortunately I'm still getting the javascript error in 6.4.2

Avatar

Level 1

Just a quick update.

Coral3 and multifields are still not fully working in 6.4.3. You can close the dialog now (no js error in console) but as soon you add a second item it saves it in the root component folder, it doesn't creates the item1 node as expected.

Same as described here Coral Fileupload not working when placed inside Coral multi-field

Avatar

Level 4

Hi gauravb41175071 I am on AEM 6.4. What is the difference between using cq/gui/components/authoring/dialog/fileupload and granite/ui/components/coral/foundation/form/fileupload? In Coral3, we have to use granite/ui/components/coral/foundation/form/fileupload, but this is not workig for me because i have the fileupload dialogs from coral2 and those have properties like "fileReference" which is not present in coral3. How to use fileupload backward compatible?