khatia-uploader

Angular file uploader component with drag & drop support.

Installation

npm install khatia-uploader

Peer Dependencies

This library requires the following peer dependencies:

npm install @angular/common @angular/core @angular/material @angular/cdk

Usage

Import the Component

Since this is a standalone component, import it directly where needed:

import { Component } from '@angular/core';
import { UploadModalComponent } from 'khatia-uploader';

@Component({
  selector: 'app-my-page',
  imports: [UploadModalComponent],
  template: `
    <app-upload-modal
      [allowMultiple]="true"
      (submitted)="onFilesSubmitted($event)"
      (closed)="onClosed()"
    />
  `
})
export class MyPageComponent {
  onFilesSubmitted(files: File[]) {
    console.log('Files submitted:', files);
    // Handle the uploaded files
  }

  onClosed() {
    console.log('Upload modal closed');
  }
}

Using with Angular Material Dialog

import { inject } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { UploadModalComponent } from 'khatia-uploader';

export class MyComponent {
  private dialog = inject(MatDialog);

  openUploadDialog() {
    const dialogRef = this.dialog.open(UploadModalComponent, {
      width: '600px',
      data: { allowMultiple: true }
    });

    dialogRef.afterClosed().subscribe((files: File[] | undefined) => {
      if (files) {
        console.log('Selected files:', files);
      }
    });
  }
}

API

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | allowMultiple | boolean | true | Whether to allow multiple file selection |

Outputs

| Output | Type | Description | |--------|------|-------------| | submitted | File[] | Emitted when files are submitted | | closed | void | Emitted when the component is closed without submission |

Supported File Types

• Images: JPG, JPEG
• Documents: PDF, DOC, DOCX

Maximum file size: 5 MB

Features

• ✅ Drag and drop support
• ✅ Click to browse files
• ✅ File type validation
• ✅ File size validation
• ✅ Single or multiple file selection
• ✅ File preview with type badges
• ✅ Progress indicators
• ✅ Material Design UI

Requirements

• Angular 20.0.0 or higher
• Angular Material 20.0.0 or higher
• Angular CDK 20.0.0 or higher

License

MIT