Image drag and drop in AEM 6.4 multifield component | Community
Skip to main content
A
anands82757572
Level 2
January 17, 2019
Solved

Image drag and drop in AEM 6.4 multifield component

  • January 17, 2019
  • 25 replies
  • 17098 views

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,.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Gaurav-Behl

    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

    25 replies

    Show previous replies
    lucasa10896905
    lucasa10896905
    February 4, 2019

    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.

    Gaurav-Behl
    Gaurav-Behl
    Level 10
    February 5, 2019

    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

    lucasa10896905
    lucasa10896905
    February 5, 2019

    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

    lucasa10896905
    lucasa10896905
    February 7, 2019

    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

      K
      karanmahi
      Level 4
      February 11, 2019

      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?

      Terms & ConditionsAccessibility statement

      Loading footer...