micord/ervu-lkrp-ul
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'feature/SUPPORT-8381_file_upload' into test/SUPPORT-8381_file_upload_test

Browse source
This commit is contained in:
Alexandr Shalaginov 2024-07-29 13:23:03 +03:00
commit fc975d2c71
2 changed files with 24 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/resources/template/ervu/component/ErvuFileUpload.html
View file

@ -7,14 +7,15 @@
*ngIf="(!maxFilesToUpload || uploader.queue.length < maxFilesToUpload) && isDropZoneVisible">
<span class="select-file-field-text">{{selectFileFieldText}}</span>
<button class="select-file-btn" (click)="openFileChooseDialog()">{{selectFileButtonName}}</button>
<input type="file"
class="file-input"
ng2FileSelect
[uploader]="uploader"
[multiple]="!maxFilesToUpload || maxFilesToUpload > 1"
[accept]="getExtensions()"
hidden>
</div>
<!-- input is out of file-drop-zone because after change ngIf condition input doesn't firing events -->
<input type="file"
class="file-input"
ng2FileSelect
[uploader]="uploader"
[multiple]="!maxFilesToUpload || maxFilesToUpload > 1"
[accept]="getExtensions()"
hidden>
<div class="selected-file-list" *ngIf="isFilesListVisible">
<div class="selected-file" *ngFor="let item of uploader.queue">
<span class="selected-file-name">{{item?.file?.name}}</span>

22
frontend/src/ts/ervu/component/fileupload/ErvuFileUpload.ts
View file

@ -51,9 +51,10 @@ export class ErvuFileUpload extends InputControl {
protected isFilesListVisible: boolean = true;
protected isProgressBarVisible: boolean = false;
private fileInputEl: any;
private fileInputEl: HTMLInputElement;
private url: string = '/backend/employee/document';
private messagesService: MessagesService;
private isUploadErrorOccurred = false;
constructor(el: ElementRef, cd: ChangeDetectorRef) {
super(el, cd);
@ -95,7 +96,7 @@ export class ErvuFileUpload extends InputControl {
ngAfterViewInit() {
super.ngAfterViewInit();
this.fileInputEl = $(this.el.nativeElement).find('.file-input');
this.fileInputEl = this.el.nativeElement.querySelector('.file-input');
}
openFileChooseDialog() {
@ -109,7 +110,9 @@ export class ErvuFileUpload extends InputControl {
removeFile(item: FileItem) {
item.remove();
this.fileInputEl.value = null;
this.fileDeletedEvent.trigger();
this.cd.markForCheck();
}
private setUploaderMethods() {
@ -133,14 +136,17 @@ export class ErvuFileUpload extends InputControl {
this.isDropZoneVisible = true;
this.isFilesListVisible = true;
this.isProgressBarVisible = false;
this.isUploadErrorOccurred = true;
this.cd.markForCheck();
};
this.uploader.onCompleteAll = () => {
this.uploader.clearQueue();
this.fileUploadEndEvent.trigger();
this.isProgressBarVisible = false;
this.cd.markForCheck();
if (!this.isUploadErrorOccurred) {
this.uploader.clearQueue();
this.fileUploadEndEvent.trigger();
this.isProgressBarVisible = false;
this.cd.markForCheck();
}
};
this.uploader.onAfterAddingFile = (fileItem: FileItem) => {
@ -162,6 +168,8 @@ export class ErvuFileUpload extends InputControl {
default:
this.messagesService.error(`Не удалось добавить файл ${item.name}.`);
}
this.fileInputEl.value = null;
this.cd.markForCheck();
};
}
@ -212,9 +220,11 @@ export class ErvuFileUpload extends InputControl {
public reset() {
//don't use super because there is no ngModel here
this.uploader.clearQueue();
this.fileInputEl.value = null;
this.isDropZoneVisible = true;
this.isFilesListVisible = true;
this.isProgressBarVisible = false;
this.isUploadErrorOccurred = false;
this.cd.markForCheck();
}
}