@kit-ng-ui/upload

File picker + drag-and-drop area + file list. Purely client-side — the consumer wires the transport (HttpClient, presigned PUT, GraphQL mutation, …).

Install

pnpm add @kit-ng-ui/upload

@use '@kit-ng-ui/upload/styles' as upload;

Usage

<kit-upload [(files)]="files" (filesAdded)="upload($event)">
  <kit-button>Choose file</kit-button>
</kit-upload>

<kit-upload drag [(files)]="files">
  <p>Drag files here</p>
</kit-upload>

<kit-upload listType="picture-card" [(files)]="files">
  <kit-button>+</kit-button>
</kit-upload>

Update each file's status / progress / url as your transport reports back:

async upload(added: ReadonlyArray<KitUploadFile>) {
  for (const f of added) {
    this.patch(f.uid, { status: 'uploading', progress: 0 });
    await this.transport.put(f.raw!, (p) => this.patch(f.uid, { progress: p }));
    this.patch(f.uid, { status: 'done', url: '/cdn/' + f.name });
  }
}

API

| Input | Type | Default | | -------------- | --------------------------------------------------- | --------- | | files | ReadonlyArray<KitUploadFile> (two-way) | [] | | multiple | boolean | false | | accept | string \| null | null | | disabled | boolean | false | | drag | boolean | false | | showList | boolean | true | | listType | 'text' \| 'picture' \| 'picture-card' | 'text' | | beforeUpload | ((file: File) => boolean \| Promise<boolean>) \| null | null |

| Output | Payload | | -------------- | ------------------------------------ | | filesAdded | ReadonlyArray<KitUploadFile> | | filesRemoved | KitUploadFile |

The component exposes open() for programmatic file-picker invocation when the trigger isn't a labelled input.

Security

This component does no upload-time validation beyond invoking beforeUpload. Treat the picker like any other untrusted user input:

• Always re-validate on the server. accept and beforeUpload are client-side hints; a determined caller can bypass both by talking to your transport directly. The server must verify file type (by content sniff, not by extension), enforce size limits, and scan for malware.
• Don't trust file.name for filesystem paths. Sanitise on the server before persisting. Display-only usage inside the component is safe (Angular escapes interpolations).
• Revoke blob URLs. If you set file.url to a URL.createObjectURL(blob) for previews, call URL.revokeObjectURL when removing the file or destroying the parent component — otherwise the blob lingers in memory.
• Strip Authorization headers from logs. When wiring your transport, ensure request/response logging redacts auth tokens.
• CSRF. Same-origin uploads should send your CSRF token / use SameSite cookies; cross-origin uploads should rely on CORS + the server's allowlist.