Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { Directive, HostListener } from '@angular/core';
- import { DxFileUploaderComponent } from 'devextreme-angular/ui/file-uploader';
- @Directive({
- // tslint:disable-next-line:directive-selector
- selector: 'dx-file-uploader'
- })
- export class DxFileUploaderDirective {
- private $element: any;
- private $uploaderContainer: any;
- constructor(private dxFileUploader: DxFileUploaderComponent) {
- }
- private isIeOrEdgeBrowser(): boolean {
- let ua = navigator.userAgent;
- return ua.indexOf('Edge') !== -1 ||
- ua.indexOf('MSIE') !== -1 ||
- ua.indexOf('Trident') !== -1;
- }
- @HostListener('onInitialized', ['$event'])
- handleOnInitializedEvent(e) {
- if (!this.isIeOrEdgeBrowser()) {
- return;
- }
- this.$element = e.element;
- setTimeout(this.addDragAndDropForEdgeBrowser.bind(this), 100);
- }
- private addDragAndDropForEdgeBrowser(): void {
- this.$uploaderContainer = this.$element.find('.dx-fileuploader-input-container');
- this.$uploaderContainer.css('display', '');
- this.$uploaderContainer[0].addEventListener('dragenter', this.onDragEnter.bind(this), false);
- this.$uploaderContainer[0].addEventListener('dragover', this.onDragOver.bind(this), false);
- this.$uploaderContainer[0].addEventListener('dragleave', this.onDragLeave.bind(this), false);
- this.$uploaderContainer[0].addEventListener('drop', this.onDrop.bind(this), false);
- }
- private onDragEnter(e): void {
- e.stopPropagation();
- e.preventDefault();
- console.log('enter');
- this.$element.addClass('dx-fileuploader-dragover');
- }
- private onDragOver(e): void {
- e.stopPropagation();
- e.preventDefault();
- }
- private onDragLeave(e): void {
- this.$element.removeClass('dx-fileuploader-dragover');
- }
- private onDrop(e): void {
- this.$element.removeClass('dx-fileuploader-dragover');
- if (e.dataTransfer.files.length) {
- let files = [];
- for (let i = 0; i < e.dataTransfer.files.length; i++) {
- files.push(e.dataTransfer.files.item(i));
- }
- this.dxFileUploader.instance.option('value', files);
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement