@aquera/nile-elements 1.0.1-beta-1.5 → 1.0.1-beta-1.6

package/src/nile-file-upload/nile-file-upload.template.ts

@@ -2,204 +2,216 @@ import { html, TemplateResult } from 'lit';
 import './nile-file-upload.css';
 import { DragHandler } from './utils/drag-drop.util';
 import { classMap } from 'lit-html/directives/class-map.js';
-import { FileUploadState } from './types/file-upload.enums';
+import { FileUploadDefaults, FileUploadState } from './types/file-upload.enums';
+import { truncateString } from './utils/file-validation.util';
+import { NileFileUpload } from './nile-file-upload';
 
-let dragHandlerInstance: DragHandler;
-export const getDragHandler = (dragHandler: DragHandler): void => {
-  dragHandlerInstance = dragHandler;
-}
-
-export const getHorizontalDefaultState = (
+const baseHorizontalState = (
   browseFiles: Function,
   title: string,
   subtitle: string,
+  disabled: boolean,
+  dragHandler: DragHandler,
+  state: FileUploadState,
   errorMessage: string,
-  state: FileUploadState
-): TemplateResult => html`
-  <div>
-    <div class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true })}>
-      <div class="inner-div">
-        <slot name="uploadIcon">
-          <nile-icon name="var(--nile-icon-upload, var(--ng-icon-upload-01))" size="24" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => {
+  truncateString(nileFileUpload);
+  return html`
+  <div class="wrapper" part="horizontal-wrapper">
+    <div part="horizontal-div" class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true, 'disable': disabled })}>
+      <div part="inner-div" class="inner-div">
+        <slot class="upload-icon-slot" name="upload-icon">
+          <nile-icon name="upload" size="24"></nile-icon>
         </slot>
-        <div class="content">
-          <slot name="title">
-            <h4>${title}</h4>
-          </slot>
-          <slot name="subtitle">
-            <p>${subtitle}</p>
-          </slot>
+        <div part="content" class="content">
+          <div class="title">${title}</div>
+          <div class="subtitle">${subtitle}</div>
         </div>
       </div>
       <input
         type="file"
-        @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
+        ?disabled=${disabled}
+        @change=${(e: Event | DragEvent) => { dragHandler.handleFiles(e) }}
         multiple
+        accept=${allowedTypes.join(',')}
       />
-      <slot @click=${browseFiles} name="browseFileButton">
-        <nile-button variant="tertiary">
+      <slot class="browse-file-button" @click=${disabled ? undefined : browseFiles} name="browse-file-button">
+        <nile-button variant="tertiary" ?disabled=${disabled}>
           Browse File
         </nile-button>
       </slot>
     </div>
-    ${errorMessage ?
+    ${errorMessage || nileFileUpload.state === FileUploadState.ERROR ?
       html`<div class="upload-error">
-        <nile-icon name="var(--nile-icon-warning, var(--ng-icon-alert-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="12" color="red"></nile-icon>
-        <span>${errorMessage}</span>
+        <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
+        ${
+          nileFileUpload.isStringTruncated
+            ? html`<nile-tooltip content=${errorMessage || FileUploadDefaults.CUSTOM_ERROR}>
+                <span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>
+              </nile-tooltip>`
+            : html`<span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>`
+        }
       </div>` :
       html``
     }
   </div>
-`;
+  `;
+}
 
-export const getHorizontalDisabledtState = (
+export const getHorizontalDefaultState = (
   browseFiles: Function,
   title: string,
-  subtitle: string
-): TemplateResult => html`
-  <div
-    class="horizontal-div disable"
-  >
-     <div class="inner-div">
-      <slot name="uploadIcon">
-        <nile-icon name="var(--nile-icon-upload, var(--ng-icon-upload-01))" size="24" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
-      </slot>
-      <div class="content">
-        <slot name="title">
-          <h4>${title}</h4>
-        </slot>
-        <slot name="subtitle">
-          <p>${subtitle}</p>
-        </slot>
-      </div>
-    </div>
-    <input
-      type="file"
-      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
-      multiple
-    />
-    <slot @click=${browseFiles} name="browseFileButton">
-      <nile-button variant="tertiary">
-        Browse File
-      </nile-button>
-    </slot>
-  </div>
-`;
+  subtitle: string,
+  dragHandler: DragHandler,
+  state: FileUploadState,
+  errorMessage: string,
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
+
+export const getHorizontalDisabledState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string,
+  dragHandler: DragHandler,
+  state: FileUploadState,
+  errorMessage: string,
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
+
+export const getHorizontalErrorState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string,
+  dragHandler: DragHandler,
+  state: FileUploadState,
+  errorMessage: string,
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
 
 export const getHorizontalDragState = (): TemplateResult => html`
-  <div class="horizontal-div dragging">
+  <div part="horizontal-drag-state" class="horizontal-div dragging">
     <div class="icons-container">
       <nile-icon
         color="var(--nile-colors-blue-500)"
-        name="var(--nile-icon-general, var(--ng-icon-file-06))"
-        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+        name="general"
         size="20"
         class="general-icon"
       ></nile-icon>
       <nile-icon
         color="var(--nile-colors-blue-500)"
-        name="var(--nile-icon-image, var(--ng-icon-image-03))"
-        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+        name="image"
         size="24"
         class="image-icon"
       ></nile-icon>
     </div>
-    <p>Drop files here to upload</p>
+    <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>
   </div>
 `;
 
 //  Vertical States
-export const getVerticalDefaultState = (
+const baseVerticalState = (
   browseFiles: Function,
   title: string,
   subtitle: string,
+  disabled: boolean,
+  dragHandler: DragHandler,
   errorMessage: string,
-  state: FileUploadState
-): TemplateResult => html`
-  <div>
-    <div class=${classMap({ 'hover-border': state === "hover", 'vertical-div': true })}>
-      <slot name="uploadIcon">
-        <nile-icon name="var(--nile-icon-upload, var(--ng-icon-upload-01))" size="24" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => {
+  truncateString(nileFileUpload);
+  return html`
+  <div part="vertical-wrapper" class="wrapper">
+    <div part="vertical-default" class="vertical-default vertical-div ${disabled ? 'disable' : ''}">
+      <slot name="upload-icon">
+        <nile-icon name="upload" size="24"></nile-icon>
       </slot>
-      <div class="content-container">
-        <slot name="title">
-          <h4>${title}</h4>
-        </slot>
-        <slot name="subtitle">
-          <p>${subtitle}</p>
-        </slot>
+      <div part="vertical-content-container" class="content-container">
+        <div class="title">${title}</div>
+        <div class="subtitle">${subtitle}</div>
       </div>
       <input
         type="file"
-        @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
+        ?disabled=${disabled}
+        @change=${(e: Event | DragEvent) => dragHandler.handleFiles(e)}
         multiple
+        accept=${allowedTypes.join(',')}
       />
-      <slot @click=${browseFiles} name="browseFileButton">
-        <nile-button variant="tertiary">
+      <slot @click=${disabled ? undefined : browseFiles} name="browse-file-button">
+        <nile-button variant="tertiary" ?disabled=${disabled}>
           Browse File
         </nile-button>
       </slot>
     </div>
-    ${errorMessage ?
-      html`<div class="upload-error">
-        <nile-icon name="var(--nile-icon-warning, var(--ng-icon-alert-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="12" color="red"></nile-icon>
-        <span>${errorMessage}</span>
+    ${errorMessage || nileFileUpload.state === FileUploadState.ERROR ?
+      html`<div class="vertical-upload-error">
+        <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
+        ${
+          nileFileUpload.isStringTruncated
+            ? html`<nile-tooltip content=${errorMessage || FileUploadDefaults.CUSTOM_ERROR}>
+                <span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>
+              </nile-tooltip>`
+            : html`<span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>`
+        }
       </div>` :
       html``
     }
   </div>
-`;
+  `;
+}
+
+export const getVerticalDefaultState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string,
+  dragHandler: DragHandler,
+  errorMessage: string,
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes, nileFileUpload);
 
 export const getVerticalDisabledState = (
   browseFiles: Function,
   title: string,
-  subtitle: string
-): TemplateResult => html`
-  <div
-    class="vertical-deafult vertical-div disable"
-  >
-    <slot name="uploadIcon">
-      <nile-icon name="var(--nile-icon-upload, var(--ng-icon-upload-01))" size="24" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
-    </slot>
-    <div class="content-container">
-      <slot name="title">
-        <h4>${title}</h4>
-      </slot>
-      <slot name="title">
-        <p>${subtitle}</p>
-      </slot>
-    </div>
-    <input
-      type="file"
-      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
-      multiple
-    />
-    <slot @click=${browseFiles} name="browseFileButton">
-      <nile-button variant="tertiary">
-        Browse File
-      </nile-button>
-    </slot>
-  </div>
-`;
+  subtitle: string,
+  dragHandler: DragHandler,
+  errorMessage: string,
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes, nileFileUpload);
+
+export const getVerticalErrorState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string,
+  dragHandler: DragHandler,
+  errorMessage: string,
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes, nileFileUpload);
+
 
 export const getVerticalDragState = (): TemplateResult => html`
-  <div class="vertical-div vertical-drag">
+  <div part="vertical-drag-state" class="vertical-div vertical-drag">
     <div class="icons-container">
       <nile-icon
         color="var(--nile-colors-blue-500)"
-        name="var(--nile-icon-general, var(--ng-icon-file-06))"
-        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+        name="general"
         size="20"
         class="general-icon"
       ></nile-icon>
       <nile-icon
         color="var(--nile-colors-blue-500)"
-        name="var(--nile-icon-image, var(--ng-icon-image-03))"
-        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+        name="image"
         size="24"
         class="image-icon"
       ></nile-icon>
     </div>
-    <p>Drop files here to upload</p>
+    <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>
   </div>
 `;

package/src/nile-file-upload/nile-file-upload.ts

@@ -9,7 +9,6 @@ import { styles } from './nile-file-upload.css';
 import { ChangedPropsInterface } from './types/file-upload.type'
 import NileElement from '../internal/nile-element';
 import { DragHandler } from './utils/drag-drop.util';
-import { getDragHandler } from './nile-file-upload.template'
 import { FileUploadDefaults } from './types/file-upload.enums';
 import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
@@ -17,11 +16,13 @@ import { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent }
 import { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles, cancelFileUpload } from './utils/file-validation.util';
 import {
   getHorizontalDefaultState,
-  getHorizontalDisabledtState,
   getHorizontalDragState,
   getVerticalDefaultState,
   getVerticalDisabledState,
   getVerticalDragState,
+  getHorizontalErrorState,
+  getVerticalErrorState,
+  getHorizontalDisabledState
 } from './nile-file-upload.template';
 
 /**
@@ -40,11 +41,12 @@ export class NileFileUpload extends NileElement {
     return [styles];
   }
 
-  @property({ type: Number }) size: number = 0;
+  @property({ type: String }) size: string = "10MB";
   @property({ type: Boolean}) error: boolean = false;
   @property({ type: String }) errorMessage: string = "";
-  @property({ type: Boolean}) allowMultiple: boolean = true;
+  @property({ type: Boolean}) allowMultiple: boolean = false;
   @property({ type: Boolean}) allowDuplicates: boolean = false;
+  @property({ type: Array  }) allowedTypes: string[] = [];
   @property({ type: Array  }) uploadedFiles: File[] = [];
   @property({ type: String }) title: string = FileUploadDefaults.TITLE;
   @property({ type: String }) subtitle: string = FileUploadDefaults.SUBTITLE;
@@ -54,6 +56,8 @@ export class NileFileUpload extends NileElement {
   @property({ type: Boolean}) autoUpload: boolean = true;
   @query('input') input!: HTMLInputElement;
   public uploadRequests = new Map<File, XMLHttpRequest>();
+  public fileSizeExceededFilesNumber: number = 0;
+  public isStringTruncated: boolean = false;
   
   private dragHandler!: DragHandler;
 
@@ -66,7 +70,6 @@ export class NileFileUpload extends NileElement {
     super.firstUpdated(changedProps);
 
     this.dragHandler = new DragHandler();
-    getDragHandler(this.dragHandler);
     setUpDragHandler(this, this.dragHandler);
     addInternalListeners(this, this.dragHandler, this.uploadRequests);
     addGlobalListeners(this.dragHandler);
@@ -76,16 +79,19 @@ export class NileFileUpload extends NileElement {
     super.updated(changedProps);
 
     if (changedProps.has('uploadedFiles')) {
-      if(this.uploadedFiles.length === 0) this.errorMessage = "";
-      if(!this.fileUploadUrl) {
-        this.errorMessage = FileUploadError.UPLOAD_URL_REQUIRED;
-        return;
+      if(this.fileUploadUrl && this.autoUpload) {
+        uploadFiles(this);
       }
-      uploadFiles(this);
       this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
-
     } else if (changedProps.has('state')) {
-      this.dragHandler.setValuesInDragHandler(this.state, this.size, this.uploadedFiles);
+      this.dragHandler.setValuesInDragHandler(this.state);
+    }
+
+    if(changedProps.has('autoUpload') && this.autoUpload) {
+      if(this.fileUploadUrl && this.autoUpload) {
+        uploadFiles(this);
+      }
+      this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
     }
   }
 
@@ -114,32 +120,38 @@ export class NileFileUpload extends NileElement {
   private getHorizontalState(): TemplateResult {
     switch(this.state) {
       case FileUploadState.DEFAULT:
-        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
+        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
 
       case FileUploadState.DISABLED:
-        return getHorizontalDisabledtState(this.browseFiles, this.title, this.subtitle);
+        return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
 
       case FileUploadState.DRAG:
         return getHorizontalDragState();
 
+      case FileUploadState.ERROR:
+        return getHorizontalErrorState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
+
       default:
-        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
+        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
     }
   }
 
   private getVerticalState(): TemplateResult {
     switch(this.state) {
       case FileUploadState.DEFAULT:
-        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
+        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
 
       case FileUploadState.DISABLED:
-        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle);
+        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
 
       case FileUploadState.DRAG:
         return getVerticalDragState();
 
+      case FileUploadState.ERROR:
+        return getVerticalErrorState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
+
       default:
-        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
+        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
     }
   }
 

package/src/nile-file-upload/types/file-upload.enums.ts

@@ -2,7 +2,8 @@ export enum FileUploadState {
   DEFAULT = 'default',
   DISABLED = 'disabled',
   HOVER = 'hover',
-  DRAG = 'drag'
+  DRAG = 'drag',
+  ERROR = 'error'
 }
 
 export enum FileUploadVariant {
@@ -12,10 +13,12 @@ export enum FileUploadVariant {
 
 export enum FileUploadError {
   INVALID_FORMAT = "Invalid file format! Upload valid file.",
-  SIZE_EXCEEDED = "File exceeds size limit! Upload smaller file.",
+  SIZE_LIMIT_EXCEEDED = "File exceeds size limit! Upload smaller file.",
   MULTIPLE_NOT_ALLOWED = "Please Upload Single File!",
   DUPLICATES_NOT_ALLOWED = "Duplicate Files Are Not Allowed!",
   UPLOAD_URL_REQUIRED = "Upload URL is required!",
+  SERVER_SIDE_ERROR = "Error from server! Please try again later.",
+  NETWORK_ERROR = "Network error! Please try again later."
 }
 
 export enum FileUploadEvent {
@@ -23,9 +26,11 @@ export enum FileUploadEvent {
   NILE_BROWSE = "nile-browse",
   NILE_DRAG = "nile-drag",
   NILE_CHANGE = "nile-change",
+  NILE_UPLOADING = "nile-uploading",
   NILE_UPLOAD_PROGRESS = "nile-upload-progress",
   NILE_UPLOAD_SUCCESS = "nile-upload-success",
   NILE_UPLOAD_CANCELLED = "nile-upload-cancelled",
+  NILE_SIZE_EXCEED_FILES = "nile-size-exceed-files",
   NILE_CANCEL_UPLOAD = "nile-cancel-upload",
   NILE_NETWORK_ERROR = "nile-network-error",
   SERVER_SIDE_ERROR = "nile-server-error",
@@ -36,4 +41,6 @@ export enum FileUploadDefaults {
   TITLE = 'Drag and drop to upload',
   SUBTITLE = 'PNG, JPG or SVG (upto 1MB) | 1:1 ratio',
   ERROR_MESSAGE = 'Invalid File Format.',
+  DRAG_STATE_DEFAULT = 'Drop files here to upload',
+  CUSTOM_ERROR = 'Error Occured!'
 };

package/src/nile-file-upload/utils/drag-drop.util.ts

@@ -1,9 +1,8 @@
-import { FileUploadError, FileUploadState } from "../types";
+import { preventDefaultAndStopPropagation } from "./file-validation.util";
+import { FileUploadState } from "../types";
 
 export class DragHandler {
   private currentState: FileUploadState = FileUploadState.DEFAULT;
-  private size: number = 0;
-  private uploadedFiles: File[] = [];
 
   private stateChangeCallback?: (state: FileUploadState) => void;
   private fileDropCallback?: (files: File[]) => void;
@@ -15,10 +14,8 @@ export class DragHandler {
     this.errorMessageCallback = callback;
   }
 
-  public setValuesInDragHandler(state: FileUploadState, size: number, uploadedFiles: File[]): void {
+  public setValuesInDragHandler(state: FileUploadState): void {
     this.currentState = state;
-    this.size = size;
-    this.uploadedFiles = uploadedFiles;
   }
 
   public onFileDrop(callback: (files: File[]) => void): void {
@@ -37,31 +34,31 @@ export class DragHandler {
   }
 
   public dragEnter(e: DragEvent): void {
-    if (this.currentState === FileUploadState.DISABLED) return;
+    preventDefaultAndStopPropagation(e);
 
-    e.preventDefault();
+    if (this.currentState === FileUploadState.DISABLED) return;
     this.errorMessageCallback?.("");
     this.setState(FileUploadState.DRAG);
   }
 
   public dragLeave(e: DragEvent): void {
+    preventDefaultAndStopPropagation(e);
+    
     if (this.currentState === FileUploadState.DISABLED) return;
 
-    e.preventDefault();
     this.setState(FileUploadState.DEFAULT);
   }
 
   public dragOver(e: DragEvent): void {
+    preventDefaultAndStopPropagation(e);
+    
     if (this.currentState === FileUploadState.DISABLED) return;
-
-    e.preventDefault();
   }
 
   public drop(e: DragEvent): void {
+    preventDefaultAndStopPropagation(e);
+    
     if (this.currentState === FileUploadState.DISABLED) return;
-
-    e.preventDefault();
-    e.stopPropagation();
     this.setState(FileUploadState.DEFAULT);
     this.handleFiles(e);
   }
@@ -69,32 +66,31 @@ export class DragHandler {
   public handleDocumentDrop(e: DragEvent): void {
     if (this.currentState === FileUploadState.DISABLED) return;
 
-    e.preventDefault();
-    e.stopPropagation();
+    preventDefaultAndStopPropagation(e);
+    
     this.setState(FileUploadState.DEFAULT);
   }
 
   public preventDragOver(e: DragEvent): void {
-    e.preventDefault();
+    preventDefaultAndStopPropagation(e); 
   }
 
   public preventDrop(e: DragEvent): void {
-    e.preventDefault();
-    e.stopPropagation();
+    preventDefaultAndStopPropagation(e); 
   }
 
-  public handleFiles(event: Event | DragEvent): void {
+  public handleFiles(e: Event | DragEvent): void {
+    preventDefaultAndStopPropagation(e);
     if (this.currentState === FileUploadState.DISABLED) return;
 
-    event.preventDefault?.();
     let files: FileList | null = null;
 
-    if ('dataTransfer' in event && event.dataTransfer) {
-      files = event.dataTransfer.files;
+    if ('dataTransfer' in e && e.dataTransfer) {
+      files = e.dataTransfer.files;
     }
 
-    if (!files && event.target instanceof HTMLInputElement) {
-      files = event.target.files;
+    if (!files && e.target instanceof HTMLInputElement) {
+      files = e.target.files;
     }
 
     if (files && files.length > 0) {
@@ -102,5 +98,9 @@ export class DragHandler {
 
       this.fileDropCallback?.(newFiles);
     }
+
+    if(e.target instanceof HTMLInputElement) {
+      e.target.value = "";
+    }
   }
 }