@liwe3/webcomponents 1.0.2 → 1.1.0

package/src/ChunkUploader.ts

@@ -0,0 +1,921 @@
+/**
+ * ChunkUploader Web Component
+ * A file uploader with drag & drop, file previews, and chunked upload support
+ */
+
+export interface UploadedFile {
+  id: string;
+  file: File;
+  status: 'pending' | 'uploading' | 'completed' | 'error' | 'aborted';
+  progress: number;
+  uploadedBytes: number;
+  preview?: string;
+  error?: string;
+  uploadId?: string; // R2 upload ID for aborting
+  key?: string; // R2 key for aborting
+}
+
+export interface ChunkUploaderConfig {
+  serverURL: string;
+  chunkSize: number; // in MB
+  authToken?: string;
+  validFiletypes?: string[]; // Array of extensions like ['jpg', 'png', 'pdf']
+  maxFileSize?: number; // in MB
+  onfilecomplete?: ( file: UploadedFile ) => void;
+  onuploadcomplete?: ( files: UploadedFile[] ) => void;
+}
+
+const DEFAULT_CHUNK_SIZE = 5; // 5MB - R2/S3 minimum part size (except last part)
+const DEFAULT_MAX_FILE_SIZE = 5120; // 5GB in MB
+
+export class ChunkUploaderElement extends HTMLElement {
+  declare shadowRoot: ShadowRoot;
+  private files: Map<string, UploadedFile> = new Map();
+  private config: ChunkUploaderConfig = {
+    serverURL: '',
+    chunkSize: DEFAULT_CHUNK_SIZE,
+    maxFileSize: DEFAULT_MAX_FILE_SIZE
+  };
+  private isUploading = false;
+  private abortController: AbortController | null = null;
+
+  constructor () {
+    super();
+    this.attachShadow( { mode: 'open' } );
+    this.render();
+    this.bindEvents();
+  }
+
+  static get observedAttributes (): string[] {
+    return [ 'server-url', 'chunk-size', 'auth-token', 'valid-filetypes', 'max-file-size' ];
+  }
+
+  attributeChangedCallback ( name: string, oldValue: string | null, newValue: string | null ): void {
+    if ( oldValue !== newValue ) {
+      switch ( name ) {
+        case 'server-url':
+          this.config.serverURL = newValue || '';
+          break;
+        case 'chunk-size':
+          this.config.chunkSize = parseFloat( newValue || String( DEFAULT_CHUNK_SIZE ) );
+          break;
+        case 'auth-token':
+          this.config.authToken = newValue || undefined;
+          break;
+        case 'valid-filetypes':
+          this.config.validFiletypes = newValue ? newValue.split( ',' ).map( ext => ext.trim() ) : undefined;
+          break;
+        case 'max-file-size':
+          this.config.maxFileSize = parseFloat( newValue || String( DEFAULT_MAX_FILE_SIZE ) );
+          break;
+      }
+    }
+  }
+
+  // Property getters and setters
+  get serverURL (): string {
+    return this.config.serverURL;
+  }
+
+  set serverURL ( value: string ) {
+    this.config.serverURL = value;
+    this.setAttribute( 'server-url', value );
+  }
+
+  get chunkSize (): number {
+    return this.config.chunkSize;
+  }
+
+  set chunkSize ( value: number ) {
+    this.config.chunkSize = value;
+    this.setAttribute( 'chunk-size', value.toString() );
+  }
+
+  get authToken (): string | undefined {
+    return this.config.authToken;
+  }
+
+  set authToken ( value: string | undefined ) {
+    if ( value ) {
+      this.config.authToken = value;
+      this.setAttribute( 'auth-token', value );
+    } else {
+      this.config.authToken = undefined;
+      this.removeAttribute( 'auth-token' );
+    }
+  }
+
+  get validFiletypes (): string[] | undefined {
+    return this.config.validFiletypes;
+  }
+
+  set validFiletypes ( value: string[] | undefined ) {
+    this.config.validFiletypes = value;
+    if ( value ) {
+      this.setAttribute( 'valid-filetypes', value.join( ',' ) );
+    } else {
+      this.removeAttribute( 'valid-filetypes' );
+    }
+  }
+
+  get maxFileSize (): number {
+    return this.config.maxFileSize || DEFAULT_MAX_FILE_SIZE;
+  }
+
+  set maxFileSize ( value: number ) {
+    this.config.maxFileSize = value;
+    this.setAttribute( 'max-file-size', value.toString() );
+  }
+
+  set onfilecomplete ( callback: ( ( file: UploadedFile ) => void ) | undefined ) {
+    this.config.onfilecomplete = callback;
+  }
+
+  set onuploadcomplete ( callback: ( ( files: UploadedFile[] ) => void ) | undefined ) {
+    this.config.onuploadcomplete = callback;
+  }
+
+  /**
+   * Formats bytes to human readable string
+   */
+  private formatBytes ( bytes: number ): string {
+    if ( bytes === 0 ) return '0 Bytes';
+    const k = 1024;
+    const sizes = [ 'Bytes', 'KB', 'MB', 'GB' ];
+    const i = Math.floor( Math.log( bytes ) / Math.log( k ) );
+    return Math.round( ( bytes / Math.pow( k, i ) ) * 100 ) / 100 + ' ' + sizes[ i ];
+  }
+
+  /**
+   * Generates a unique ID for a file
+   */
+  private generateFileId (): string {
+    return `file-${ Date.now() }-${ Math.random().toString( 36 ).substr( 2, 9 ) }`;
+  }
+
+  /**
+   * Validates a file based on config
+   */
+  private validateFile ( file: File ): { valid: boolean; error?: string } {
+    // Check file size
+    const maxSizeBytes = this.maxFileSize * 1024 * 1024;
+    if ( file.size > maxSizeBytes ) {
+      return {
+        valid: false,
+        error: `File size exceeds maximum of ${ this.formatBytes( maxSizeBytes ) }`
+      };
+    }
+
+    // Check file type
+    if ( this.config.validFiletypes && this.config.validFiletypes.length > 0 ) {
+      const extension = file.name.split( '.' ).pop()?.toLowerCase();
+      if ( ! extension || ! this.config.validFiletypes.includes( extension ) ) {
+        return {
+          valid: false,
+          error: `File type .${ extension } is not allowed. Valid types: ${ this.config.validFiletypes.join( ', ' ) }`
+        };
+      }
+    }
+
+    return { valid: true };
+  }
+
+  /**
+   * Generates a preview for image files
+   */
+  private async generatePreview ( file: File ): Promise<string | undefined> {
+    if ( ! file.type.startsWith( 'image/' ) ) return undefined;
+
+    return new Promise( ( resolve ) => {
+      const reader = new FileReader();
+      reader.onload = ( e ) => resolve( e.target?.result as string );
+      reader.onerror = () => resolve( undefined );
+      reader.readAsDataURL( file );
+    } );
+  }
+
+  /**
+   * Adds files to the upload queue
+   */
+  private async addFiles ( fileList: FileList ): Promise<void> {
+    for ( let i = 0; i < fileList.length; i++ ) {
+      const file = fileList[ i ];
+      const validation = this.validateFile( file );
+
+      const id = this.generateFileId();
+      const uploadedFile: UploadedFile = {
+        id,
+        file,
+        status: validation.valid ? 'pending' : 'error',
+        progress: 0,
+        uploadedBytes: 0,
+        error: validation.error
+      };
+
+      // Generate preview for images
+      if ( validation.valid && file.type.startsWith( 'image/' ) ) {
+        uploadedFile.preview = await this.generatePreview( file );
+      }
+
+      this.files.set( id, uploadedFile );
+    }
+
+    this.renderFileCards();
+  }
+
+  /**
+   * Removes a file from the queue
+   */
+  private removeFile ( id: string ): void {
+    this.files.delete( id );
+    this.renderFileCards();
+  }
+
+  /**
+   * Uploads a single file with chunking
+   */
+  private async uploadFile ( uploadedFile: UploadedFile ): Promise<void> {
+    if ( ! this.config.serverURL ) {
+      throw new Error( 'Server URL is not configured' );
+    }
+
+    const { file } = uploadedFile;
+    uploadedFile.status = 'uploading';
+    uploadedFile.progress = 0;
+    this.updateFileCard( uploadedFile.id );
+
+    try {
+      const headers: HeadersInit = {
+        'Content-Type': 'application/json'
+      };
+
+      if ( this.config.authToken ) {
+        headers[ 'Authorization' ] = `Bearer ${ this.config.authToken }`;
+      }
+
+      // Step 1: Initiate multipart upload
+      const initResponse = await fetch( `${ this.config.serverURL }/api/upload/initiate`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify( {
+          fileName: file.name,
+          fileType: file.type
+        } )
+      } );
+
+      if ( ! initResponse.ok ) {
+        throw new Error( `Failed to initiate upload: ${ await initResponse.text() }` );
+      }
+
+      const { uploadId, key } = await initResponse.json();
+
+      // Store upload metadata for potential abort
+      uploadedFile.uploadId = uploadId;
+      uploadedFile.key = key;
+
+      // Step 2: Upload chunks
+      const chunkSizeBytes = this.config.chunkSize * 1024 * 1024;
+      const totalParts = Math.ceil( file.size / chunkSizeBytes );
+      const parts: Array<{ partNumber: number; etag: string }> = [];
+
+      for ( let partNumber = 1; partNumber <= totalParts; partNumber++ ) {
+        // Check if upload was aborted
+        if ( this.abortController?.signal.aborted ) {
+          throw new Error( 'Upload aborted by user' );
+        }
+
+        const start = ( partNumber - 1 ) * chunkSizeBytes;
+        const end = Math.min( start + chunkSizeBytes, file.size );
+        const chunk = file.slice( start, end );
+
+        // Create headers for this part upload
+        const partHeaders: HeadersInit = {
+          'Content-Type': 'application/octet-stream',
+          'X-Upload-Id': uploadId,
+          'X-Key': key,
+          'X-Part-Number': partNumber.toString()
+        };
+
+        if ( this.config.authToken ) {
+          partHeaders[ 'Authorization' ] = `Bearer ${ this.config.authToken }`;
+        }
+
+        const partResponse = await fetch( `${ this.config.serverURL }/api/upload/part`, {
+          method: 'POST',
+          headers: partHeaders,
+          body: chunk,
+          signal: this.abortController?.signal
+        } );
+
+        if ( ! partResponse.ok ) {
+          throw new Error( `Failed to upload part ${ partNumber }` );
+        }
+
+        const { etag } = await partResponse.json();
+        parts.push( { partNumber, etag } );
+
+        // Update progress
+        uploadedFile.uploadedBytes = end;
+        uploadedFile.progress = ( uploadedFile.uploadedBytes / file.size ) * 100;
+        this.updateFileCard( uploadedFile.id );
+      }
+
+      // Step 3: Complete multipart upload
+      const completeResponse = await fetch( `${ this.config.serverURL }/api/upload/complete`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify( {
+          uploadId,
+          key,
+          parts
+        } )
+      } );
+
+      if ( ! completeResponse.ok ) {
+        throw new Error( 'Failed to complete upload' );
+      }
+
+      uploadedFile.status = 'completed';
+      uploadedFile.progress = 100;
+      this.updateFileCard( uploadedFile.id );
+
+      // Dispatch file complete event
+      this.dispatchEvent( new CustomEvent( 'filecomplete', {
+        detail: uploadedFile,
+        bubbles: true,
+        composed: true
+      } ) );
+
+      // Call callback if provided
+      if ( this.config.onfilecomplete ) {
+        this.config.onfilecomplete( uploadedFile );
+      }
+
+    } catch ( error ) {
+      // Check if this is an abort error (from AbortController)
+      const isAbortError = error instanceof Error &&
+        ( error.name === 'AbortError' || error.message === 'Upload aborted by user' );
+
+      // Only set error status if not aborted
+      if ( ! isAbortError ) {
+        uploadedFile.status = 'error';
+        uploadedFile.error = error instanceof Error ? error.message : 'Unknown error';
+        this.updateFileCard( uploadedFile.id );
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Starts uploading all pending files
+   */
+  private async startUpload (): Promise<void> {
+    if ( this.isUploading ) return;
+
+    const pendingFiles = Array.from( this.files.values() ).filter( f => f.status === 'pending' );
+    if ( pendingFiles.length === 0 ) return;
+
+    this.isUploading = true;
+    this.abortController = new AbortController();
+
+    const uploadBtn = this.shadowRoot.querySelector( '#uploadBtn' ) as HTMLButtonElement;
+    const abortBtn = this.shadowRoot.querySelector( '#abortBtn' ) as HTMLButtonElement;
+
+    if ( uploadBtn ) {
+      uploadBtn.disabled = true;
+      uploadBtn.textContent = 'Uploading...';
+    }
+
+    if ( abortBtn ) {
+      abortBtn.style.display = 'inline-block';
+    }
+
+    try {
+      for ( const file of pendingFiles ) {
+        // Check if upload was aborted
+        if ( this.abortController.signal.aborted ) {
+          break;
+        }
+        await this.uploadFile( file );
+      }
+
+      // All uploads complete
+      this.dispatchEvent( new CustomEvent( 'uploadcomplete', {
+        detail: Array.from( this.files.values() ),
+        bubbles: true,
+        composed: true
+      } ) );
+
+      // Call callback if provided
+      if ( this.config.onuploadcomplete ) {
+        this.config.onuploadcomplete( Array.from( this.files.values() ) );
+      }
+
+    } catch ( error ) {
+      // Only log non-abort errors
+      if ( error instanceof Error && error.message !== 'Upload aborted by user' ) {
+        console.error( 'Upload error:', error );
+      }
+    } finally {
+      this.isUploading = false;
+      if ( uploadBtn ) {
+        uploadBtn.disabled = false;
+        uploadBtn.textContent = 'Upload Files';
+      }
+      if ( abortBtn ) {
+        abortBtn.style.display = 'none';
+      }
+    }
+  }
+
+  /**
+   * Aborts all pending and uploading files
+   */
+  private async abortAllUploads (): Promise<void> {
+    // Trigger abort signal to stop ongoing fetch requests
+    if ( this.abortController ) {
+      this.abortController.abort();
+    }
+
+    const filesToAbort = Array.from( this.files.values() ).filter(
+      f => f.status === 'pending' || f.status === 'uploading'
+    );
+
+    if ( filesToAbort.length === 0 ) return;
+
+    const headers: HeadersInit = {
+      'Content-Type': 'application/json'
+    };
+
+    if ( this.config.authToken ) {
+      headers[ 'Authorization' ] = `Bearer ${ this.config.authToken }`;
+    }
+
+    for ( const file of filesToAbort ) {
+      // If upload was initiated, abort it on the server
+      if ( file.uploadId && file.key ) {
+        try {
+          await fetch( `${ this.config.serverURL }/api/upload/abort`, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify( {
+              uploadId: file.uploadId,
+              key: file.key
+            } )
+          } );
+        } catch ( error ) {
+          console.error( `Failed to abort upload for ${ file.file.name }:`, error );
+        }
+      }
+
+      // Update file status
+      file.status = 'aborted';
+      file.error = 'Upload aborted by user';
+      this.updateFileCard( file.id );
+    }
+
+    // Dispatch abort event
+    this.dispatchEvent( new CustomEvent( 'uploadaborted', {
+      detail: filesToAbort,
+      bubbles: true,
+      composed: true
+    } ) );
+
+    // Reset upload state
+    this.isUploading = false;
+    const uploadBtn = this.shadowRoot.querySelector( '#uploadBtn' ) as HTMLButtonElement;
+    const abortBtn = this.shadowRoot.querySelector( '#abortBtn' ) as HTMLButtonElement;
+
+    if ( uploadBtn ) {
+      uploadBtn.disabled = false;
+      uploadBtn.textContent = 'Upload Files';
+    }
+
+    if ( abortBtn ) {
+      abortBtn.style.display = 'none';
+    }
+  }
+
+  /**
+   * Updates a single file card in the DOM
+   */
+  private updateFileCard ( fileId: string ): void {
+    const file = this.files.get( fileId );
+    if ( ! file ) return;
+
+    const card = this.shadowRoot.querySelector( `[data-file-id="${ fileId }"]` ) as HTMLElement;
+    if ( ! card ) return;
+
+    const progressBar = card.querySelector( '.progress-bar' ) as HTMLElement;
+    const progressText = card.querySelector( '.progress-text' ) as HTMLElement;
+    const statusDiv = card.querySelector( '.status' ) as HTMLElement;
+
+    if ( progressBar ) {
+      progressBar.style.width = `${ file.progress }%`;
+
+      // Color based on status
+      if ( file.status === 'completed' ) {
+        progressBar.style.backgroundColor = '#22c55e'; // green
+      } else if ( file.status === 'error' ) {
+        progressBar.style.backgroundColor = '#ef4444'; // red
+      } else if ( file.status === 'aborted' ) {
+        progressBar.style.backgroundColor = '#f59e0b'; // orange
+      } else {
+        progressBar.style.backgroundColor = 'var(--color-primary)';
+      }
+    }
+
+    if ( progressText ) {
+      progressText.textContent = `${ Math.round( file.progress ) }%`;
+    }
+
+    if ( statusDiv && file.error ) {
+      statusDiv.textContent = file.error;
+      statusDiv.style.display = 'block';
+    }
+  }
+
+  /**
+   * Renders all file cards
+   */
+  private renderFileCards (): void {
+    const container = this.shadowRoot.querySelector( '#fileCardsContainer' );
+    if ( ! container ) return;
+
+    if ( this.files.size === 0 ) {
+      container.innerHTML = '';
+      return;
+    }
+
+    container.innerHTML = Array.from( this.files.values() ).map( file => `
+      <div class="file-card" data-file-id="${ file.id }">
+        <button class="remove-btn" data-file-id="${ file.id }">×</button>
+        ${ file.preview ? `<div class="preview"><img src="${ file.preview }" alt="Preview"></div>` : '<div class="preview no-preview">📄</div>' }
+        <div class="file-info">
+          <div class="file-name" title="${ file.file.name }">${ file.file.name }</div>
+          <div class="file-size">${ this.formatBytes( file.file.size ) }</div>
+        </div>
+        <div class="progress-container">
+          <div class="progress-bar-bg">
+            <div class="progress-bar" style="width: ${ file.progress }%; background-color: ${ file.status === 'completed' ? '#22c55e' : file.status === 'error' ? '#ef4444' : 'var(--color-primary)' }"></div>
+          </div>
+          <div class="progress-text">${ Math.round( file.progress ) }%</div>
+        </div>
+        ${ file.error ? `<div class="status error">${ file.error }</div>` : '' }
+      </div>
+    ` ).join( '' );
+
+    // Bind remove button events
+    const removeButtons = container.querySelectorAll( '.remove-btn' );
+    removeButtons.forEach( btn => {
+      btn.addEventListener( 'click', ( e ) => {
+        e.stopPropagation();
+        const fileId = ( btn as HTMLElement ).dataset.fileId;
+        if ( fileId ) this.removeFile( fileId );
+      } );
+    } );
+
+    // Show/hide upload button
+    const uploadBtn = this.shadowRoot.querySelector( '#uploadBtn' ) as HTMLButtonElement;
+    if ( uploadBtn ) {
+      const hasPendingFiles = Array.from( this.files.values() ).some( f => f.status === 'pending' );
+      uploadBtn.style.display = hasPendingFiles ? 'block' : 'none';
+    }
+  }
+
+  /**
+   * Binds event listeners
+   */
+  private bindEvents (): void {
+    const uploadZone = this.shadowRoot.querySelector( '#uploadZone' ) as HTMLElement;
+    const fileInput = this.shadowRoot.querySelector( '#fileInput' ) as HTMLInputElement;
+    const browseBtn = this.shadowRoot.querySelector( '#browseBtn' ) as HTMLButtonElement;
+    const uploadBtn = this.shadowRoot.querySelector( '#uploadBtn' ) as HTMLButtonElement;
+    const abortBtn = this.shadowRoot.querySelector( '#abortBtn' ) as HTMLButtonElement;
+
+    // Click to browse
+    browseBtn?.addEventListener( 'click', () => fileInput?.click() );
+
+    // Drag and drop
+    uploadZone?.addEventListener( 'dragover', ( e ) => {
+      e.preventDefault();
+      uploadZone.classList.add( 'drag-over' );
+    } );
+
+    uploadZone?.addEventListener( 'dragleave', () => {
+      uploadZone.classList.remove( 'drag-over' );
+    } );
+
+    uploadZone?.addEventListener( 'drop', ( e ) => {
+      e.preventDefault();
+      uploadZone.classList.remove( 'drag-over' );
+      if ( e.dataTransfer?.files ) {
+        this.addFiles( e.dataTransfer.files );
+      }
+    } );
+
+    // File input change
+    fileInput?.addEventListener( 'change', ( e ) => {
+      const files = ( e.target as HTMLInputElement ).files;
+      if ( files ) {
+        this.addFiles( files );
+        // Reset input so same file can be added again
+        fileInput.value = '';
+      }
+    } );
+
+    // Upload button
+    uploadBtn?.addEventListener( 'click', () => this.startUpload() );
+
+    // Abort button
+    abortBtn?.addEventListener( 'click', () => this.abortAllUploads() );
+  }
+
+  /**
+   * Renders the component
+   */
+  private render (): void {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        }
+
+        * {
+          box-sizing: border-box;
+        }
+
+        .container {
+          width: 100%;
+        }
+
+        .upload-zone {
+          border: 2px dashed #ccc;
+          border-radius: 8px;
+          padding: 40px;
+          text-align: center;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          background: #fafafa;
+        }
+
+        .upload-zone:hover {
+          border-color: #4CAF50;
+          background: #f0f9f0;
+        }
+
+        .upload-zone.drag-over {
+          border-color: #4CAF50;
+          background: #e8f5e9;
+        }
+
+        .upload-zone-content {
+          pointer-events: none;
+        }
+
+        .upload-icon {
+          font-size: 48px;
+          margin-bottom: 16px;
+        }
+
+        .upload-text {
+          font-size: 18px;
+          margin-bottom: 8px;
+          color: #333;
+        }
+
+        .upload-hint {
+          font-size: 14px;
+          color: #666;
+        }
+
+        .browse-btn {
+          background: #4CAF50;
+          color: white;
+          border: none;
+          padding: 12px 24px;
+          border-radius: 6px;
+          font-size: 16px;
+          font-weight: 500;
+          cursor: pointer;
+          margin-top: 16px;
+          transition: background 0.3s ease;
+          pointer-events: auto;
+        }
+
+        .browse-btn:hover {
+          background: #45a049;
+        }
+
+        input[type="file"] {
+          display: none;
+        }
+
+        .file-cards-container {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 16px;
+          margin-top: 24px;
+        }
+
+        .file-card {
+          position: relative;
+          width: 200px;
+          border: 1px solid #e0e0e0;
+          border-radius: 8px;
+          padding: 12px;
+          background: white;
+          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+          transition: box-shadow 0.3s ease;
+        }
+
+        .file-card:hover {
+          box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+        }
+
+        .remove-btn {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          width: 24px;
+          height: 24px;
+          border: none;
+          border-radius: 50%;
+          background: rgba(239, 68, 68, 0.9);
+          color: white;
+          font-size: 18px;
+          line-height: 1;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0;
+          transition: background 0.3s ease;
+          z-index: 1;
+        }
+
+        .remove-btn:hover {
+          background: rgba(239, 68, 68, 1);
+        }
+
+        .preview {
+          width: 100%;
+          height: 120px;
+          border-radius: 4px;
+          overflow: hidden;
+          background: #f5f5f5;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 8px;
+        }
+
+        .preview img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
+        .preview.no-preview {
+          font-size: 48px;
+        }
+
+        .file-info {
+          margin-bottom: 8px;
+        }
+
+        .file-name {
+          font-size: 14px;
+          font-weight: 500;
+          color: #333;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-bottom: 4px;
+        }
+
+        .file-size {
+          font-size: 12px;
+          color: #666;
+        }
+
+        .progress-container {
+          margin-top: 8px;
+        }
+
+        .progress-bar-bg {
+          width: 100%;
+          height: 8px;
+          background: #e0e0e0;
+          border-radius: 4px;
+          overflow: hidden;
+          margin-bottom: 4px;
+        }
+
+        .progress-bar {
+          height: 100%;
+          background: var(--color-primary, #4CAF50);
+          transition: width 0.3s ease, background-color 0.3s ease;
+        }
+
+        .progress-text {
+          font-size: 12px;
+          color: #666;
+          text-align: center;
+        }
+
+        .status {
+          font-size: 12px;
+          color: #ef4444;
+          margin-top: 4px;
+          display: none;
+        }
+
+        .status.error {
+          display: block;
+        }
+
+        .upload-btn {
+          background: #4CAF50;
+          color: white;
+          border: none;
+          padding: 12px 32px;
+          border-radius: 6px;
+          font-size: 16px;
+          font-weight: 500;
+          cursor: pointer;
+          margin-top: 24px;
+          transition: background 0.3s ease;
+          display: none;
+        }
+
+        .upload-btn:hover:not(:disabled) {
+          background: #45a049;
+        }
+
+        .upload-btn:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        .abort-btn {
+          background: #ef4444;
+          color: white;
+          border: none;
+          padding: 12px 32px;
+          border-radius: 6px;
+          font-size: 16px;
+          font-weight: 500;
+          cursor: pointer;
+          margin-top: 24px;
+          margin-left: 12px;
+          transition: background 0.3s ease;
+          display: none;
+        }
+
+        .abort-btn:hover {
+          background: #dc2626;
+        }
+
+        .buttons-container {
+          display: flex;
+          align-items: center;
+        }
+      </style>
+
+      <div class="container">
+        <div class="upload-zone" id="uploadZone">
+          <input type="file" id="fileInput" multiple>
+          <div class="upload-zone-content">
+            <div class="upload-icon">📁</div>
+            <div class="upload-text">Drop files here</div>
+            <div class="upload-hint">or</div>
+            <button class="browse-btn" id="browseBtn">Browse Files</button>
+          </div>
+        </div>
+
+        <div class="file-cards-container" id="fileCardsContainer"></div>
+
+        <div class="buttons-container">
+          <button class="upload-btn" id="uploadBtn">Upload Files</button>
+          <button class="abort-btn" id="abortBtn">Abort Upload</button>
+        </div>
+      </div>
+    `;
+  }
+}
+
+/**
+ * Defines the custom element if not already defined
+ */
+export const defineChunkUploader = ( tagName = 'liwe3-chunk-uploader' ): void => {
+  if ( typeof window !== 'undefined' && ! customElements.get( tagName ) ) {
+    customElements.define( tagName, ChunkUploaderElement );
+  }
+};
+
+// Auto-register with default tag name
+if ( typeof window !== 'undefined' ) {
+  defineChunkUploader();
+}