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" />

Files the record already holds

Click to upload or drag & dropAn edit form's existing attachments

avatar.webp41.2 KB
contract-2026.pdf180.0 KB

<!-- [value] is the file the record already holds: a URL, a list of URLs,
     or { url, name, size, image } maps. Each becomes an ordinary row. -->
<bui-file-upload [value]="saved()" (fileRemove)="drop($event)" />
// saved = signal([{ url: '/uploads/avatar.png', name: 'avatar.png', size: 42184 }])
// drop({ url }) { this.saved.update(files => files.filter(f => f.url !== url)); }
// Removing such a row reports fileRemove rather than withdrawing anything — the file is
// your record's, so dropping it from [value] is yours to do.

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.
`value`	`BuiFileUploadSource`	`null`	The file(s) the record already holds — a URL, a list of URLs, or descriptors. Each becomes an ordinary row: same thumbnail, same name and size, same remove button. Removing one reports rather than withdrawing anything; the file belongs to your record, so dropping it from `value` is yours to do.
`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 picked files whenever the selection changes. Stored files are not in it.
`fileRemove`	`BuiFileUploadRemoval`	Emitted when the remove button on a row that came from `value` is pressed.

Types

BuiFileUploadRemoval — What reports when a stored file's row is removed.

Field	Type	Description
`url`	`string`	The `url` of the row that was removed.
`name`	`string`	The name that row was showing.

BuiFileUploadSource — Everything `value` accepts: one URL, one descriptor, or a list of either.

string | BuiFileUploadValue | readonly (string | BuiFileUploadValue)[]

BuiFileUploadValue — A file the consumer's record already holds — an avatar, a logo, an attachment saved last week. It is the field's *current value*, which is the one thing a file input cannot express: the native control carries what is being picked now, never what was picked before.

Field	Type	Description
`url`	`string`	Where the stored file lives. Doubles as the thumbnail source for an image.
`name`?	`string`	Row label. Defaults to the last path segment of `url`.
`size`?	`number`	Size in bytes, when the record knows it. A row without one shows no size.
`image`?	`false \| true`	Render `url` as a thumbnail. Inferred from the extension when left unset.

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