Image drag and drop in AEM 6.4 multifield component

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?

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

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

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

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.

this is one of sample implementations, compare your code against it -

aem-core-wcm-components/.content.xml at master · adobe/aem-core-wcm-components · GitHub

alternatively, you could use granite/ui/components/coral/foundation/form/fileupload, if applicable

FileUpload — Granite UI 1.0 documentation

I'm facing this issue as well, but getting a JS error on console. Any clue?

<heroimage

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

                                                allowUpload="{Boolean}false"

                                                autoStart="{Boolean}false"

                                                class="cq-droptarget"

                                                fieldLabel="Hero Image"

                                                fileNameParameter="./fileName"

                                                fileReferenceParameter="./fileReference"

                                                mimeTypes="[image]"

                                                multiple="{Boolean}false"

                                                name="./image"

                                                useHTML5="{Boolean}true"/>

AEM 6.4.2 and core components 2.2.2

I am also facing the same issue. Is this resolved?

Hi,

Now I am able to click ok and save the property in jcr:content. But now the issue is when I open the same dailog again on page the image is not appearing in the dailog .

What could be the reason behind this ?

Able to upload the image and property saved in the jcr.

Lost the image in the dailog

Thank you as always

Hi,

Please find the image of a dialog after updating the steps given above.

Now upload file appears like a button. Can you please assist me how to handle this.

I have not included any external JS file and working on We.retail page to make this component work.

Thanks for all your help