File Upload

Name: ng-oat
Author: SashiKumar Yadav

Drag-and-drop file upload area with click-to-browse, file list, and size validation.

Input	Type	Default	Description
`accept`	`string`	`''`	Accepted file types (e.g. "image/*")
`multiple`	`boolean`	`false`	Allow multiple files
`maxSize`	`number`	`0`	Max file size in bytes (0 = no limit)
`disabled`	`boolean`	`false`	Disabled state
`label`	`string`	`''`	Custom dropzone label

Output	Type	Description
`filesSelected`	`File[]`	Emits when files are added or removed

Import & Usage

typescript

import { Component } from '@angular/core';
import { NgOatFileUpload } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatFileUpload],
  template: `
    <ng-oat-file-upload
      accept="image/*"
      [multiple]="true"
      [maxSize]="5242880"
      (filesSelected)="onFiles($event)" />
  `,
})
export class ExampleComponent {
  onFiles(files: File[]) {
    console.log('Selected:', files);
  }
}

Basic

Click to upload or drag and drop

html

<ng-oat-file-upload (filesSelected)="onFiles($event)" />

Multiple Files with Constraints

Drop images here or click to browse

image/* · Max 5.0 MB

html

<ng-oat-file-upload
  accept="image/*"
  [multiple]="true"
  [maxSize]="5242880"
  label="Drop images here or click to browse"
  (filesSelected)="onFiles($event)"
/>

Disabled

Upload disabled

html

<ng-oat-file-upload [disabled]="true" label="Upload disabled" />