Advertisement
Guest User

DevExtreme FileUploader drag&drop Edge support

a guest
Oct 12th, 2017
286
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { Directive, HostListener } from '@angular/core';
  2. import { DxFileUploaderComponent } from 'devextreme-angular/ui/file-uploader';
  3.  
  4. @Directive({
  5.     // tslint:disable-next-line:directive-selector
  6.     selector: 'dx-file-uploader'
  7. })
  8. export class DxFileUploaderDirective {
  9.     private $element: any;
  10.     private $uploaderContainer: any;
  11.  
  12.     constructor(private dxFileUploader: DxFileUploaderComponent) {
  13.     }
  14.  
  15.     private isIeOrEdgeBrowser(): boolean {
  16.         let ua = navigator.userAgent;
  17.         return ua.indexOf('Edge') !== -1 ||
  18.                ua.indexOf('MSIE') !== -1 ||
  19.                ua.indexOf('Trident') !== -1;
  20.     }
  21.  
  22.     @HostListener('onInitialized', ['$event'])
  23.     handleOnInitializedEvent(e) {
  24.         if (!this.isIeOrEdgeBrowser()) {
  25.             return;
  26.         }
  27.  
  28.         this.$element = e.element;
  29.         setTimeout(this.addDragAndDropForEdgeBrowser.bind(this), 100);
  30.     }
  31.  
  32.     private addDragAndDropForEdgeBrowser(): void {
  33.         this.$uploaderContainer = this.$element.find('.dx-fileuploader-input-container');
  34.  
  35.         this.$uploaderContainer.css('display', '');
  36.         this.$uploaderContainer[0].addEventListener('dragenter', this.onDragEnter.bind(this), false);
  37.         this.$uploaderContainer[0].addEventListener('dragover', this.onDragOver.bind(this), false);
  38.         this.$uploaderContainer[0].addEventListener('dragleave', this.onDragLeave.bind(this), false);
  39.         this.$uploaderContainer[0].addEventListener('drop', this.onDrop.bind(this), false);
  40.     }
  41.  
  42.     private onDragEnter(e): void {
  43.         e.stopPropagation();
  44.         e.preventDefault();
  45.  
  46.         console.log('enter');
  47.  
  48.         this.$element.addClass('dx-fileuploader-dragover');
  49.     }
  50.  
  51.     private onDragOver(e): void {
  52.         e.stopPropagation();
  53.         e.preventDefault();
  54.     }
  55.  
  56.     private onDragLeave(e): void {
  57.         this.$element.removeClass('dx-fileuploader-dragover');
  58.     }
  59.  
  60.     private onDrop(e): void {
  61.         this.$element.removeClass('dx-fileuploader-dragover');
  62.         if (e.dataTransfer.files.length) {
  63.             let files = [];
  64.             for (let i = 0; i < e.dataTransfer.files.length; i++) {
  65.                 files.push(e.dataTransfer.files.item(i));
  66.             }
  67.             this.dxFileUploader.instance.option('value', files);
  68.         }
  69.     }
  70. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement