alfresco-ng2-components/demo-shell-ng2/app/components/files/files.component.html

<div class="container">
    <alfresco-upload-drag-area
            [showUploadDialog]="true"
            [currentFolderPath]="currentPath"
            [uploaddirectory]=""
            (onSuccess)="documentList.reload()">
        <alfresco-document-list-breadcrumb
            [currentFolderPath]="currentPath"
            [target]="documentList">
        </alfresco-document-list-breadcrumb>
        <alfresco-document-list
                #documentList
                [currentFolderPath]="currentPath"
                [contextMenuActions]="true"
                [contentActions]="true"
                (preview)="showFile($event)"
                (folderChange)="onFolderChanged($event)">
            <!--
            <empty-folder-content>
                <template>
                    <h1>Sorry, no content here</h1>
                </template>
            </empty-folder-content>
            -->
            <content-columns>
                <content-column key="$thumbnail" type="image"></content-column>
                <content-column
                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                        key="name"
                        sortable="true"
                        class="full-width ellipsis-cell">
                </content-column>
                <!--
                <content-column
                        title="Type"
                        source="content.mimeType">
                </content-column>
                -->
                <content-column
                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
                        key="createdByUser.displayName"
                        sortable="true"
                        class="desktop-only">
                </content-column>
                <content-column
                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
                        key="createdAt"
                        type="date"
                        format="medium"
                        sortable="true"
                        class="desktop-only">
                </content-column>
            </content-columns>

            <content-actions>
                <!-- folder actions -->
                <content-action
                        target="folder"
                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
                        handler="system1">
                </content-action>
                <content-action
                        target="folder"
                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
                        (execute)="myFolderAction1($event)">
                </content-action>
                <content-action
                        target="folder"
                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
                        handler="delete">
                </content-action>
                <!-- document actions -->
                <content-action
                        target="document"
                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
                        handler="download">
                </content-action>
                <content-action
                        target="document"
                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
                        handler="system2">
                </content-action>
                <content-action
                        target="document"
                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
                        (execute)="myCustomAction1($event)">
                </content-action>
                <content-action
                        target="document"
                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
                        handler="delete">
                </content-action>
                <content-action
                        target="document"
                        title="Activiti: View Form"
                        (execute)="viewActivitiForm($event)">
                </content-action>
            </content-actions>
        </alfresco-document-list>
        <alfresco-pagination
            [provider]="documentList.data"
            [supportedPageSizes]="[5, 10, 15, 20]">
        </alfresco-pagination>
    </alfresco-upload-drag-area>
</div>

<context-menu-holder></context-menu-holder>

<div class="p-10">
    <ul>
        <li>Current path: {{documentList.currentFolderPath}}</li>
        <li>
            <button (click)="documentList.currentFolderPath = '/Sites/swsdp/documentLibrary';">Go to Document Library</button>
        </li>
        <li>
            <button (click)="documentList.currentFolderPath = '/Sites/swsdp/documentLibrary/Agency Files/Contracts'">Go to agency contracts</button>
        </li>
        <li>
            <button (click)="documentList.currentFolderPath = '/'">Go to root</button>
        </li>
        <li>
            <button (click)="fileDialog.toggleShowDialog()">Show/Hide File Dialog</button>
        </li>
    </ul>
</div>


<p style="width:250px;margin: 20px;">
    <label for="switch-multiple-file" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
        <input type="checkbox" id="switch-multiple-file" class="mdl-switch__input" (change)="toggleMultipleFileUpload()" >
        <span class="mdl-switch__label">Multiple File Upload</span>
    </label>
</p>


<p style="width:250px;margin: 20px;">
    <label for="switch-folder-upload" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
        <input type="checkbox" id="switch-folder-upload" class="mdl-switch__input" (change)="toggleFolder()">
        <span class="mdl-switch__label">Folder Upload</span>
    </label>
</p>

<p style="width:250px;margin: 20px;">
    <label for="switch-accepted-file-type" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
        <input type="checkbox" id="switch-accepted-file-type" class="mdl-switch__input" (change)="toggleAcceptedFilesType()">
        <span class="mdl-switch__label">Filter extension</span>
    </label>
</p>

<h5>Upload</h5>
<br>
<div *ngIf="acceptedFilesTypeShow">
    <span class="mdl-input__label">Extension accepted</span>
    <input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
    <br/>
</div>
<div *ngIf="!acceptedFilesTypeShow">
    <alfresco-upload-button data-automation-id="multiple-file-upload"
                            [uploaddirectory]="currentPath"
                            [currentFolderPath]="currentPath"
                            [multipleFiles]="multipleFileUpload"
                            [uploadFolders]="folderUpload"
                            (onSuccess)="documentList.reload()">
        <div class="mdl-spinner mdl-js-spinner is-active"></div>
    </alfresco-upload-button>
</div>
<div *ngIf="acceptedFilesTypeShow">
    <alfresco-upload-button data-automation-id="multiple-file-upload"
                            [uploaddirectory]="currentPath"
                            [currentFolderPath]="currentPath"
                            acceptedFilesType="{{acceptedFilesType}}"
                            [multipleFiles]="multipleFileUpload"
                            [uploadFolders]="folderUpload"
                            (onSuccess)="documentList.reload()">
        <div class="mdl-spinner mdl-js-spinner is-active"></div>
    </alfresco-upload-button>
</div>

<alfresco-viewer [(showViewer)]="fileShowed"
                 [fileNodeId]="fileNodeId"
                 [overlayMode]="true">
    <div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>

<file-uploading-dialog #fileDialog></file-uploading-dialog>