Page and media selectors for page builder components

// Assigns a selector component to the 'Images' property
[EditingComponent(MediaFilesSelector.IDENTIFIER)]
// Configures the media library from which you can select files in the selector
[EditingComponentProperty(nameof(MediaFilesSelectorProperties.LibraryName), "Graphics")]
// Limits the maximum number of files that can be selected at once
[EditingComponentProperty(nameof(MediaFilesSelectorProperties.MaxFilesLimit), 5)]
// Configures the allowed file extensions for the selected files
[EditingComponentProperty(nameof(MediaFilesSelectorProperties.AllowedExtensions), ".gif;.png;.jpg;.jpeg")]
// Returns a list of media files selector items (objects that contain the GUIDs of selected media files)
public IList<MediaFilesSelectorItem> Images { get; set; }

// Retrieves the GUID of the first selected media file from the 'Images' property
Guid guid = GetProperties().Images?.FirstOrDefault()?.FileGuid ?? Guid.Empty;
// Retrieves the MediaFileInfo object that corresponds to the selected media file GUID
MediaFileInfo mediaFile = MediaFileInfoProvider.GetMediaFileInfo(guid, SiteContext.CurrentSiteName);

string url = String.Empty;
if (mediaFile != null)
{
    // Retrieves an URL of the selected media file
    url = MediaLibraryHelper.GetDirectUrl(mediaFile);
}

<!-- Scopes the maximum file size configuration to only affect files uploaded using the media files selector -->
<location path="Kentico.Uploaders">
  <system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="MAXSIZE_IN_BYTES" />
      </requestFiltering>
    </security>
  </system.webServer>
  <system.web>
    <httpRuntime maxRequestLength="MAXSIZE_IN_KILOBYTES" executionTimeout="NUMBER_IN_SECONDS" />
  </system.web>
</location> 

// Assigns a selector component to the Pages property
[EditingComponent(PageSelector.IDENTIFIER)]
// Limits the selection of pages to a subtree rooted at the 'Products' page
[EditingComponentProperty(nameof(PageSelectorProperties.RootPath), "/Products")]
// Returns a list of page selector items (node GUIDs)
public IList<PageSelectorItem> Pages { get; set; }

// Retrieves the node GUID of the selected page from the 'Pages' property
Guid? selectedPageGuid = GetProperties().Pages?.FirstOrDefault()?.NodeGuid;
// Retrieves the page that corresponds to the selected GUID
TreeNode page = DocumentHelper.GetDocuments()
                .WhereEquals("NodeGUID", selectedPageGuid)
                .Culture("en-us")
                .TopN(1)
                .FirstOrDefault();

// Assigns a selector component to the 'PagePaths' property
[EditingComponent(PathSelector.IDENTIFIER)]
// Limits the selection of pages to a subtree rooted at the 'Products' page
[EditingComponentProperty(nameof(PathSelectorProperties.RootPath), "/Products")]
// Returns a list of path selector items (page paths)
public IList<PathSelectorItem> PagePaths { get; set; }

// Retrieves the node alias path of the selected page from the 'PagePaths' property
string selectedPagePath = GetProperties().PagePaths?.FirstOrDefault()?.NodeAliasPath;
// Retrieves the page that corresponds to the selected node alias path
TreeNode page = DocumentHelper.GetDocuments()
                .Path(selectedPagePath)
                .OnCurrentSite()
                .TopN(1)
                .FirstOrDefault();

(function () {
// Registers the 'image-selector' inline editor within the page builder scripts
window.kentico.pageBuilder.registerInlineEditor("image-selector", {
    init: function (options) {
        var editor = options.editor;
        var button = editor.querySelector("button");

        button.addEventListener("click", function () {
            // Sets the options object with individual properties
            var dialogOptions = {
                libraryName: "Graphics",
                maxFilesLimit: 1,
                allowedExtensions: ".gif;.png;.jpg;.jpeg",
                selectedValues: options.propertyValue,

                // Defines the applyCallback function invoked on click of the selector's confirmation button
                applyCallback: function (files) {
                    var newFile = files[0];

                    // Checks if the image isn't already selected
                    if (options.propertyValue && newFile.fileGuid === options.propertyValue[0].fileGuid) {
                        return {
                            closeDialog: true
                        };
                    }

                    // Creates a custom event that notifies the widget about a change in the value of a property
                    var event = new CustomEvent("updateProperty", {
                            detail: {
                                value: [{ fileGuid: newFile.fileGuid }],
                                name: options.propertyName
                            }
                        });

                    editor.dispatchEvent(event);

                    return {
                        closeDialog: true
                    };
                }
            };

            // Opens the selector modal dialog 
            window.kentico.modalDialog.mediaFilesSelector.open(dialogOptions);
        });
    }
  });
})();

(function () {
// Registers the 'page-selector' inline editor within the page builder scripts
window.kentico.pageBuilder.registerInlineEditor("page-selector", {
    init: function (options) {
        var editor = options.editor;
        var button = editor.querySelector("button");
        button.addEventListener("click", function () {
            // Sets the options object with individual properties
            var dialogOptions = {
                identifierMode: "guid",
                selectedValues: options.propertyValue ? [{identifier: options.propertyValue[0].nodeGuid}] : [],
                rootPath: "/Products",
                // Defines the applyCallback function invoked on click of the selector's confirmation button
                applyCallback: function (pages) {
                    var selectedPage = pages[0];
                    // Checks if the page isn't already selected
                    if (options.propertyValue && selectedPage.nodeGuid === options.propertyValue[0].nodeGuid) {
                        return {
                            closeDialog: true
                        };
                    }
                    // Creates a custom event that notifies the widget about a change in the value of a property
                    var event = new CustomEvent("updateProperty", {
                            detail: {
                                value: [{nodeGuid: selectedPage.nodeGuid}],
                                name: options.propertyName
                            }
                        });
                    editor.dispatchEvent(event);

                    return {
                            closeDialog: true
                    };
                }
            };
            // Opens the selector modal dialog
            window.kentico.modalDialog.pageSelector.open(dialogOptions);
        });
    }
  });
})();