Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Image Fileupload using Coral 3 drag and drop

Avatar

Level 2

I am looking for a way to drag and drog image file using coral 3 within the dialog (as shown below). 

1736544_pastedImage_1.png

I was able to do this with coral 2 and was wondering how to do it with coral 3.

Can someone provide me the code to do this?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

You can't do that with coral3 but you can use foundation fileupload

cq/gui/components/authoring/dialog/fileupload

OR use pathfield to browse images.

PathField — Granite UI 1.0 documentation



Arun Patidar

View solution in original post

8 Replies

Avatar

Level 2

I already looked at the documentation, it does not show how to create a drag and drop fileupload.  The fileupload changed dramatically from it's previous version.  The documentation does not show an example on how to do this.

I would like a working sample.  Please provide a working example in xml.

Avatar

Level 2

Hi rmahendra

I am looking for a dialog with a fileupload (in coral 3) that we can drag and drop the image.

The example you gave me does not have a coral 3 fileupload.

Avatar

Correct answer by
Community Advisor

Hi,

You can't do that with coral3 but you can use foundation fileupload

cq/gui/components/authoring/dialog/fileupload

OR use pathfield to browse images.

PathField — Granite UI 1.0 documentation



Arun Patidar

Avatar

Level 2

Hey Arun,

You are saying that it is not possible.

Was it designed that way?  Or is it a bug?

Avatar

Community Advisor

I think it is by designed because if you compare coral2 and Granite fileupload

Granite FileUpload — Granite UI 1.0 documentation

Coral2 FileUpload — Granite UI 1.0 documentation

below properties have been removed from Granite fileupload which is used to browse assets from dam

fileNameParameter

The parameter representing the file name, for instance “./fileName” or “./image/fileName”. It will be used to determine the (relative) location where to store the name of the file.

fileReferenceParameter

The location where to store the reference of the file (when a file already uploaded on the server is used), usually ./fileReference or ./image/fileReference. NB: This is only working in the context of AEM Authoring



Arun Patidar

Avatar

Level 4
Where you looking to Drag and Drop from the Asset Finder or were you looking to drop a file to upload it from the computer desktop?