Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Image Edit (opens the Image in the Edit Console)

Avatar

Level 2

Hi Team,

I tried to find out the existing OOTB code of Image Edit (opens the Image in the Edit Console) but not able to find the exact location. Could someone help me to provide the path for the same? PFB screenshot for the reference. Thank you!

Lakshmi99_0-1703169843452.png

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

edit option implementation is located under: /libs/cq/gui/components/authoring/dialog/fileupload/render.jsp

search for below code

ValueMap editBtnVM = new ValueMapDecorator(new HashMap<String, Object>());
editBtnVM.put("granite:class", "cq-FileUpload-edit");
editBtnVM.put("variant", "quiet");
editBtnVM.put("text", "Edit");

As I have mention in my original message, entire implementation is under /libs/cq/gui/components/authoring/dialog/fileupload - browse files under above location in case you need information about other aspects.

View solution in original post

3 Replies

Avatar

Community Advisor

Hi @Lakshmi99,

Code related to Edit button is located under following location /libs/cq/gui/components/authoring/dialog/fileupload/clientlibs/fileupload/js/fileupload.js

Search for below code, which is responsible for handling Edit button action

    channel.off("click" + FILEUPLOAD_EVENT_NAMESPACE, _editButtonSelector).on("click" + FILEUPLOAD_EVENT_NAMESPACE, _editButtonSelector, function (event) {
        // "cq-FileUpload-edit" button is only present if the fileupload holds a fileReference
        var $target = $(event.currentTarget);
        var fileReference = $target.data("cqFileuploadFilereference");
        var viewInAdminURI = $target.data("cqFileuploadViewinadminuri");
        var url = Granite.URITemplate.expand(viewInAdminURI, {
            item: fileReference
        });
        if(url.startsWith("/") || url.startsWith("http")){
            open(Granite.HTTP.externalize(url));
        } else {
            console.warn(`Opening URL was blocked. Suspicious URL was detected (${url})`);
        }
    });

All other code for fileupload widget can be found under: /libs/cq/gui/components/authoring/dialog/fileupload

Avatar

Level 2

Thank you @lukasz-m. Could you also please help me to provide the node path for "edit" option in the dialog. I got the location for image editor properties but not the edit option in the dialog.

 

Avatar

Correct answer by
Community Advisor

edit option implementation is located under: /libs/cq/gui/components/authoring/dialog/fileupload/render.jsp

search for below code

ValueMap editBtnVM = new ValueMapDecorator(new HashMap<String, Object>());
editBtnVM.put("granite:class", "cq-FileUpload-edit");
editBtnVM.put("variant", "quiet");
editBtnVM.put("text", "Edit");

As I have mention in my original message, entire implementation is under /libs/cq/gui/components/authoring/dialog/fileupload - browse files under above location in case you need information about other aspects.