@aquera/nile-elements 0.1.40-beta-1.6 → 0.1.40-beta-1.8

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

@@ -13,16 +13,12 @@ import {css} from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   * {
-    padding: var(--nile-spacing-none, var(--ng-spacing-none));
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    padding: 0px;
+    margin: 0px;
     box-sizing: border-box;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body))
   }
 
   .wrapper {
@@ -39,28 +35,24 @@ export const styles = css`
   }
 
   .horizontal-div {
-    height: var(--nile-height-60px, var(--ng-height-60px));
+    margin-bottom: 10px;
+    height: 62px;
     max-width: 648px;
+    width: max(648px, 100%);
     min-width: 230px;
-    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    padding: 12px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-dashed, var(--ng-border-style-solid))
-      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px dashed var(--nile-colors-neutral-500);
+    color: var(--nile-colors-dark-900);
+    background-color: var(--nile-colors-white-base);
   }
 
   .hover-border {
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-dashed, var(--ng-border-style-solid))
-      var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+    border-color: var(--nile-colors-primary-600);
   }
 
   .vertical-div {
@@ -68,24 +60,24 @@ export const styles = css`
     height: auto;
     min-width: 240px;
     width: 240px;
-    display: flex !important;
+    display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-spacing-lg, var(--ng-spacing-3xl));
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
-    border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    position: relative;
+    padding: 12px;
+    border-radius: var(--nile-radius-radius-xs);
+    color: var(--nile-colors-dark-900);
+    border: 1px dashed var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-white-base);
+    position: relative; 
   }
 
   .vertical-div:hover {
-    border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+    border-color: var(--nile-colors-blue-500);
   }
 
   .outer-div-border {
-    border: var(--nile-border-width-1, var(--ng-border-width-2)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .inner-div {
@@ -97,47 +89,43 @@ export const styles = css`
   }
 
   .content {
-    display: flex;
+    display: flex;  
     flex-direction: column;
     justify-content: center;
     gap: 8px;
   }
 
   .content h4 {
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-900);
   }
-
+      
   .content p {
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
+    margin: 0px;
+    font-size: var(--nile-type-scale-2);
+    color: var(--nile-colors-neutral-700);
   }
 
   /*  DISABLED STATE */
   .disable {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
-    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));
-    opacity: var(--nile-opacity-50, var(--ng-opacity-50));
+    background-color: var(--nile-colors-dark-200);
+    opacity: 0.5;
     pointer-events: none;
   }
 
   /* DRAGGING */
   .dragging {
-    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-dashed, var(--ng-border-style-solid))
-      var(--nile-colors-primary-600, var(--ng-colors-border-primary));
+    background-color: var(--nile-colors-blue-100);
+    border-color: var(--nile-colors-primary-600);
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 18px;
-    color: var(--nile-colors-blue-700, var(--ng-colors-fg-primary-900));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular), var(--ng-font-weight-400);
+    color: var(--nile-colors-blue-700);
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
   }
 
   .icons-container {
@@ -168,12 +156,9 @@ export const styles = css`
     align-items: center;
     gap: 18px;
     box-sizing: border-box;
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))
-      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border: 1px solid var(--nile-colors-neutral-400)
   }
-
+  
   .uploading:hover {
     border-color: var(--nile-colors-neutral-400);
   }
@@ -189,8 +174,8 @@ export const styles = css`
     width: 100%;
     display: flex;
     justify-content: space-between;
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
   }
 
   .progress-bar-container p {
@@ -198,20 +183,17 @@ export const styles = css`
   }
 
   .progress-bar-container > p {
-    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
+    font-size: var(--nile-type-scale-1);
+    color: var(--nile-colors-dark-500);
   }
 
   /* PREVIEW STATE */
   .preview {
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))
-      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .preview:hover {
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-400);
   }
 
   .preview-inner {
@@ -225,16 +207,13 @@ export const styles = css`
   }
 
   .preview-image-container img {
-    height: var(--nile-height-42px, var(--ng-height-42px));
-    width: var(--nile-width-42px, 42px); // check it once
+    height: 42px;
+    width: 42px;
     object-fit: contain;
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))
-      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px solid var(--nile-colors-neutral-400);
   }
-
+  
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -291,7 +270,7 @@ export const styles = css`
     height: 40px;
     width: 40px;
   }
-
+  
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -318,7 +297,7 @@ export const styles = css`
   }
 
   /* ERROR STATE */
-
+  
   .error {
     border: 1px solid var(--nile-colors-neutral-400);
   }
@@ -349,7 +328,7 @@ export const styles = css`
     height: 40px;
     width: 40px;
   }
-
+  
   .file-info {
     width: 100%;
     display: flex;
@@ -543,7 +522,7 @@ export const styles = css`
     max-height: 200px;
     overflow-y: auto;
     border: 1px solid var(--nile-colors-neutral-700);
-    border-radius: var(--nile-radius-sm);
+    border-radius: var(--nile-radius-radius-xs);
     scrollbar-width: none;
     padding: 12px;
   }
@@ -568,4 +547,4 @@ export const styles = css`
   }
 `;
 
-export default [styles];
+export default [styles];

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

@@ -4,63 +4,15 @@ import { DragHandler } from './utils/drag-drop.util';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { FileUploadState } from './types/file-upload.enums';
 
-let dragHandlerInstance: DragHandler;
-export const getDragHandler = (dragHandler: DragHandler): void => {
-  dragHandlerInstance = dragHandler;
-}
-
-export const getHorizontalDefaultState = (
+const baseHorizontalState = (
   browseFiles: Function,
   title: string,
   subtitle: string,
-  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="upload" size="24"></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>
-    ${errorMessage ?
-      html`<div class="upload-error">
-        <nile-icon name="warning" size="12" color="red"></nile-icon>
-        <span>${errorMessage}</span>
-      </div>` :
-      html``
-    }
-  </div>
-`;
-
-export const getHorizontalDisabledtState = (
-  browseFiles: Function,
-  title: string,
-  subtitle: string
+  disabled: boolean,
+  dragHandler: DragHandler
 ): TemplateResult => html`
-  <div
-    class="horizontal-div disable"
-  >
-     <div class="inner-div">
+  <div class="horizontal-div ${disabled ? 'disable' : ''}">
+    <div class="inner-div">
       <slot name="uploadIcon">
         <nile-icon name="upload" size="24"></nile-icon>
       </slot>
@@ -75,17 +27,32 @@ export const getHorizontalDisabledtState = (
     </div>
     <input
       type="file"
-      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
+      ?disabled=${disabled}
+      @change=${(e: Event | DragEvent) => dragHandler.handleFiles(e)}
       multiple
     />
-    <slot @click=${browseFiles} name="browseFileButton">
-      <nile-button variant="tertiary">
+    <slot @click=${disabled ? undefined : browseFiles} name="browseFileButton">
+      <nile-button variant="tertiary" ?disabled=${disabled}>
         Browse File
       </nile-button>
     </slot>
   </div>
 `;
 
+export const getHorizontalDefaultState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string,
+  dragHandler: DragHandler
+): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler);
+
+export const getHorizontalDisabledState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string,
+  dragHandler: DragHandler
+): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler);
+
 export const getHorizontalDragState = (): TemplateResult => html`
   <div class="horizontal-div dragging">
     <div class="icons-container">
@@ -107,55 +74,14 @@ export const getHorizontalDragState = (): TemplateResult => html`
 `;
 
 //  Vertical States
-export const getVerticalDefaultState = (
+const baseVerticalState = (
   browseFiles: Function,
   title: string,
   subtitle: string,
-  errorMessage: string,
-  state: FileUploadState
+  disabled: boolean,
+  dragHandler: DragHandler
 ): TemplateResult => html`
-  <div>
-    <div class=${classMap({ 'hover-border': state === "hover", 'vertical-div': true })}>
-      <slot name="uploadIcon">
-        <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>
-      <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>
-    ${errorMessage ?
-      html`<div class="upload-error">
-        <nile-icon name="warning" size="12" color="red"></nile-icon>
-        <span>${errorMessage}</span>
-      </div>` :
-      html``
-    }
-  </div>
-`;
-
-export const getVerticalDisabledState = (
-  browseFiles: Function,
-  title: string,
-  subtitle: string
-): TemplateResult => html`
-  <div
-    class="vertical-deafult vertical-div disable"
-  >
+  <div class="vertical-default vertical-div ${disabled ? 'disable' : ''}">
     <slot name="uploadIcon">
       <nile-icon name="upload" size="24"></nile-icon>
     </slot>
@@ -163,23 +89,39 @@ export const getVerticalDisabledState = (
       <slot name="title">
         <h4>${title}</h4>
       </slot>
-      <slot name="title">
+      <slot name="subtitle">
         <p>${subtitle}</p>
       </slot>
     </div>
     <input
       type="file"
-      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
+      ?disabled=${disabled}
+      @change=${(e: Event | DragEvent) => dragHandler.handleFiles(e)}
       multiple
     />
-    <slot @click=${browseFiles} name="browseFileButton">
-      <nile-button variant="tertiary">
+    <slot @click=${disabled ? undefined : browseFiles} name="browseFileButton">
+      <nile-button variant="tertiary" ?disabled=${disabled}>
         Browse File
       </nile-button>
     </slot>
   </div>
 `;
 
+export const getVerticalDefaultState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string,
+  dragHandler: DragHandler
+): TemplateResult => baseVerticalState(browseFiles, title, subtitle, false, dragHandler);
+
+export const getVerticalDisabledState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string,
+  dragHandler: DragHandler
+): TemplateResult => baseVerticalState(browseFiles, title, subtitle, true, dragHandler);
+
+
 export const getVerticalDragState = (): TemplateResult => html`
   <div class="vertical-div vertical-drag">
     <div class="icons-container">

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

@@ -9,7 +9,7 @@ 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 { getHorizontalDisabledState } 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,7 +17,6 @@ import { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent }
 import { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles, cancelFileUpload } from './utils/file-validation.util';
 import {
   getHorizontalDefaultState,
-  getHorizontalDisabledtState,
   getHorizontalDragState,
   getVerticalDefaultState,
   getVerticalDisabledState,
@@ -40,7 +39,7 @@ export class NileFileUpload extends NileElement {
     return [styles];
   }
 
-  @property({ type: Number }) size: number = 0;
+  @property({ type: String }) size: string = "100000";
   @property({ type: Boolean}) error: boolean = false;
   @property({ type: String }) errorMessage: string = "";
   @property({ type: Boolean}) allowMultiple: boolean = true;
@@ -66,7 +65,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);
@@ -77,11 +75,9 @@ export class NileFileUpload extends NileElement {
 
     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')) {
@@ -114,32 +110,32 @@ 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);
 
       case FileUploadState.DISABLED:
-        return getHorizontalDisabledtState(this.browseFiles, this.title, this.subtitle);
+        return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
 
       case FileUploadState.DRAG:
         return getHorizontalDragState();
 
       default:
-        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
+        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
     }
   }
 
   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);
 
       case FileUploadState.DISABLED:
-        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle);
+        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
 
       case FileUploadState.DRAG:
         return getVerticalDragState();
 
       default:
-        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
+        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
     }
   }
 

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

@@ -12,7 +12,7 @@ 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!",

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

@@ -1,8 +1,9 @@
-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 size: string = "100000";
   private uploadedFiles: File[] = [];
 
   private stateChangeCallback?: (state: FileUploadState) => void;
@@ -15,7 +16,7 @@ export class DragHandler {
     this.errorMessageCallback = callback;
   }
 
-  public setValuesInDragHandler(state: FileUploadState, size: number, uploadedFiles: File[]): void {
+  public setValuesInDragHandler(state: FileUploadState, size: string, uploadedFiles: File[]): void {
     this.currentState = state;
     this.size = size;
     this.uploadedFiles = uploadedFiles;
@@ -37,31 +38,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 +70,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) {