AEM 6.3: Open metadata editor after file(s) upload

2017-07-24

I was looking into ways to open the metadata editor automatically after files are uploaded into the AEM assets. I couldn't find any resources on the internet so I decided to write my own simple solution.

AEM has a javascript file called 'fileupload.js' which can be found at the following location: /libs/dam/gui/coral/components/commons/fileupload/clientlibs/fileupload/js/fileupload.js, I altered this file to make the new feature possible. I'll share the full file with you at the end of this post but let me explains my edits first:

In the '_createUploadDialog' function I added extra code to include the creation of new checkbox (Open metaeditor editor after upload):

1
2
3
4
5
6
7
8
var metaEditorCheckbox = new Coral.Checkbox().set({
    label: {
        innerHTML: "Open metadata editor after upload"
    },
    value: ""
});
metaEditorCheckbox.style.float = 'left';
item.appendChild(metaEditorCheckbox);

The upload button in the same function has also been altered:

1
2
3
4
uploadButton.on('click', function () {
    self.openMetaEditor = metaEditorCheckbox.checked;
    self._submit();
});

In the '_refresh' function (will be called up on fileuploadsuccess, fileUploadedStatus and fileuploadcanceled) I added the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (self.openMetaEditor) {

    var splitUrl = window.location.href.split("assets.html");
    var metaEditorUrl = "/mnt/overlay/dam/gui/content/assets/metadataeditor.external.html?_charset_=utf-8";

    this.fileUpload._uploadQueue.forEach(function (item) {
        metaEditorUrl += "&item=" + splitUrl[1] + "/" + item.file.name;
    });

    window.location = metaEditorUrl;

} else {
    location.reload();
}

I split the current url on 'assets.html' because I need to know the location of the map we are uploading into. I loop al files in the '_uploadQueue' (will be cleared at the end of the _refresh function) and build the final asset url.

You can find the final file on github. If you do have any questions, do not hesitate to contact me or leave a comment below.