UiPath/angular-components

<ng-container *ngLet="{
    files: (displayedFiles$ | async) ?? [],
    filesLoading: filesLoading$ | async,
    fileError: fileError$ | async
} as state">
    <div uiFileDropZone
         [accept]="accept"
         [disabled]="disabled"
         (filesReceived)="addFiles($event)"
         (filesLoading)="displayLoadingIndicator($event)"
         (fileError)="handleFileError($event)"
         class="upload-wrapper"
         [class.disabled]="!!disabled">
        <div *ngIf="!state.filesLoading && state.files.length > 0 && !hideSummaryAfterFilesSelection"
             class="grid-wrapper">
            <button (click)="clearAll()"
                    #deleteAll
                    mat-button
                    class="delete-all-button"
                    color="primary"
                    type="button"
                    data-testid="delete-all-button">
                <mat-icon>delete_outline</mat-icon>
                {{intl.deleteAll$ | async}}
            </button>
            <ui-grid #filesGrid
                     [data]="state.files"
                     [selectable]="false"
                     [refreshable]="false"
                     (rendered)="detectDeleteButtonSize()">
                <ui-grid-column width="40%"
                                property="name"
                                [title]="(intl.fileName$ | async) ?? 'File name'"
                                [disableToggle]="true">
                    <ng-template let-entry="data">{{entry.name}}</ng-template>
                </ui-grid-column>
                <ui-grid-column width="20%"
                                property="type"
                                [title]="(intl.type$ | async) ?? 'Type'">
                    <ng-template let-entry="data">
                        {{getFileExtension(entry.name)}}
                    </ng-template>
                </ui-grid-column>
                <ui-grid-column property="pages"
                                width="40%"
                                [minWidth]="deleteButtonSize"
                                [title]="(intl.size$ | async) ?? 'Title'">
                    <ng-template let-entry="data">{{entry.size | uiFileSize | async}}
                    </ng-template>
                </ui-grid-column>
                <ui-grid-row-action>
                    <ng-template let-entry="data">
                        <button mat-button
                                data-testid="delete-file-button"
                                [attr.aria-label]="intl.deleteFile$(entry.name) | async"
                                [matTooltip]="(intl.deleteFile$(entry.name) | async) ?? 'Delete file'"
                                (click)="removeFile(entry)">
                            <mat-icon class="remove-file">delete_outline</mat-icon>
                        </button>
                    </ng-template>
                </ui-grid-row-action>
            </ui-grid>
        </div>
        <ui-input-file-drop-zone #fileDropzone
                                 class="upload-input-wrapper"
                                 [class.large]="state.filesLoading || state.files.length === 0 || hideSummaryAfterFilesSelection"
                                 [disableDropZone]="true"
                                 [single]="single"
                                 [accept]="accept"
                                 [disabled]="disabled"
                                 (filesReceived)="addFiles($event)"
                                 (filesLoading)="displayLoadingIndicator($event)"
                                 (fileError)="handleFileError($event)">
            <div *ngIf="state.filesLoading"
                 class="spinner-container">
                <mat-progress-spinner color="primary"
                                      mode="indeterminate"
                                      diameter="32">
                </mat-progress-spinner>
            </div>
            <div *ngIf="!state.filesLoading"
                 class="message">
                <button mat-icon-button
                        color="primary"
                        data-testid="browse-files-button"
                        [attr.aria-label]="intl.clickUploadDragDrop$ | async"
                        [disabled]="disabled"
                        (click)="onBrowseFilesClick()">
                    <mat-icon>cloud_upload</mat-icon>
                </button>
                <div class="primary">
                    <div translate>
                        {{intl.clickUploadDragDrop$ | async}}
                    </div>
                    <span *ngIf="secondaryMessage"
                          class="placeholder">{{secondaryMessage}}</span>
                </div>
            </div>
        </ui-input-file-drop-zone>
    </div>
    <mat-error *ngIf="state.fileError">{{ state.fileError }}</mat-error>
</ng-container>