Image Edit (opens the Image in the Edit Console)

[Lakshmi99]

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!

[lukasz-m]

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

[Lakshmi99]

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.

[lukasz-m · Accepted solution]

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.