Skip to main content
anands82757572
Level 2
Jan 17, 2019 7:16 AM UTC
Solved

Image drag and drop in AEM 6.4 multifield component

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.
    Gaurav-Behl
    Gaurav-BehlAccepted solution
    Level 10
    Jan 17, 2019 12:11 PM UTC

    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 in thread

    25 replies

    Show previous replies
    lucasa10896905
    lucasa10896905
    Feb 4, 2019 7:11 PM UTC

    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.

    Translate
    Gaurav-Behl
    Gaurav-Behl
    Level 10
    Feb 5, 2019 12:39 AM UTC

    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

    Translate
    lucasa10896905
    lucasa10896905
    Feb 5, 2019 2:46 PM UTC

    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

    Translate
    lucasa10896905
    lucasa10896905
    Feb 7, 2019 8:47 PM UTC

    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

    Translate
      karanmahi
      Level 4
      Feb 11, 2019 2:43 AM UTC

      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?

      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...