d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { coerceBooleanProperty } from 'ngx-tethys/util';
import { fromEvent, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { Component, ElementRef, EventEmitter, Inject, Input, NgZone, OnDestroy, Output, ViewChild } from '@angular/core';

import { FileSelectBaseDirective } from './file-select-base';
import { THY_UPLOAD_DEFAULT_OPTIONS, ThyUploadConfig } from './upload.config';
import { mimeTypeConvert } from './util';
import { InputBoolean, InputNumber } from 'ngx-tethys/core';

/**
 * 文件上传组件
 * @name thy-file-select,[thyFileSelect]
 * @order 10
 */
@Component({
    selector: '[thyFileSelect],thy-file-select',
    templateUrl: './file-select.component.html',
    standalone: true
})
export class ThyFileSelectComponent extends FileSelectBaseDirective implements OnDestroy {
    private multiple: boolean;

    private acceptFolder: boolean;

    /**
     * 文件选择事件
     */
    @Output() thyOnFileSelect = new EventEmitter();

    @ViewChild('fileInput', { static: true }) fileInput: ElementRef<HTMLInputElement>;

    /**
     * 文件是否多选
     * @default false
     */
    @Input()
    @InputBoolean()
    set thyMultiple(value: boolean) {
        this.multiple = coerceBooleanProperty(value);
        if (this.multiple) {
            this.fileInput.nativeElement.setAttribute('multiple', '');
        } else {
            this.fileInput.nativeElement.removeAttribute('multiple');
        }
    }

    @Input()
    @InputBoolean()
    set thyAcceptFolder(value: boolean) {
        this.acceptFolder = coerceBooleanProperty(value);
        if (this.acceptFolder) {
            this.fileInput.nativeElement.setAttribute('webkitdirectory', '');
        } else {
            this.fileInput.nativeElement.removeAttribute('webkitdirectory');
        }
    }

    /**
     * 指定文件后缀类型（MIME_Map），例如".xls,xlsx"，"[".doc",".docx"]"
     * @type Array<string> | string
     */
    @Input()
    set thyAcceptType(value: Array<string> | string) {
        this.acceptType = mimeTypeConvert(value);
    }

    /**
     * 文件上传大小限制，单位`kb`，`0`表示没有任何限制
     */
    @Input()
    @InputNumber()
    set thySizeThreshold(value: number) {
        this.sizeThreshold = value;
    }

    private destroy$ = new Subject<void>();

    constructor(public elementRef: ElementRef, @Inject(THY_UPLOAD_DEFAULT_OPTIONS) public defaultConfig: ThyUploadConfig, ngZone: NgZone) {
        super(elementRef, defaultConfig);

        ngZone.runOutsideAngular(() =>
            fromEvent(elementRef.nativeElement, 'click')
                .pipe(takeUntil(this.destroy$))
                .subscribe(() => {
                    this.fileInput.nativeElement.click();
                })
        );
    }

    selectFile($event: Event) {
        const files = this.fileInput.nativeElement.files;
        if (files && files.length > 0) {
            this.selectFiles($event, Array.from(files), this.thyOnFileSelect);
            this.fileInput.nativeElement.value = '';
        }
    }

    ngOnDestroy(): void {
        this.destroy$.next();
    }
}

1	import { coerceBooleanProperty } from 'ngx-tethys/util';
2	import { fromEvent, Subject } from 'rxjs';
3	import { takeUntil } from 'rxjs/operators';
4
5	import { Component, ElementRef, EventEmitter, Inject, Input, NgZone, OnDestroy, Output, ViewChild } from '@angular/core';
6
7	import { FileSelectBaseDirective } from './file-select-base';
8	import { THY_UPLOAD_DEFAULT_OPTIONS, ThyUploadConfig } from './upload.config';
9	import { mimeTypeConvert } from './util';
10	import { InputBoolean, InputNumber } from 'ngx-tethys/core';
11
12	/**
13	* 文件上传组件
14	* @name thy-file-select,[thyFileSelect]
15	* @order 10
16	*/	1✔
17	@Component({
18	selector: '[thyFileSelect],thy-file-select',	×
19	templateUrl: './file-select.component.html',	×
20	standalone: true	×
21	})
22	export class ThyFileSelectComponent extends FileSelectBaseDirective implements OnDestroy {
23	private multiple: boolean;	×
24
25	private acceptFolder: boolean;
26
27	/**	×
28	* 文件选择事件	×
29	*/	×
30	@Output() thyOnFileSelect = new EventEmitter();
31
32	@ViewChild('fileInput', { static: true }) fileInput: ElementRef<HTMLInputElement>;	×
33
34	/**
35	* 文件是否多选
36	* @default false	×
37	*/
38	@Input()
39	@InputBoolean()	×
40	set thyMultiple(value: boolean) {
41	this.multiple = coerceBooleanProperty(value);
42	if (this.multiple) {	×
43	this.fileInput.nativeElement.setAttribute('multiple', '');	×
44	} else {	×
45	this.fileInput.nativeElement.removeAttribute('multiple');	×
46	}	×
47	}	×
48
49	@Input()
50	@InputBoolean()	×
51	set thyAcceptFolder(value: boolean) {
52	this.acceptFolder = coerceBooleanProperty(value);
53	if (this.acceptFolder) {
54	this.fileInput.nativeElement.setAttribute('webkitdirectory', '');	×
55	} else {	×
56	this.fileInput.nativeElement.removeAttribute('webkitdirectory');	×
57	}	×
58	}
59
60	/**
61	* 指定文件后缀类型（MIME_Map），例如".xls,xlsx"，"[".doc",".docx"]"	×
62	* @type Array<string> \| string
63	*/	1✔
64	@Input()
65	set thyAcceptType(value: Array<string> \| string) {
66	this.acceptType = mimeTypeConvert(value);
67	}
68		1✔
69	/**
70	* 文件上传大小限制，单位`kb`，`0`表示没有任何限制
71	*/
72	@Input()
73	@InputNumber()
74	set thySizeThreshold(value: number) {
75	this.sizeThreshold = value;
76	}
77		1✔
78	private destroy$ = new Subject<void>();
79
80	constructor(public elementRef: ElementRef, @Inject(THY_UPLOAD_DEFAULT_OPTIONS) public defaultConfig: ThyUploadConfig, ngZone: NgZone) {
81	super(elementRef, defaultConfig);
82		1✔
83	ngZone.runOutsideAngular(() =>
84	fromEvent(elementRef.nativeElement, 'click')
85	.pipe(takeUntil(this.destroy$))
86	.subscribe(() => {
87	this.fileInput.nativeElement.click();	1✔
88	})
89	);
90	}
91
92	selectFile($event: Event) {	1✔
93	const files = this.fileInput.nativeElement.files;
94	if (files && files.length > 0) {
95	this.selectFiles($event, Array.from(files), this.thyOnFileSelect);
96	this.fileInput.nativeElement.value = '';
97	}
98	}
99
100	ngOnDestroy(): void {
101	this.destroy$.next();
102	}
103	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous