@aquera/nile-elements 0.1.63 → 0.1.64-beta-1.0

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

@@ -0,0 +1,192 @@
+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 { FileUploadDefaults, FileUploadState } from './types/file-upload.enums';
+import { truncateString } from './utils/file-validation.util';
+import { NileFileUpload } from './nile-file-upload';
+
+const baseHorizontalState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string,
+  disabled: boolean,
+  dragHandler: DragHandler,
+  state: FileUploadState,
+  errorMessage: string,
+  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 part="content" class="content">
+          <div class="title">${title}</div>
+          <div class="subtitle">${subtitle}</div>
+        </div>
+      </div>
+      <input
+        type="file"
+        ?disabled=${disabled}
+        @change=${(e: Event | DragEvent) => { dragHandler.handleFiles(e) }}
+        multiple
+        accept=${allowedTypes.join(',')}
+      />
+      <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 ?
+      html`<div class="upload-error">
+        <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
+        ${
+          nileFileUpload.isStringTruncated
+            ? html`<nile-tooltip content=${errorMessage}>
+                <span>${errorMessage}</span>
+              </nile-tooltip>`
+            : html`<span>${errorMessage}</span>`
+        }
+      </div>` :
+      html``
+    }
+  </div>
+  `;
+}
+
+export const getHorizontalDefaultState = (
+  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 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 getHorizontalDragState = (): TemplateResult => html`
+  <div part="horizontal-drag-state" class="horizontal-div dragging">
+    <div class="icons-container">
+      <nile-icon
+        color="var(--nile-colors-blue-500)"
+        name="general"
+        size="20"
+        class="general-icon"
+      ></nile-icon>
+      <nile-icon
+        color="var(--nile-colors-blue-500)"
+        name="image"
+        size="24"
+        class="image-icon"
+      ></nile-icon>
+    </div>
+    <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>
+  </div>
+`;
+
+//  Vertical States
+const baseVerticalState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string,
+  disabled: boolean,
+  dragHandler: DragHandler,
+  errorMessage: string,
+  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 part="vertical-content-container" class="content-container">
+        <div class="title">${title}</div>
+        <div class="subtitle">${subtitle}</div>
+      </div>
+      <input
+        type="file"
+        ?disabled=${disabled}
+        @change=${(e: Event | DragEvent) => dragHandler.handleFiles(e)}
+        multiple
+        accept=${allowedTypes.join(',')}
+      />
+      <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="vertical-upload-error">
+        <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
+        <nile-tooltip content=${errorMessage}>
+          <span>${errorMessage}</span>
+        </nile-tooltip>
+      </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,
+  dragHandler: DragHandler,
+  errorMessage: string,
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes, nileFileUpload);
+
+
+export const getVerticalDragState = (): TemplateResult => html`
+  <div part="vertical-drag-state" class="vertical-div vertical-drag">
+    <div class="icons-container">
+      <nile-icon
+        color="var(--nile-colors-blue-500)"
+        name="general"
+        size="20"
+        class="general-icon"
+      ></nile-icon>
+      <nile-icon
+        color="var(--nile-colors-blue-500)"
+        name="image"
+        size="24"
+        class="image-icon"
+      ></nile-icon>
+    </div>
+    <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>
+  </div>
+`;

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

@@ -0,0 +1,38 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ 
+import { fixture, assert, expect, html } from '@open-wc/testing';
+import './nile-file-upload'; // Just import to register the element
+
+describe('<nile-file-upload>', () => {
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<nile-file-upload></nile-file-upload>`);
+  });
+
+  it('passes accessibility test', async () => {
+    await expect(element).to.be.accessible();
+  });
+
+  it('renders with the correct tag name', () => {
+    expect(element.tagName.toLowerCase()).to.equal('nile-file-upload');
+  });
+
+  it('renders with slot content when provided', async () => {
+    const testContent = 'Test Content';
+    element = await fixture(html`<nile-file-upload>${testContent}</nile-file-upload>`);
+    
+    const slot = (element.shadowRoot!.querySelector('slot') as HTMLSlotElement);
+    assert.exists(slot, 'Slot should exist');
+
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+    expect(assignedNodes.length).to.be.greaterThan(0);
+    expect(assignedNodes[0].textContent?.trim()).to.equal(testContent);
+  });
+});

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

@@ -0,0 +1,157 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+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 { FileUploadDefaults } from './types/file-upload.enums';
+import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent } from './types/file-upload.enums';
+import { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles, cancelFileUpload } from './utils/file-validation.util';
+import {
+  getHorizontalDefaultState,
+  getHorizontalDragState,
+  getVerticalDefaultState,
+  getVerticalDisabledState,
+  getVerticalDragState,
+} from './nile-file-upload.template';
+
+/**
+ * Nile file-upload component.
+ *
+ * @tag nile-file-upload
+ *
+ */
+@customElement('nile-file-upload')
+export class NileFileUpload extends NileElement {
+  /**
+   * The styles for nile-file-upload
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property({ type: String }) size: string = "10MB";
+  @property({ type: Boolean}) error: boolean = false;
+  @property({ type: String }) errorMessage: string = "";
+  @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;
+  @property({ type: String }) state: FileUploadState = FileUploadState.DEFAULT; 
+  @property({ type: String }) variant: FileUploadVariant = FileUploadVariant.HORIZONTAL;
+  @property({ type: String }) fileUploadUrl: string = "";
+  @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;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.emit(FileUploadEvent.NILE_INIT);
+  }
+
+  firstUpdated(changedProps: ChangedPropsInterface): void {
+    super.firstUpdated(changedProps);
+
+    this.dragHandler = new DragHandler();
+    setUpDragHandler(this, this.dragHandler);
+    addInternalListeners(this, this.dragHandler, this.uploadRequests);
+    addGlobalListeners(this.dragHandler);
+  }
+
+  updated(changedProps: ChangedPropsInterface): void {
+    super.updated(changedProps);
+
+    if (changedProps.has('uploadedFiles')) {
+      // if(this.uploadedFiles.length === 0) {
+      //   this.errorMessage = "";
+      // }
+
+      if(this.fileUploadUrl && this.autoUpload) {
+        uploadFiles(this);
+      }
+      this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
+    } else if (changedProps.has('state')) {
+      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 });
+    }
+  }
+
+  private browseFiles(): void {
+    this.emit(FileUploadEvent.NILE_BROWSE);
+    this.errorMessage = "";
+    this.input.click();
+  }
+
+  public setState = (newState: FileUploadState): void => {
+    this.state = newState;
+  }
+
+  render(): TemplateResult {
+    return html`
+      ${this.getState()}
+    `;
+  }
+
+  private getState(): TemplateResult {
+    return this.variant === FileUploadVariant.HORIZONTAL
+      ? this.getHorizontalState()
+      : this.getVerticalState();
+  }
+
+  private getHorizontalState(): TemplateResult {
+    switch(this.state) {
+      case FileUploadState.DEFAULT:
+        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
+
+      case FileUploadState.DISABLED:
+        return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
+
+      case FileUploadState.DRAG:
+        return getHorizontalDragState();
+
+      default:
+        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.dragHandler, this.errorMessage, this.allowedTypes, this);
+
+      case FileUploadState.DISABLED:
+        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
+
+      case FileUploadState.DRAG:
+        return getVerticalDragState();
+
+      default:
+        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
+    }
+  }
+
+  disconnectedCallback(): void {
+    this.emit(FileUploadEvent.NILE_DESTROY);
+  }
+}

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

@@ -0,0 +1,44 @@
+export enum FileUploadState {
+  DEFAULT = 'default',
+  DISABLED = 'disabled',
+  HOVER = 'hover',
+  DRAG = 'drag'
+}
+
+export enum FileUploadVariant {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical'
+}
+
+export enum FileUploadError {
+  INVALID_FORMAT = "Invalid file format! Upload valid 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 {
+  NILE_INIT = "nile-init",
+  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",
+  NILE_DESTROY = "nile-destroy"
+}
+
+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',
+};

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

@@ -0,0 +1,5 @@
+import { PropertyValueMap } from 'lit';
+
+export interface ChangedPropsInterface extends PropertyValueMap<any> {
+  [key: string]: unknown;
+}

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

@@ -0,0 +1,2 @@
+export * from './file-upload.enums';
+export * from './file-upload.type'

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

@@ -0,0 +1,106 @@
+import { preventDefaultAndStopPropagation } from "./file-validation.util";
+import { FileUploadState } from "../types";
+
+export class DragHandler {
+  private currentState: FileUploadState = FileUploadState.DEFAULT;
+
+  private stateChangeCallback?: (state: FileUploadState) => void;
+  private fileDropCallback?: (files: File[]) => void;
+  private errorMessageCallback?: (errorMessage: string) => void;
+
+  constructor() {}
+
+  public setErrorMessage(callback: (errorMessage: string) => void): void {
+    this.errorMessageCallback = callback;
+  }
+
+  public setValuesInDragHandler(state: FileUploadState): void {
+    this.currentState = state;
+  }
+
+  public onFileDrop(callback: (files: File[]) => void): void {
+    this.fileDropCallback = callback;
+  }
+
+  public onStateChange(callback: (state: FileUploadState) => void): void {
+    this.stateChangeCallback = callback;
+  }
+
+  private setState(state: FileUploadState): void {
+    if (this.currentState === FileUploadState.DISABLED) return;
+
+    this.currentState = state;
+    this.stateChangeCallback?.(state);
+  }
+
+  public dragEnter(e: DragEvent): void {
+    preventDefaultAndStopPropagation(e);
+
+    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;
+
+    this.setState(FileUploadState.DEFAULT);
+  }
+
+  public dragOver(e: DragEvent): void {
+    preventDefaultAndStopPropagation(e);
+    
+    if (this.currentState === FileUploadState.DISABLED) return;
+  }
+
+  public drop(e: DragEvent): void {
+    preventDefaultAndStopPropagation(e);
+    
+    if (this.currentState === FileUploadState.DISABLED) return;
+    this.setState(FileUploadState.DEFAULT);
+    this.handleFiles(e);
+  }
+
+  public handleDocumentDrop(e: DragEvent): void {
+    if (this.currentState === FileUploadState.DISABLED) return;
+
+    preventDefaultAndStopPropagation(e);
+    
+    this.setState(FileUploadState.DEFAULT);
+  }
+
+  public preventDragOver(e: DragEvent): void {
+    preventDefaultAndStopPropagation(e); 
+  }
+
+  public preventDrop(e: DragEvent): void {
+    preventDefaultAndStopPropagation(e); 
+  }
+
+  public handleFiles(e: Event | DragEvent): void {
+    preventDefaultAndStopPropagation(e);
+    if (this.currentState === FileUploadState.DISABLED) return;
+
+    let files: FileList | null = null;
+
+    if ('dataTransfer' in e && e.dataTransfer) {
+      files = e.dataTransfer.files;
+    }
+
+    if (!files && e.target instanceof HTMLInputElement) {
+      files = e.target.files;
+    }
+
+    if (files && files.length > 0) {
+      const newFiles = Array.from(files);
+
+      this.fileDropCallback?.(newFiles);
+    }
+
+    if(e.target instanceof HTMLInputElement) {
+      e.target.value = "";
+    }
+  }
+}