inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

migrate upload dialog to control flow

Browse Source
This commit is contained in:
Denys Vuika
2026-02-25 15:19:35 +00:00
parent a77c268904
commit 5194777451
8 changed files with 270 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/content-services/src/lib/upload/components/file-uploading-dialog.component.html
+105 -105
View File
@@ -1,116 +1,116 @@
<div *ngIf="canShowDialog()" @if (canShowDialog()) {
role="dialog" <div
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG'| translate" role="dialog"
tabindex="0" [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG'| translate"
class="adf-upload-dialog" tabindex="0"
id="upload-dialog" class="adf-upload-dialog"
[class.adf-upload-dialog--minimized]="isDialogMinimized"> id="upload-dialog"
[class.adf-upload-dialog--minimized]="isDialogMinimized">
<header class="adf-upload-dialog__header"> <header class="adf-upload-dialog__header">
<button <button
mat-icon-button mat-icon-button
class="adf-upload-dialog__header-button" class="adf-upload-dialog__header-button"
[attr.data-automation-id]="'adf-upload-dialog__toggle-minimize'" [attr.data-automation-id]="'adf-upload-dialog__toggle-minimize'"
[attr.aria-label]="(isDialogMinimized ? [attr.aria-label]="(isDialogMinimized ?
'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_MAXIMIZE': 'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_MAXIMIZE':
'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_MINIMIZE') | translate" 'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_MINIMIZE') | translate"
[disabled]="isConfirmation" [disabled]="isConfirmation"
[attr.aria-expanded]="!isDialogMinimized" [attr.aria-expanded]="!isDialogMinimized"
(click)="toggleMinimized()"> (click)="toggleMinimized()">
<mat-icon class="adf-upload-dialog__header-button-icon" [adf-icon]="isDialogMinimized ? 'keyboard_arrow_up' : 'keyboard_arrow_down'" /> <mat-icon class="adf-upload-dialog__header-button-icon" [adf-icon]="isDialogMinimized ? 'keyboard_arrow_up' : 'keyboard_arrow_down'" />
</button> </button>
@if (!uploadList.isUploadCancelled()) {
<span <span class="adf-upload-dialog__title">
class="adf-upload-dialog__title" {{ 'FILE_UPLOAD.MESSAGES.UPLOAD_PROGRESS'
*ngIf="!uploadList.isUploadCancelled()"> | translate: {
{{ 'FILE_UPLOAD.MESSAGES.UPLOAD_PROGRESS' completed: totalCompleted,
| translate: { total: filesUploadingList.length
completed: totalCompleted, }
total: filesUploadingList.length
}
}}
</span>
<span
class="adf-upload-dialog__title"
*ngIf="uploadList.isUploadCancelled()">
{{ 'FILE_UPLOAD.MESSAGES.UPLOAD_CANCELED' | translate }}
</span>
</header>
<section class="adf-upload-dialog__info"
*ngIf="totalErrors">
{{
(totalErrors > 1
? 'FILE_UPLOAD.MESSAGES.UPLOAD_ERRORS'
: 'FILE_UPLOAD.MESSAGES.UPLOAD_ERROR')
| translate: { total: totalErrors }
}} }}
</span>
}
@if (uploadList.isUploadCancelled()) {
<span class="adf-upload-dialog__title">
{{ 'FILE_UPLOAD.MESSAGES.UPLOAD_CANCELED' | translate }}
</span>
}
</header>
@if (totalErrors) {
<section class="adf-upload-dialog__info">
{{
(totalErrors > 1
? 'FILE_UPLOAD.MESSAGES.UPLOAD_ERRORS'
: 'FILE_UPLOAD.MESSAGES.UPLOAD_ERROR')
| translate: { total: totalErrors }
}}
</section> </section>
}
<section class="adf-upload-dialog__content" <section class="adf-upload-dialog__content"
[class.adf-upload-dialog--padding]="isConfirmation" aria-live="polite"> [class.adf-upload-dialog--padding]="isConfirmation" aria-live="polite">
<adf-file-uploading-list <adf-file-uploading-list
class="adf-file-uploading-list" class="adf-file-uploading-list"
[class.adf-upload-dialog--hide]="isConfirmation" [class.adf-upload-dialog--hide]="isConfirmation"
#uploadList #uploadList
[files]="filesUploadingList"> [files]="filesUploadingList">
<ng-template let-file="$implicit"> <ng-template let-file="$implicit">
<adf-file-uploading-list-row <adf-file-uploading-list-row
[file]="file" [file]="file"
(cancel)="uploadList.cancelFile(file)" /> (cancel)="uploadList.cancelFile(file)" />
</ng-template> </ng-template>
</adf-file-uploading-list> </adf-file-uploading-list>
<div
<div aria-live="polite"
aria-live="polite" aria-labelledby="confirmationTitle"
aria-labelledby="confirmationTitle" aria-describedby="confirmationDescription"
aria-describedby="confirmationDescription" class="adf-upload-dialog__confirmation"
class="adf-upload-dialog__confirmation" [class.adf-upload-dialog--hide]="!isConfirmation">
[class.adf-upload-dialog--hide]="!isConfirmation"> <p role="heading" aria-level="2" id="confirmationTitle" class="adf-upload-dialog__confirmation--title">
<p role="heading" aria-level="2" id="confirmationTitle" class="adf-upload-dialog__confirmation--title"> {{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TITLE' | translate }}
{{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TITLE' | translate }} </p>
</p> <p id="confirmationDescription" class="adf-upload-dialog__confirmation--text">
<p id="confirmationDescription" class="adf-upload-dialog__confirmation--text"> {{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TEXT' | translate }}
{{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TEXT' | translate }} </p>
</p> </div>
</div> </section>
</section> @if (!isConfirmation) {
<footer class="adf-upload-dialog__actions">
<footer class="adf-upload-dialog__actions" *ngIf="!isConfirmation"> @if (canShowCancelAll()) {
<button <button
id="adf-upload-dialog-cancel-all" id="adf-upload-dialog-cancel-all"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.STOP_ALL' | translate" [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.STOP_ALL' | translate"
color="primary" color="primary"
mat-button mat-button
*ngIf="canShowCancelAll()" (click)="toggleConfirmation()"
(click)="toggleConfirmation()"
>{{ 'ADF_FILE_UPLOAD.BUTTON.STOP_ALL' | translate }}</button> >{{ 'ADF_FILE_UPLOAD.BUTTON.STOP_ALL' | translate }}</button>
}
@if (canCloseDialog()) {
<button <button
id="adf-upload-dialog-close" id="adf-upload-dialog-close"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_CLOSE' | translate" [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_CLOSE' | translate"
*ngIf="canCloseDialog()" mat-button
mat-button color="primary"
color="primary" (click)="close()"
(click)="close()"
>{{ 'ADF_FILE_UPLOAD.BUTTON.CLOSE' | translate }}</button> >{{ 'ADF_FILE_UPLOAD.BUTTON.CLOSE' | translate }}</button>
}
</footer> </footer>
}
@if (isConfirmation) {
<footer class="adf-upload-dialog__actions" <footer class="adf-upload-dialog__actions"
*ngIf="isConfirmation" cdkTrapFocus cdkTrapFocusAutoCapture> cdkTrapFocus cdkTrapFocusAutoCapture>
<button <button
id="adf-upload-dialog-cancel" id="adf-upload-dialog-cancel"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CONFIRMATION.CANCEL' | translate" [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CONFIRMATION.CANCEL' | translate"
mat-button mat-button
(click)="cancelAllUploads()" (click)="cancelAllUploads()"
>{{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CANCEL' | translate }}</button> >{{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CANCEL' | translate }}</button>
<button
<button id="adf-upload-dialog-confirm"
id="adf-upload-dialog-confirm" [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CONFIRMATION.CONTINUE' | translate"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CONFIRMATION.CONTINUE' | translate" mat-button
mat-button color="primary"
color="primary" (click)="toggleConfirmation()"
(click)="toggleConfirmation()" >{{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CONTINUE' | translate }}</button>
>{{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CONTINUE' | translate }}</button>
</footer> </footer>
}
</div> </div>
}
lib/content-services/src/lib/upload/components/file-uploading-dialog.component.ts
+2 -2
View File
@@ -38,7 +38,7 @@ import { delay } from 'rxjs/operators';
import { UploadService } from '../../common/services/upload.service'; import { UploadService } from '../../common/services/upload.service';
import { FileModel, FileUploadStatus } from '../../common/models/file.model'; import { FileModel, FileUploadStatus } from '../../common/models/file.model';
import { FileUploadCompleteEvent, FileUploadDeleteEvent } from '../../common/events/file.event'; import { FileUploadCompleteEvent, FileUploadDeleteEvent } from '../../common/events/file.event';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { TranslatePipe } from '@ngx-translate/core'; import { TranslatePipe } from '@ngx-translate/core';
import { FileUploadingListRowComponent } from './file-uploading-list-row.component'; import { FileUploadingListRowComponent } from './file-uploading-list-row.component';
@@ -47,7 +47,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({ @Component({
selector: 'adf-file-uploading-dialog', selector: 'adf-file-uploading-dialog',
imports: [CommonModule, MatButtonModule, TranslatePipe, IconModule, FileUploadingListComponent, FileUploadingListRowComponent, A11yModule], imports: [MatButtonModule, TranslatePipe, IconModule, FileUploadingListComponent, FileUploadingListRowComponent, A11yModule],
templateUrl: './file-uploading-dialog.component.html', templateUrl: './file-uploading-dialog.component.html',
styleUrls: ['./file-uploading-dialog.component.scss'], styleUrls: ['./file-uploading-dialog.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
lib/content-services/src/lib/upload/components/file-uploading-list-row.component.html
+82 -66
View File
@@ -1,92 +1,108 @@
<div class="adf-file-uploading-row" [attr.aria-label]="file.name + ' ' + file.status"> <div class="adf-file-uploading-row" [attr.aria-label]="file.name + ' ' + file.status">
<mat-icon *ngIf="mimeType === 'default'" matListItemIcon class="adf-file-uploading-row__type" adf-icon="insert_drive_file" /> @if (mimeType === 'default') {
<mat-icon matListItemIcon class="adf-file-uploading-row__type" adf-icon="insert_drive_file" />
}
<mat-icon *ngIf="mimeType !== 'default'" svgIcon="adf:{{ mimeType }}" aria-hidden="true" /> @if (mimeType !== 'default') {
<mat-icon svgIcon="adf:{{ mimeType }}" aria-hidden="true" />
}
<span <span
class="adf-file-uploading-row__name" class="adf-file-uploading-row__name"
title="{{ file.name }}"> title="{{ file.name }}">
{{ file.name }} {{ file.name }}
</span> </span>
<span *ngIf="isUploadVersion()" class="adf-file-uploading-row__version" tabindex="0" > @if (isUploadVersion()) {
<mat-chip color="primary" <span class="adf-file-uploading-row__version" tabindex="0" >
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.VERSION' | translate: { version: versionNumber }" <mat-chip color="primary"
[title]="'version' + versionNumber" [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.VERSION' | translate: { version: versionNumber }"
>{{ versionNumber }}</mat-chip> [title]="'version' + versionNumber"
>{{ versionNumber }}</mat-chip>
</span> </span>
}
@if (isUploading()) {
<div <div
tabindex="0" tabindex="0"
role="button" role="button"
#toggleIcon="toggleIcon" #toggleIcon="toggleIcon"
adf-toggle-icon adf-toggle-icon
(keyup.enter)="onCancel(file)" (keyup.enter)="onCancel(file)"
(click)="onCancel(file)" (click)="onCancel(file)"
data-automation-id="cancel-upload-progress" data-automation-id="cancel-upload-progress"
*ngIf="isUploading()" [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.STOP_FILE_UPLOAD' | translate: { file: file.name }"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.STOP_FILE_UPLOAD' | translate: { file: file.name }" class="adf-file-uploading-row__group adf-file-uploading-row__group--toggle"
class="adf-file-uploading-row__group adf-file-uploading-row__group--toggle" title="{{ 'ADF_FILE_UPLOAD.BUTTON.STOP_FILE' | translate }}">
title="{{ 'ADF_FILE_UPLOAD.BUTTON.STOP_FILE' | translate }}"> @if (!toggleIcon.isToggled) {
<span class="adf-file-uploading-row__status">
<span class="adf-file-uploading-row__status" *ngIf="!toggleIcon.isToggled"> {{ file.progress.loaded | adfFileSize }} / {{ file.progress.total | adfFileSize }}
{{ file.progress.loaded | adfFileSize }} / {{ file.progress.total | adfFileSize }}
</span> </span>
}
<mat-icon *ngIf="toggleIcon.isToggled" class="adf-file-uploading-row__action adf-file-uploading-row__action--cancel" adf-icon="clear" /> @if (toggleIcon.isToggled) {
<mat-icon class="adf-file-uploading-row__action adf-file-uploading-row__action--cancel" adf-icon="clear" />
}
</div> </div>
}
@if (isUploadComplete()) {
<button mat-icon-button <button mat-icon-button
adf-toggle-icon adf-toggle-icon
#toggleIcon="toggleIcon" #toggleIcon="toggleIcon"
*ngIf="isUploadComplete()" class="adf-file-uploading-row__group"
class="adf-file-uploading-row__group" [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.UPLOAD_SUCCESSFUL' | translate: { file: file.name }"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.UPLOAD_SUCCESSFUL' | translate: { file: file.name }" title="{{ 'ADF_FILE_UPLOAD.BUTTON.UPLOAD_SUCCESSFUL' | translate }}">
title="{{ 'ADF_FILE_UPLOAD.BUTTON.UPLOAD_SUCCESSFUL' | translate }}"> <mat-icon class="adf-file-uploading-row__status adf-file-uploading-row__status--done" adf-icon="check_circle" />
<mat-icon class="adf-file-uploading-row__status adf-file-uploading-row__status--done" adf-icon="check_circle" />
</button> </button>
}
@if (isUploadVersionComplete()) {
<div <div
*ngIf="isUploadVersionComplete()" class="adf-file-uploading-row__file-version"
class="adf-file-uploading-row__file-version" [attr.aria-label]="'ADF_FILE_UPLOAD.STATUS.FILE_DONE_STATUS' | translate"
[attr.aria-label]="'ADF_FILE_UPLOAD.STATUS.FILE_DONE_STATUS' | translate" >
> <mat-icon class="adf-file-uploading-row__status--done" adf-icon="check_circle" matListItemIcon />
<mat-icon class="adf-file-uploading-row__status--done" adf-icon="check_circle" matListItemIcon />
</div> </div>
}
@if (canCancelUpload()) {
<button <button
adf-toggle-icon adf-toggle-icon
#toggleIconCancel="toggleIcon" #toggleIconCancel="toggleIcon"
mat-icon-button mat-icon-button
*ngIf="canCancelUpload()" (click)="onCancel(file)"
(click)="onCancel(file)" data-automation-id="cancel-upload-queue"
data-automation-id="cancel-upload-queue" class="adf-file-uploading-row__group"
class="adf-file-uploading-row__group" title="{{ 'ADF_FILE_UPLOAD.BUTTON.STOP_FILE' | translate }}"
title="{{ 'ADF_FILE_UPLOAD.BUTTON.STOP_FILE' | translate }}" [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.STOP_FILE' | translate: { file: file.name }">
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.STOP_FILE' | translate: { file: file.name }"> @if (!toggleIconCancel.isToggled) {
<mat-icon *ngIf="!toggleIconCancel.isToggled" class="adf-file-uploading-row__status adf-file-uploading-row__status--pending" adf-icon="schedule" /> <mat-icon class="adf-file-uploading-row__status adf-file-uploading-row__status--pending" adf-icon="schedule" />
}
<mat-icon *ngIf="toggleIconCancel.isToggled" class="adf-file-uploading-row__action adf-file-uploading-row__action--remove" adf-icon="remove_circle" /> @if (toggleIconCancel.isToggled) {
<mat-icon class="adf-file-uploading-row__action adf-file-uploading-row__action--remove" adf-icon="remove_circle" />
}
</button> </button>
}
@if (isUploadError()) {
<div <div
role="status" role="status"
*ngIf="isUploadError()" class="adf-file-uploading-row__block adf-file-uploading-row__status--error">
class="adf-file-uploading-row__block adf-file-uploading-row__status--error"> <mat-icon
<mat-icon [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.UPLOAD_FILE_ERROR' | translate: { error: file.errorCode | adfFileUploadError }"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.UPLOAD_FILE_ERROR' | translate: { error: file.errorCode | adfFileUploadError }" [title]="file.errorCode | adfFileUploadError"
[title]="file.errorCode | adfFileUploadError" adf-icon="report_problem"
adf-icon="report_problem" matListItemIcon
matListItemIcon
/> />
</div> </div>
}
@if (showCancelledStatus()) {
<div <div
[attr.aria-label]="'ADF_FILE_UPLOAD.STATUS.FILE_CANCELED_STATUS' | translate" [attr.aria-label]="'ADF_FILE_UPLOAD.STATUS.FILE_CANCELED_STATUS' | translate"
role="status" role="status"
*ngIf="showCancelledStatus()" class="adf-file-uploading-row__block adf-file-uploading-row__status--cancelled">
class="adf-file-uploading-row__block adf-file-uploading-row__status--cancelled"> {{ 'ADF_FILE_UPLOAD.STATUS.FILE_CANCELED_STATUS' | translate }}
{{ 'ADF_FILE_UPLOAD.STATUS.FILE_CANCELED_STATUS' | translate }}
</div> </div>
}
</div> </div>
lib/content-services/src/lib/upload/components/file-uploading-list-row.component.ts
+2 -12
View File
@@ -17,7 +17,7 @@
import { FileModel, FileUploadStatus } from '../../common/models/file.model'; import { FileModel, FileUploadStatus } from '../../common/models/file.model';
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core'; import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatListModule } from '@angular/material/list'; import { MatListModule } from '@angular/material/list';
import { FileSizePipe, IconModule } from '@alfresco/adf-core'; import { FileSizePipe, IconModule } from '@alfresco/adf-core';
import { MatChipsModule } from '@angular/material/chips'; import { MatChipsModule } from '@angular/material/chips';
@@ -28,17 +28,7 @@ import { FileUploadErrorPipe } from '../pipes/file-upload-error.pipe';
@Component({ @Component({
selector: 'adf-file-uploading-list-row', selector: 'adf-file-uploading-list-row',
imports: [ imports: [IconModule, MatListModule, MatChipsModule, TranslatePipe, ToggleIconDirective, FileSizePipe, MatButtonModule, FileUploadErrorPipe],
CommonModule,
IconModule,
MatListModule,
MatChipsModule,
TranslatePipe,
ToggleIconDirective,
FileSizePipe,
MatButtonModule,
FileUploadErrorPipe
],
templateUrl: './file-uploading-list-row.component.html', templateUrl: './file-uploading-list-row.component.html',
styleUrls: ['./file-uploading-list-row.component.scss'], styleUrls: ['./file-uploading-list-row.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
lib/content-services/src/lib/upload/components/file-uploading-list.component.html
+4 -3
View File
@@ -1,6 +1,7 @@
<div class="upload-list"> <div class="upload-list">
@for (file of files; track file) {
<ng-template <ng-template
ngFor [ngTemplateOutlet]="template"
[ngForOf]="files" [ngTemplateOutletContext]="{ $implicit: file }" />
[ngForTemplate]="template" /> }
</div> </div>
lib/content-services/src/lib/upload/components/file-uploading-list.component.ts
+1 -2
View File
@@ -20,11 +20,10 @@ import { UploadService } from '../../common/services/upload.service';
import { FileModel, FileUploadStatus } from '../../common/models/file.model'; import { FileModel, FileUploadStatus } from '../../common/models/file.model';
import { Component, ContentChild, Input, Output, TemplateRef, EventEmitter, inject } from '@angular/core'; import { Component, ContentChild, Input, Output, TemplateRef, EventEmitter, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({ @Component({
selector: 'adf-file-uploading-list', selector: 'adf-file-uploading-list',
imports: [CommonModule], imports: [],
templateUrl: './file-uploading-list.component.html', templateUrl: './file-uploading-list.component.html',
styleUrls: ['./file-uploading-list.component.scss'] styleUrls: ['./file-uploading-list.component.scss']
}) })
lib/content-services/src/lib/upload/components/upload-button.component.html
+72 -66
View File
@@ -1,70 +1,76 @@
<form class="adf-upload-button-file-container"> <form class="adf-upload-button-file-container">
<!--Files Upload--> <!--Files Upload-->
<div *ngIf="!uploadFolders"> @if (!uploadFolders) {
<div>
<!--Single Files Upload--> <!--Single Files Upload-->
<ng-container *ngIf="!multipleFiles"> @if (!multipleFiles) {
<input
class="adf-upload-button-file-container-upload-single-file"
id="upload-single-file"
data-automation-id="upload-single-file"
[type]="file ? 'button' : 'file'"
name="uploadFiles"
accept="{{acceptedFilesType}}"
[attr.disabled]="isButtonDisabled()"
[title]="tooltip"
(change)="onFilesAdded($event)"
(click)="onClickUploadButton()"/>
<label tabindex="0" (keydown.enter)="onClickUploadButton()" for="upload-single-file" class="adf-upload-button-label">
<mat-icon class="adf-upload-button-icon" adf-icon="file_upload" />
<span id="upload-single-file-label" *ngIf="!staticTitle">
{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
<span id="upload-single-file-label-static" *ngIf="staticTitle">
{{ staticTitle }}</span>
</label>
</ng-container>
<!--Multiple Files Upload-->
<ng-container *ngIf="multipleFiles">
<input
id="upload-multiple-files"
data-automation-id="upload-multiple-files"
type="file"
name="uploadFiles"
multiple="multiple"
accept="{{acceptedFilesType}}"
[attr.disabled]="isButtonDisabled()"
[title]="tooltip"
(change)="onFilesAdded($event)"/>
<label for="upload-multiple-files" class="adf-upload-button-label">
<mat-icon class="adf-upload-button-icon" adf-icon="file_upload" />
<span id="upload-multiple-file-label" *ngIf="!staticTitle">
{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
<span id="upload-multiple-file-label-static" *ngIf="staticTitle">
{{ staticTitle }}</span>
</label>
</ng-container>
</div>
<!--Folders Upload-->
<ng-container *ngIf="uploadFolders">
<input <input
id="uploadFolder" class="adf-upload-button-file-container-upload-single-file"
data-automation-id="uploadFolder" id="upload-single-file"
type="file" data-automation-id="upload-single-file"
name="uploadFiles" [type]="file ? 'button' : 'file'"
multiple="multiple" name="uploadFiles"
accept="{{acceptedFilesType}}" accept="{{acceptedFilesType}}"
webkitdirectory directory [attr.disabled]="isButtonDisabled()"
[attr.disabled]="isButtonDisabled()" [title]="tooltip"
[title]="tooltip" (change)="onFilesAdded($event)"
(change)="onDirectoryAdded($event)"/> (click)="onClickUploadButton()"/>
<label for="uploadFolder" data-automation-id="uploadFolder" class="adf-upload-button-label"> <label tabindex="0" (keydown.enter)="onClickUploadButton()" for="upload-single-file" class="adf-upload-button-label">
<mat-icon class="adf-upload-button-icon" adf-icon="file_upload" /> <mat-icon class="adf-upload-button-icon" adf-icon="file_upload" />
<span id="uploadFolder-label" *ngIf="!staticTitle"> @if (!staticTitle) {
{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</span> <span id="upload-single-file-label">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
<span id="uploadFolder-label-static" *ngIf="staticTitle"> }
{{ staticTitle }}</span> @if (staticTitle) {
<span id="upload-single-file-label-static">{{ staticTitle }}</span>
}
</label> </label>
</ng-container> }
<!--Multiple Files Upload-->
@if (multipleFiles) {
<input
id="upload-multiple-files"
data-automation-id="upload-multiple-files"
type="file"
name="uploadFiles"
multiple="multiple"
accept="{{acceptedFilesType}}"
[attr.disabled]="isButtonDisabled()"
[title]="tooltip"
(change)="onFilesAdded($event)"/>
<label for="upload-multiple-files" class="adf-upload-button-label">
<mat-icon class="adf-upload-button-icon" adf-icon="file_upload" />
@if (!staticTitle) {
<span id="upload-multiple-file-label">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
}
@if (staticTitle) {
<span id="upload-multiple-file-label-static">{{ staticTitle }}</span>
}
</label>
}
</div>
}
<!--Folders Upload-->
@if (uploadFolders) {
<input
id="uploadFolder"
data-automation-id="uploadFolder"
type="file"
name="uploadFiles"
multiple="multiple"
accept="{{acceptedFilesType}}"
webkitdirectory directory
[attr.disabled]="isButtonDisabled()"
[title]="tooltip"
(change)="onDirectoryAdded($event)"/>
<label for="uploadFolder" data-automation-id="uploadFolder" class="adf-upload-button-label">
<mat-icon class="adf-upload-button-icon" adf-icon="file_upload" />
@if (!staticTitle) {
<span id="uploadFolder-label">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</span>
}
@if (staticTitle) {
<span id="uploadFolder-label-static">{{ staticTitle }}</span>
}
</label>
}
</form> </form>
lib/content-services/src/lib/upload/components/upload-button.component.ts
+2 -2
View File
@@ -24,13 +24,13 @@ import { Node } from '@alfresco/js-api';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { PermissionModel } from '../../document-list/models/permissions.model'; import { PermissionModel } from '../../document-list/models/permissions.model';
import { UploadBase } from './base-upload/upload-base'; import { UploadBase } from './base-upload/upload-base';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { TranslatePipe } from '@ngx-translate/core'; import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
selector: 'adf-upload-button', selector: 'adf-upload-button',
imports: [CommonModule, MatButtonModule, TranslatePipe, IconModule], imports: [MatButtonModule, TranslatePipe, IconModule],
templateUrl: './upload-button.component.html', templateUrl: './upload-button.component.html',
styleUrls: ['./upload-button.component.scss'], styleUrls: ['./upload-button.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None