import { KbqFileUploadModule } from '@koobiq/components/file-upload';@Component({ selector: 'kbq-dropzone-content' }) class KbqDropzoneContent {}
Loader component to trigger Browser API.
@Component({ selector: '[kbqFileLoader]', exportAs: 'kbqFileLoader' }) class KbqFileLoader { readonly disabled = input<boolean>(false); readonly multiple = input<boolean | null>(null); readonly accept = input<string | null>(null); readonly for = input<string | null>(null); readonly onlyDirectory = input<boolean | null>(null); readonly describedBy = input<string | null>(null); readonly invalid = input<boolean>(false); readonly fileChange = output<Event>(); readonly input: Signal<ElementRef<HTMLInputElement>>; }
disabledboolean Whether file input selectable or not
multipleboolean | null Selection mode for file input
acceptstring | null File type specifiers
forstring | null id for file input
onlyDirectoryboolean | null Reflects webkitdirectory attribute,
which indicates that elements can only select directories instead of files.
See HTMLInputElement: webkitdirectory property.
describedBystring | null Ids of the elements describing the file input, written to its aria-describedby.
invalidboolean Whether the file input holds a value the form rejects, reported through aria-invalid.
fileChangeEvent Event fires when file selected in file-picker.
inputSignal<ElementRef<HTMLInputElement>> Underlying file input element
Component that displays an empty state for file upload areas.
@Component({ selector: 'kbq-file-upload-empty-state' }) class KbqFileUploadEmptyState extends KbqEmptyState { readonly title = input<string>(); readonly caption = input<string | TemplateRef<unknown>>(); readonly size = input<KbqDefaultSizes>('big'); readonly errorColor = input<boolean>(false); readonly alignTop = input<boolean>(false); }
titlestring Title text to display below the upload icon
captionstring | TemplateRef<unknown> Caption text or template to display below the title
sizeKbqDefaultSizes Same input as KbqEmptyState.size, redeclared only to default to big instead of normal.
It used to be a super()-time assignment, which an input() cannot take.
errorColorboolean Whether the title, the text and the projected icon render in the error color. Defaults to false.
alignTopboolean Whether the content sits at the top of the host instead of its center. Defaults to false.
@Component({ selector: 'kbq-multiple-file-upload,kbq-file-upload[multiple]' }) class KbqMultipleFileUploadComponent extends KbqFileUploadBase implements ControlValueAccessor { readonly progressMode = input<ProgressSpinnerMode>('determinate'); readonly accept = input<string[]>(); readonly size = input<'compact' | 'default'>('default'); readonly inputId = input<string>( `kbq-multiple-file-upload-${nextMultipleFileUploadUniqueId++}` ); errorStateMatcher = input<ErrorStateMatcher | undefined>(); files = model<KbqFileItem[] | undefined>(); readonly allowed = input<KbqFileUploadAllowedTypeValues>( KbqFileUploadAllowedType.File ); readonly fullScreenDropZone = input<KbqDropzoneData | boolean>(); readonly addStrategy = input<KbqFileUploadAddStrategyValues>( KbqFileUploadAddStrategy.Concat ); readonly filesAdded = output<KbqFileItem[]>(); readonly fileRemoved = output<[ KbqFileItem, number ]>(); readonly rejected = output<File[]>(); errorState: boolean; readonly localeConfiguration: Signal<KbqFileUploadLocaleConfiguration>; }
progressModeProgressSpinnerMode A value responsible for progress spinner type. Loading logic depends on selected mode
acceptstring[] Array of file type specifiers
inputIdstring custom ID for the file input element.
errorStateMatcherErrorStateMatcher | undefined An object used to control the error state of the component.
filesKbqFileItem[] | undefined The selected files.
Writing it is the model→view direction, same as writeValue(): it fills the list and tells
nobody. cvaOnChange and (filesChange) belong to the paths a user drives — see
onFileAdded() and deleteFile() — so a [files] binding cannot make the form look edited.
allowedKbqFileUploadAllowedTypeValues Determines which kind of items the upload component can accept. Defaults to 'file'.
fullScreenDropZoneKbqDropzoneData | boolean Controls whether to display fullscreen dropzone. Provide configuration object to enable, or undefined to disable.
addStrategyKbqFileUploadAddStrategyValues Controls how newly selected/dropped files are merged into the existing list.
concat accumulates files across interactions, skipping files that duplicate ones already present.
replace discards the previous selection, mirroring native input file multiple behavior. Defaults to 'concat'.
localeOverridesKbqPartialLocaleData | undefined Localized strings for this element and its subtree, keyed by locale section. Every key is optional at every depth.
idstring | null id for file input
disabledboolean | null Whether file input selectable or not
filesAddedKbqFileItem[] Emits an event containing a chunk of files added to the file list. Useful when handling added files, skipping filtering file list.
fileRemoved[ KbqFileItem, number ] Emits an event containing a tuple of file and file's index when removed from the file list. Useful when handle removed files, skipping filtering file list.
rejectedFile[] Emits the files a selection or a drop discarded — with the default concat strategy, the ones
that duplicate a file already in the list. accept is not part of this: it only filters the OS
dialog.
itemRemoved[T, number] Emits an event containing a tuple of file and file's index when removed from the file list. Useful when handle removed files, skipping filtering file list.
itemsAddedT[] Emits array of items that were added to the list.
errorStateboolean Tracks whether the component is in an error state based on the control, parent form,
and errorStateMatcher, triggering visual updates and state changes if needed.
localeConfigurationSignal<KbqFileUploadLocaleConfiguration> Localized labels of both upload flavours, following the active locale.
@Component({ selector: 'kbq-single-file-upload,kbq-file-upload:not([multiple])' }) class KbqSingleFileUploadComponent extends KbqFileUploadBase implements ControlValueAccessor { readonly progressMode = input<ProgressSpinnerMode>('determinate'); readonly accept = input<string[]>(); readonly inputId = input<string>( `kbq-single-file-upload-${nextSingleFileUploadUniqueId++}` ); errorStateMatcher = input<ErrorStateMatcher | undefined>(); file = model<KbqFileItem | null | undefined>(); readonly showFileSize = input<boolean>(true); readonly allowed = input<KbqFileUploadAllowedTypeValues>( KbqFileUploadAllowedType.File ); readonly fullScreenDropZone = input<KbqDropzoneData | boolean>(); readonly rejected = output<File[]>(); errorState: boolean; readonly localeConfiguration: Signal<KbqFileUploadLocaleConfiguration>; }
progressModeProgressSpinnerMode A value responsible for progress spinner type. Loading logic depends on selected mode
acceptstring[] Array of file type specifiers
errorStateMatcherErrorStateMatcher | undefined An object used to control the error state of the component.
fileKbqFileItem | null | undefined The selected file, or null.
Writing it is the model→view direction, same as writeValue(): it fills the list and tells
nobody. cvaOnChange and (fileChange) belong to the paths a user drives — see addFile()
and deleteItem() — so a [file] binding cannot make the form look edited.
showFileSizeboolean Controls whether to display the file size information. Defaults to true.
allowedKbqFileUploadAllowedTypeValues Determines which kind of items the upload component can accept. Defaults to 'file'.
fullScreenDropZoneKbqDropzoneData | boolean Controls whether to display fullscreen dropzone. Provide configuration object to enable, or undefined to disable.
localeOverridesKbqPartialLocaleData | undefined Localized strings for this element and its subtree, keyed by locale section. Every key is optional at every depth.
idstring | null id for file input
disabledboolean | null Whether file input selectable or not
rejectedFile[] Emits the files a selection or a drop discarded: everything past the first one, since the
component holds a single file. accept is not part of this — it only filters the OS dialog.
errorStateboolean Tracks whether the component is in an error state based on the control, parent form,
and errorStateMatcher, triggering visual updates and state changes if needed.
localeConfigurationSignal<KbqFileUploadLocaleConfiguration> Localized labels of both upload flavours, following the active locale.
@Directive() class KbqDrop { readonly disabled = model<boolean>(false); readonly filesDropped = output<KbqFile[]>(); }
disabledboolean Controls whether drag-and-drop functionality is enabled. When true, all drag events are filtered out and ignored.
filesDroppedKbqFile[] Emits an event when file items were dropped.
@Directive({ selector: '[kbqFileDrop]', exportAs: 'kbqFileDrop' }) class KbqFileDropDirective extends KbqDrop { readonly disabled = model<boolean>(false); readonly filesDropped = output<KbqFile[]>(); onDragEnter(event: DragEvent): void; }
disabledboolean Controls whether drag-and-drop functionality is enabled. When true, all drag events are filtered out and ignored.
filesDroppedKbqFile[] Emits an event when file items were dropped.
Responsible for list update (add/remove)
@Directive({ selector: '[kbqFileList]', exportAs: 'kbqFileList' }) class KbqFileList<T> { readonly list = model<T[]>([]); readonly itemRemoved = output<[T, number]>(); readonly itemsAdded = output<T[]>(); add(item: T): void; addArray(items: T[]): void; replace(items: T[]): void; remove(item: T): T[]; removeAt(index: number): T[]; }
listT[] Current list of items.
itemRemoved[T, number] Emits an event containing a tuple of file and file's index when removed from the file list. Useful when handle removed files, skipping filtering file list.
itemsAddedT[] Emits array of items that were added to the list.
add()void Adds a single item to the list and emits event
addArray()void Adds multiple items to the list and emits event
replace()void Replaces the current list with the specified items and emits event.
remove()T[] Removes the first occurrence of the specified item. Returns removed items and emits event.
removeAt()T[] Removes item at specified index. Returns removed items and emits event. An index outside the list removes nothing, emits nothing and leaves the list untouched.
File upload context.
@Directive({ selector: '[kbqFileUploadContext]', exportAs: 'kbqFileUploadContext' }) class KbqFileUploadContext { readonly id = input<string | null>(null); readonly disabled = model<boolean | null>(null); readonly multiple = input<boolean | null>(null); readonly accept = input<string | null>(null); readonly onlyDirectory = input<boolean | null>(null); }
idstring | null id for file input
disabledboolean | null Whether file input selectable or not
multipleboolean | null Selection mode for file input
acceptstring | null File type specifiers
onlyDirectoryboolean | null Reflects webkitdirectory attribute, which indicates that elements can only select directories instead of files.
Directive that turns an element into a local drag-and-drop zone.
Displays an overlay over the host element on drag enter, handles drag events, and emits dropped files to a connected file upload component.
@Directive({ selector: '[kbqLocalDropzone]', exportAs: 'kbqLocalDropzone' }) class KbqLocalDropzone extends KbqDrop { readonly connectedTo = input<KbqSingleFileUploadComponent | KbqMultipleFileUploadComponent>( undefined, { alias: 'kbqConnectedTo' } ); readonly disabled = model<boolean>(false); readonly filesDropped = output<KbqFile[]>(); open(config?: KbqDropzoneData): void; close(): void; }
kbqConnectedToKbqSingleFileUploadComponent | KbqMultipleFileUploadComponent File upload component to connect dropped files to
disabledboolean Controls whether drag-and-drop functionality is enabled. When true, all drag events are filtered out and ignored.
filesDroppedKbqFile[] Emits an event when file items were dropped.
open()void Opens the dropzone overlay positioned over the host element.
close()void Closes and disposes the overlay.
Service that provides full-screen drag-and-drop overlay functionality.
@Injectable({ providedIn: 'root' }) class KbqFullScreenDropzoneService extends KbqDrop { readonly disabled = model<boolean>(false); readonly filesDropped = output<KbqFile[]>(); init(config?: KbqDropzoneData): void; stop(): void; open(config?: KbqDropzoneData): void; close(): void; }
disabledboolean Controls whether drag-and-drop functionality is enabled. When true, all drag events are filtered out and ignored.
filesDroppedKbqFile[] Emits an event when file items were dropped.
init()void Initializes drag-and-drop event listeners on the document body.
config?KbqDropzoneData Dropzone configuration
stop()void Stops all drag-and-drop event listeners and cleans up subscriptions.
open()void Opens the dropzone overlay.
config?KbqDropzoneData Dropzone configuration
close()void Closes and disposes the overlay.
Dropzone overlay content configuration.
type KbqDropzoneData = Partial<{ caption: string; size: KbqDefaultSizes; title: string; autoCapture: boolean; }>;
captionstring Optional caption text displayed below the title.
sizeKbqDefaultSizes Visual size of the dropzone empty state content.
titlestring Title text displayed in the dropzone; falls back to localized default.
autoCaptureboolean Whether focus should be automatically captured when the overlay opens.
interface KbqFile extends File { fullPath: string; readonly lastModified: number; readonly name: string; readonly webkitRelativePath: string; readonly size: number; readonly type: string; arrayBuffer(): Promise<ArrayBuffer>; bytes(): Promise<Uint8Array<ArrayBuffer>>; slice(start?: number, end?: number, contentType?: string): Blob; stream(): ReadableStream<Uint8Array<ArrayBuffer>>; text(): Promise<string>; }
lastModifiednumber The lastModified read-only property of the File interface provides the last modified date of the file as the number of milliseconds since the Unix epoch (January 1, 1970 at midnight).
namestring The name read-only property of the File interface returns the name of the file represented by a File object.
webkitRelativePathstring The webkitRelativePath read-only property of the File interface contains a string which specifies the file's path relative to the directory selected by the user in an input element with its webkitdirectory attribute set.
sizenumber The size read-only property of the Blob interface returns the size of the Blob or File in bytes.
typestring The type read-only property of the Blob interface returns the MIME type of the file.
arrayBuffer()Promise<ArrayBuffer> The arrayBuffer() method of the Blob interface returns a Promise that resolves with the contents of the blob as binary data contained in an ArrayBuffer.
bytes()Promise<Uint8Array<ArrayBuffer>> The bytes() method of the Blob interface returns a Promise that resolves with a Uint8Array containing the contents of the blob as an array of bytes.
slice()Blob The slice() method of the Blob interface creates and returns a new Blob object which contains data from a subset of the blob on which it's called.
stream()ReadableStream<Uint8Array<ArrayBuffer>> The stream() method of the Blob interface returns a ReadableStream which upon reading returns the data contained within the Blob.
text()Promise<string> The text() method of the string containing the contents of the blob, interpreted as UTF-8.
interface KbqFileItem { file: File; hasError?: boolean; loading?: BehaviorSubject<boolean>; progress?: BehaviorSubject<number>; }
Allowed add strategies for the upload component.
type KbqFileUploadAddStrategyValues = KbqEnumValues<KbqFileUploadAddStrategy>;Allowed upload modes for the upload component.
type KbqFileUploadAllowedTypeValues = KbqEnumValues<KbqFileUploadAllowedType>;Strategy for merging newly selected/dropped files into the existing file list.
enum KbqFileUploadAddStrategy { Concat = 'concat', Replace = 'replace' }
Concat'concat' Accumulates files across interactions, skipping files that duplicate ones already present.
Replace'replace' Discards the previous selection, mirroring native <input multiple> behavior.
Upload modes enum.
enum KbqFileUploadAllowedType { File = 'file', Folder = 'folder', Mixed = 'mixed' }
Injection token that can be used to access the data that was passed in to a modal.
const KBQ_DROPZONE_DATA: InjectionToken<KbqDropzoneData>;Localization configuration provider for the labels the file upload components render themselves.
const KBQ_FILE_UPLOAD_LOCALE_CONFIGURATION: InjectionToken<KbqFileUploadLocaleConfiguration>;const KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqMultipleFileUploadLocaleConfiguration;const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqFileUploadLocaleConfiguration['single'];Utility provider of KBQ_FILE_UPLOAD_LOCALE_CONFIGURATION. Only the labels you pass are overridden;
the rest keep following the active locale.
const kbqFileUploadLocaleConfigurationProvider: ( configuration: KbqDeepPartial<KbqFileUploadLocaleConfiguration> ) => Provider;