Now we are going to write at the bottom of the JSP page, the AlloyUI code necessary to initialize and use the component to select a file from the Liferay Document Library.

<aui:script use="liferay-dl-util">
    new Liferay.DLUtil.FileSelector({
        /* HTML container name set above */
        container: '#<portlet:namespace/>fileSelector',
        /* configuration object of the A.Dialog widget */
        dialog: {
            centered: true,
            modal: true,
            title: '<liferay-ui:message key="please-select-file" />'
        },
        /* CSS selector to identify the field to fill in the document UUID */
        hiddenInput: '#<portlet:namespace/>uuid',
        /* events provided by the widget */
        on: {
            click: function(button, event) {
                /*
                 * Function invoked at the button click, before the dialog opens; insert here your code if needed
                 */
            },
            select: function(contextPath, uuid, title, version) {
                /*
                 * Function invoked "after" file selection; insert here your code in case you need informations
                 * other than simple the document UUID
                 */

                // this sample code only display, inside the textarea above, all the informations provided by
                // the widget
                var area = A.one('#<portlet:namespace/>fileArea');
                var msg = 'ContextPath: ' + contextPath + '\n' +
                          'UUID: ' + uuid + '\n' +
                          'Title: ' + title + '\n' +
                          'Version: ' + version;
                area.val(msg);
            }
        }
    }).render();
</aui:script>