File picker

bk-file-picker: a drag-and-drop / click-to-browse file input (CVA), single or multi, with type and required validation.

bk-file-pickerForms and inputsAngular

Preview

A working preview of File picker in the Brickclay style. Try it.

Click to upload or drag and dropSVG, PNG, JPG or GIF (max. 800x400px)

Interact with the preview to see events here.

Single file, image only

Click to upload or drag and drop

PNG or JPG, up to a few MB

Multiple files, required

Attach one or more documents

Error state

File is required

Disabled, no drag

Click to upload

Interactive: validation, progress, toastr

A realistic flow: duplicate/size/extension validation on selection, each accepted file gets its own bk-file-card with a simulated upload progress bar, and removing a card fires a BkToastrService success toast.

SVG, PNG, JPG or GIF (max. 800x400px)

API reference

Input	Type	Default	Description
`accept / multi`	string / boolean	`'' / false`	Accepted MIME types; single vs. multiple files.
`draggable / description`	boolean / string	`true / ''`	Drag-and-drop support; helper text under the drop zone.
`required / hasError / errorMessage`	boolean / boolean / string	`false`	Validator integration + error display.
`disable`	`boolean`	`false`	Disables the control.
`change / error / cancel`	outputs	–	Value is File \| File[] \| null, written via `ngModel`.