ba7e05e2-37c0-44c6-8725-6f617aa0d43e

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

import {
    Directive,
    ElementRef,
    EventEmitter,
    HostBinding,
    Inject,
    Input,
    NgZone,
    OnDestroy,
    OnInit,
    Output,
    Renderer2
} from '@angular/core';

import { FileSelectBaseDirective } from './file-select-base';
import { THY_UPLOAD_DEFAULT_OPTIONS, ThyUploadConfig } from './upload.config';

/**
 * @name thyFileDrop
 */
@Directive({
    selector: '[thyFileDrop]',
    standalone: true
})
export class ThyFileDropDirective extends FileSelectBaseDirective implements OnInit, OnDestroy {
    @HostBinding('class.drop-over')
    @HostBinding('class.thy-drop-over')
    isDragOver = false;
    private dragOverCustomClass: string;

    @Input() set thyFileDropClassName(value: string) {
        this.dragOverCustomClass = value;
    }

    @Output() thyOnDrop = new EventEmitter();

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

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

    public ngOnInit(): void {
        this.ngZone.runOutsideAngular(() => {
            fromEvent(this.elementRef.nativeElement, 'dragenter')
                .pipe(
                    takeUntil(this.ngUnsubscribe$),
                    tap((event: DragEvent) => {
                        event.preventDefault();
                    }),
                    filter(event => event.dataTransfer.items && event.dataTransfer.items.length > 0)
                )
                .subscribe((event: DragEvent) => {
                    if (this.checkRejectFolderAndHtmlElement(event)) {
                        const files = this.filterFilesOrItems(Array.from(event.dataTransfer.items));
                        if (!isEmpty(files)) {
                            this.ngZone.run(() => {
                                this.isDragOver = true;
                                this.toggleDropOverClassName();
                            });
                        }
                    }
                });

            fromEvent(this.elementRef.nativeElement, 'dragover')
                .pipe(takeUntil(this.ngUnsubscribe$))
                .subscribe((event: any) => {
                    event.preventDefault();
                });

            fromEvent(this.elementRef.nativeElement, 'dragleave')
                .pipe(takeUntil(this.ngUnsubscribe$))
                .subscribe((event: any) => {
                    this.ngZone.run(() => {
                        if (!this.elementRef.nativeElement.contains(event.fromElement)) {
                            this.resetDragOver();
                            this.toggleDropOverClassName();
                        }
                    });
                });

            fromEvent(this.elementRef.nativeElement, 'drop')
                .pipe(
                    takeUntil(this.ngUnsubscribe$),
                    tap((event: DragEvent) => {
                        event.preventDefault();
                    })
                )
                .subscribe((event: DragEvent) => {
                    this.ngZone.run(() => {
                        if (this.checkRejectFolderAndHtmlElement(event)) {
                            const files = this.filterFilesOrItems(event.dataTransfer ? Array.from(event.dataTransfer.files) : []);
                            if (!isEmpty(files)) {
                                this.selectFiles(event, Array.from(event.dataTransfer.files), this.thyOnDrop);
                            }
                        }
                        this.resetDragOver();
                        this.toggleDropOverClassName();
                    });
                });
        });
    }

    private checkRejectFolderAndHtmlElement(event: DragEvent) {
        // 排除文件夹和HTML元素拖拽
        const items: DataTransferItemList | DataTransferItem[] = event.dataTransfer ? event.dataTransfer.items : [];
        let res = true;
        for (let index = 0; index < items.length; index++) {
            const item = items[index];
            const entry = this.getAsEntry(item);
            if (item.kind !== 'file' || (entry && !entry.isFile)) {
                res = false;
                // console.error(`file extensions not support drag upload, kind: ${item.kind}, type: ${item.type}`);
            }
        }
        return res;
    }

    private getAsEntry(item: DataTransferItem): FileSystemEntry {
        let entry: FileSystemEntry;
        if (item['getAsEntry']) {
            // https://wiki.whatwg.org/wiki/DragAndDropEntries
            entry = item['getAsEntry']();
        } else if (item.webkitGetAsEntry) {
            entry = item.webkitGetAsEntry();
        }
        return entry;
    }

    private filterFilesOrItems(items: Array<DataTransferItem | File>): Array<DataTransferItem | File> {
        if (this.acceptType && this.acceptType != '*/*') {
            return items.filter(item => {
                return this.acceptType.includes(item.type);
            });
        } else {
            return Array.from(items);
        }
    }

    private toggleDropOverClassName() {
        if (this.dragOverCustomClass) {
            if (this.isDragOver) {
                this.renderer.addClass(this.elementRef.nativeElement, this.dragOverCustomClass);
            } else {
                this.renderer.removeClass(this.elementRef.nativeElement, this.dragOverCustomClass);
            }
        }
    }

    private setDragOverState(isDragOver: boolean) {
        this.isDragOver = isDragOver;
    }

    private resetDragOver() {
        this.setDragOverState(false);
    }

    public ngOnDestroy(): void {
        this.ngUnsubscribe$.next();
        this.ngUnsubscribe$.complete();
    }
}

1	import { isEmpty } from 'ngx-tethys/util';
2	import { fromEvent, Subject } from 'rxjs';
3	import { filter, takeUntil, tap } from 'rxjs/operators';
4
5	import {
6	Directive,
7	ElementRef,
8	EventEmitter,
9	HostBinding,
10	Inject,
11	Input,	1✔
12	NgZone,
13	OnDestroy,	×
14	OnInit,
15	Output,
16	Renderer2	×
17	} from '@angular/core';	×
18		×
19	import { FileSelectBaseDirective } from './file-select-base';	×
20	import { THY_UPLOAD_DEFAULT_OPTIONS, ThyUploadConfig } from './upload.config';	×
21		×
22	/**	×
23	* @name thyFileDrop	×
24	*/
25	@Directive({
26	selector: '[thyFileDrop]',	×
27	standalone: true	×
28	})
29	export class ThyFileDropDirective extends FileSelectBaseDirective implements OnInit, OnDestroy {	×
30	@HostBinding('class.drop-over')	×
31	@HostBinding('class.thy-drop-over')
32	isDragOver = false;	×
33	private dragOverCustomClass: string;	×
34		×
35	@Input() set thyFileDropClassName(value: string) {	×
36	this.dragOverCustomClass = value;	×
37	}	×
38
39	@Output() thyOnDrop = new EventEmitter();
40
41	private ngUnsubscribe$ = new Subject<void>();
42		×
43	constructor(
44	public elementRef: ElementRef,
45	public renderer: Renderer2,	×
46	public ngZone: NgZone,
47	@Inject(THY_UPLOAD_DEFAULT_OPTIONS) public defaultConfig: ThyUploadConfig	×
48	) {
49	super(elementRef, defaultConfig);
50	}	×
51		×
52	public ngOnInit(): void {	×
53	this.ngZone.runOutsideAngular(() => {	×
54	fromEvent(this.elementRef.nativeElement, 'dragenter')
55	.pipe(
56	takeUntil(this.ngUnsubscribe$),
57	tap((event: DragEvent) => {	×
58	event.preventDefault();
59	}),	×
60	filter(event => event.dataTransfer.items && event.dataTransfer.items.length > 0)
61	)
62	.subscribe((event: DragEvent) => {	×
63	if (this.checkRejectFolderAndHtmlElement(event)) {	×
64	const files = this.filterFilesOrItems(Array.from(event.dataTransfer.items));	×
65	if (!isEmpty(files)) {	×
66	this.ngZone.run(() => {	×
67	this.isDragOver = true;
68	this.toggleDropOverClassName();
69	});	×
70	}	×
71	}
72	});
73
74	fromEvent(this.elementRef.nativeElement, 'dragover')
75	.pipe(takeUntil(this.ngUnsubscribe$))
76	.subscribe((event: any) => {
77	event.preventDefault();	×
78	});	×
79		×
80	fromEvent(this.elementRef.nativeElement, 'dragleave')	×
81	.pipe(takeUntil(this.ngUnsubscribe$))	×
82	.subscribe((event: any) => {	×
83	this.ngZone.run(() => {	×
84	if (!this.elementRef.nativeElement.contains(event.fromElement)) {
85	this.resetDragOver();
86	this.toggleDropOverClassName();
87	}	×
88	});
89	});
90
91	fromEvent(this.elementRef.nativeElement, 'drop')	×
92	.pipe(
93	takeUntil(this.ngUnsubscribe$),	×
94	tap((event: DragEvent) => {
95	event.preventDefault();	×
96	})	×
97	)
98	.subscribe((event: DragEvent) => {	×
99	this.ngZone.run(() => {
100	if (this.checkRejectFolderAndHtmlElement(event)) {
101	const files = this.filterFilesOrItems(event.dataTransfer ? Array.from(event.dataTransfer.files) : []);	×
102	if (!isEmpty(files)) {	×
103	this.selectFiles(event, Array.from(event.dataTransfer.files), this.thyOnDrop);	×
104	}
105	}
106	this.resetDragOver();
107	this.toggleDropOverClassName();	×
108	});
109	});
110	});
111	}	×
112		×
113	private checkRejectFolderAndHtmlElement(event: DragEvent) {	×
114	// 排除文件夹和HTML元素拖拽
115	const items: DataTransferItemList \| DataTransferItem[] = event.dataTransfer ? event.dataTransfer.items : [];
116	let res = true;	×
117	for (let index = 0; index < items.length; index++) {
118	const item = items[index];
119	const entry = this.getAsEntry(item);
120	if (item.kind !== 'file' \|\| (entry && !entry.isFile)) {
121	res = false;	×
122	// console.error(`file extensions not support drag upload, kind: ${item.kind}, type: ${item.type}`);
123	}
124	}	×
125	return res;
126	}
127		×
128	private getAsEntry(item: DataTransferItem): FileSystemEntry {	×
129	let entry: FileSystemEntry;
130	if (item['getAsEntry']) {	1✔
131	// https://wiki.whatwg.org/wiki/DragAndDropEntries
132	entry = item['getAsEntry']();
133	} else if (item.webkitGetAsEntry) {
134	entry = item.webkitGetAsEntry();
135	}
136	return entry;	1✔
137	}
138
139	private filterFilesOrItems(items: Array<DataTransferItem \| File>): Array<DataTransferItem \| File> {
140	if (this.acceptType && this.acceptType != '/') {
141	return items.filter(item => {
142	return this.acceptType.includes(item.type);	1✔
143	});
144	} else {
145	return Array.from(items);
146	}
147	}
148
149	private toggleDropOverClassName() {
150	if (this.dragOverCustomClass) {
151	if (this.isDragOver) {
152	this.renderer.addClass(this.elementRef.nativeElement, this.dragOverCustomClass);
153	} else {
154	this.renderer.removeClass(this.elementRef.nativeElement, this.dragOverCustomClass);
155	}
156	}
157	}
158
159	private setDragOverState(isDragOver: boolean) {
160	this.isDragOver = isDragOver;
161	}
162
163	private resetDragOver() {
164	this.setDragOverState(false);
165	}
166
167	public ngOnDestroy(): void {
168	this.ngUnsubscribe$.next();
169	this.ngUnsubscribe$.complete();
170	}
171	}

atinc / ngx-tethys / ba7e05e2-37c0-44c6-8725-6f617aa0d43e

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