Touch UI Dialog - Assets Panel

In Touch UI dialog when we use file upload type e.g. cq/gui/components/authoring/dialog/fileupload or granite/ui/components/foundation/form/fileupload field to allow authoring assets from the side panel.
In order to author the images, the side panel should be opened before editing via dialog.

AEM Page editor with side panel and dialog opened


Authoring image using drag and drop

If you forgot to open the side panel before opening the dialog then you need to close the dialog, open the side panel, and open the dialog again to author assets.


This is kind of annoying to close the dialog and open it again just to author images/Assets.
Why can't the side panel open from the dialog without closing the dialog?
That's it, here you go -

Side panel toggle button in dialog header


side panel toggle from the dialog

How to do it
This can be achieved by simply adding a side panel toggle button in the dialog header alongside help or other buttons. When clicking on this button, the click event will be triggered on the actual side panel toggle button and rest will be OOTB.

Create a clientlibs of category 'cq.authoring.dialog'
Create js.txt and dialog.sidepanel.js files with below content or click on file name to get file from github.

js.txt
dialog.sidepanel.js

dialog.sidepanel.js
(function($, $document) {
"use strict";
var flag = true;
$document.on("dialog-ready", function() {

var buttonHTML = '<button is="coral-button" icon="railLeft" variant="minimal" class="cq-dialog-header-action cq-dialog-railLeft coral-Button" type="button" title="Toggle Side Panel" size="M">';
buttonHTML += '<coral-icon class="coral-Icon coral-Icon--sizeS coral-Icon--railLeft coral3-Icon--railLeft" icon="railLeft" size="S" role="img" aria-label="rail left"></coral-icon>';
buttonHTML += '<coral-button-label></coral-button-label>';
buttonHTML += '</button>';

$('.cq-Dialog coral-dialog-header.cq-dialog-header>div.cq-dialog-actions > button:nth-child(1)').after(buttonHTML);

if (flag)
$(document).on('click', 'button.cq-dialog-railLeft', toggleLeftRail);

function toggleLeftRail() {
flag = false;
$('.editor-GlobalBar coral-actionbar-primary coral-actionbar-item button.toggle-sidepanel').click();
}

});

})($, $(document));

Or
Package

You can install the below packages from GitHub to enable the side panel option in the Touch UI dialog. These works in AEM 6.3+

However, packages contain:
1. Clientlibs to enable the side panel option in touch ui dialog.
2. Clientlibs to enable displaying touch ui field in two-column layout in floating touch UI dialog

If you install this package, the Below files will be installed in the repository at

/apps/commons/clientlibs/dialog/js.txt
/apps/commons/clientlibs/dialog/js/dialog.sidepanel.js
Other files are getting used to showing field in the same row, more details at https://aemlab.blogspot.com/2019/07/aem-touch-ui-dialog-fields-in-same-row.html.

/apps/commons/clientlibs/dialog/js/dialog.field.2column-layout.js
/apps/commons/clientlibs/dialog/css.txt
/apps/commons/clientlibs/dialog/css/dialog.field.2column-layout.css