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

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

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

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

@@ -4,15 +4,63 @@ import { DragHandler } from './utils/drag-drop.util';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { FileUploadState } from './types/file-upload.enums';
 
-const baseHorizontalState = (
+let dragHandlerInstance: DragHandler;
+export const getDragHandler = (dragHandler: DragHandler): void => {
+  dragHandlerInstance = dragHandler;
+}
+
+export const getHorizontalDefaultState = (
   browseFiles: Function,
   title: string,
   subtitle: string,
-  disabled: boolean,
-  dragHandler: DragHandler
+  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
 ): TemplateResult => html`
-  <div class="horizontal-div ${disabled ? 'disable' : ''}">
-    <div class="inner-div">
+  <div
+    class="horizontal-div disable"
+  >
+     <div class="inner-div">
       <slot name="uploadIcon">
         <nile-icon name="upload" size="24"></nile-icon>
       </slot>
@@ -27,32 +75,17 @@ const baseHorizontalState = (
     </div>
     <input
       type="file"
-      ?disabled=${disabled}
-      @change=${(e: Event | DragEvent) => dragHandler.handleFiles(e)}
+      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
       multiple
     />
-    <slot @click=${disabled ? undefined : browseFiles} name="browseFileButton">
-      <nile-button variant="tertiary" ?disabled=${disabled}>
+    <slot @click=${browseFiles} name="browseFileButton">
+      <nile-button variant="tertiary">
         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">
@@ -74,14 +107,55 @@ export const getHorizontalDragState = (): TemplateResult => html`
 `;
 
 //  Vertical States
-const baseVerticalState = (
+export const getVerticalDefaultState = (
   browseFiles: Function,
   title: string,
   subtitle: string,
-  disabled: boolean,
-  dragHandler: DragHandler
+  errorMessage: string,
+  state: FileUploadState
 ): TemplateResult => html`
-  <div class="vertical-default vertical-div ${disabled ? 'disable' : ''}">
+  <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"
+  >
     <slot name="uploadIcon">
       <nile-icon name="upload" size="24"></nile-icon>
     </slot>
@@ -89,39 +163,23 @@ const baseVerticalState = (
       <slot name="title">
         <h4>${title}</h4>
       </slot>
-      <slot name="subtitle">
+      <slot name="title">
         <p>${subtitle}</p>
       </slot>
     </div>
     <input
       type="file"
-      ?disabled=${disabled}
-      @change=${(e: Event | DragEvent) => dragHandler.handleFiles(e)}
+      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
       multiple
     />
-    <slot @click=${disabled ? undefined : browseFiles} name="browseFileButton">
-      <nile-button variant="tertiary" ?disabled=${disabled}>
+    <slot @click=${browseFiles} name="browseFileButton">
+      <nile-button variant="tertiary">
         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 { getHorizontalDisabledState } from './nile-file-upload.template'
+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,6 +17,7 @@ import { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent }
 import { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles, cancelFileUpload } from './utils/file-validation.util';
 import {
   getHorizontalDefaultState,
+  getHorizontalDisabledtState,
   getHorizontalDragState,
   getVerticalDefaultState,
   getVerticalDisabledState,
@@ -39,7 +40,7 @@ export class NileFileUpload extends NileElement {
     return [styles];
   }
 
-  @property({ type: String }) size: string = "100000";
+  @property({ type: Number }) size: number = 0;
   @property({ type: Boolean}) error: boolean = false;
   @property({ type: String }) errorMessage: string = "";
   @property({ type: Boolean}) allowMultiple: boolean = true;
@@ -65,6 +66,7 @@ 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);
@@ -75,9 +77,11 @@ export class NileFileUpload extends NileElement {
 
     if (changedProps.has('uploadedFiles')) {
       if(this.uploadedFiles.length === 0) this.errorMessage = "";
-      if(this.fileUploadUrl && this.autoUpload) {
-        uploadFiles(this);
+      if(!this.fileUploadUrl) {
+        this.errorMessage = FileUploadError.UPLOAD_URL_REQUIRED;
+        return;
       }
+      uploadFiles(this);
       this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
 
     } else if (changedProps.has('state')) {
@@ -110,32 +114,32 @@ export class NileFileUpload extends NileElement {
   private getHorizontalState(): TemplateResult {
     switch(this.state) {
       case FileUploadState.DEFAULT:
-        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
+        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
 
       case FileUploadState.DISABLED:
-        return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
+        return getHorizontalDisabledtState(this.browseFiles, this.title, this.subtitle);
 
       case FileUploadState.DRAG:
         return getHorizontalDragState();
 
       default:
-        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
+        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
     }
   }
 
   private getVerticalState(): TemplateResult {
     switch(this.state) {
       case FileUploadState.DEFAULT:
-        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
+        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
 
       case FileUploadState.DISABLED:
-        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
+        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle);
 
       case FileUploadState.DRAG:
         return getVerticalDragState();
 
       default:
-        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
+        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
     }
   }
 

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_LIMIT_EXCEEDED = "File exceeds size limit! Upload smaller file.",
+  SIZE_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,9 +1,8 @@
-import { preventDefaultAndStopPropagation } from "./file-validation.util";
-import { FileUploadState } from "../types";
+import { FileUploadError, FileUploadState } from "../types";
 
 export class DragHandler {
   private currentState: FileUploadState = FileUploadState.DEFAULT;
-  private size: string = "100000";
+  private size: number = 0;
   private uploadedFiles: File[] = [];
 
   private stateChangeCallback?: (state: FileUploadState) => void;
@@ -16,7 +15,7 @@ export class DragHandler {
     this.errorMessageCallback = callback;
   }
 
-  public setValuesInDragHandler(state: FileUploadState, size: string, uploadedFiles: File[]): void {
+  public setValuesInDragHandler(state: FileUploadState, size: number, uploadedFiles: File[]): void {
     this.currentState = state;
     this.size = size;
     this.uploadedFiles = uploadedFiles;
@@ -38,31 +37,31 @@ export class DragHandler {
   }
 
   public dragEnter(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e);
-
     if (this.currentState === FileUploadState.DISABLED) return;
+
+    e.preventDefault();
     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);
   }
@@ -70,31 +69,32 @@ export class DragHandler {
   public handleDocumentDrop(e: DragEvent): void {
     if (this.currentState === FileUploadState.DISABLED) return;
 
-    preventDefaultAndStopPropagation(e);
-    
+    e.preventDefault();
+    e.stopPropagation();
     this.setState(FileUploadState.DEFAULT);
   }
 
   public preventDragOver(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e); 
+    e.preventDefault();
   }
 
   public preventDrop(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e); 
+    e.preventDefault();
+    e.stopPropagation();
   }
 
-  public handleFiles(e: Event | DragEvent): void {
-    preventDefaultAndStopPropagation(e);
+  public handleFiles(event: Event | DragEvent): void {
     if (this.currentState === FileUploadState.DISABLED) return;
 
+    event.preventDefault?.();
     let files: FileList | null = null;
 
-    if ('dataTransfer' in e && e.dataTransfer) {
-      files = e.dataTransfer.files;
+    if ('dataTransfer' in event && event.dataTransfer) {
+      files = event.dataTransfer.files;
     }
 
-    if (!files && e.target instanceof HTMLInputElement) {
-      files = e.target.files;
+    if (!files && event.target instanceof HTMLInputElement) {
+      files = event.target.files;
     }
 
     if (files && files.length > 0) {