File upload

A drag-and-drop file upload zone.

Click to upload or drag & dropUp to 10MB

import { BuiFileUpload } from 'ng-blatui';

<bui-file-upload hint="Up to 10MB" />

Multiple

Click to upload or drag & dropMax 5 files

<bui-file-upload [multiple]="true" accept=".pdf,.doc,.docx" hint="Max 5 files" />

Image preview

Click to upload or drag & dropPNG, JPG or GIF

<bui-file-upload [multiple]="true" accept="image/*" hint="PNG, JPG or GIF" />

With progress

report-q2.pdf70%

<!-- pair an upload row with bui-progress for an in-flight upload -->
<div class="flex items-center gap-3">
  <span class="font-medium">report-q2.pdf</span>
  <bui-progress [value]="70" />
</div>

API reference

Inputs

Prop	Type	Default	Description
`multiple`	`boolean`	`false`	Whether multiple files can be selected and accumulated.
`accept`	`string`	`''`	Comma-separated list of accepted file types (the `accept` attribute).
`name`	`string`	`''`	Native `name` attribute for the file input.
`hint`	`string`	`''`	Optional helper text shown under the dropzone label.
`disabled`	`boolean`	`false`	Whether the upload zone is disabled.
`dropzoneLabel`	`string`	—	Custom dropzone prompt text.
`removeLabel`	`string`	—	Custom accessible label for each remove button.

Outputs

Event	Payload	Description
`filesChange`	`readonly File[]`	Emitted with the current file list whenever the selection changes.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.