File Input

The File Input component renders a single-file form field with QDS input styling and file validation support.

import {FileInputModule} from "@qualcomm-ui/angular/file-input"

Overview

The File Input component supports both click-to-browse and drag-and-drop interactions for a single file input. An advanced file upload component is currently in development and will support multi-file lists, async uploads, previews, and rejected-file workflows.

Examples

Simple

The simple <q-file-input> component bundles the label, input-like control, display text, clear trigger, hidden input, and error text into one component.

Upload file

Select a file

<q-file-input
  class="w-full max-w-sm"
  label="Upload file"
  placeholder="Select a file"
  startIcon="Upload"
/>

Composite

Use the composite API when layout or individual parts need explicit control.

Upload agreement

Select a PDF

<div
  class="w-full max-w-sm"
  q-file-input-root
  startIcon="Upload"
  [accept]="['.pdf']"
>
  <label q-file-input-label>Upload agreement</label>
  <div q-file-input-control>
    <span placeholder="Select a PDF" q-file-input-display></span>
  </div>
  <input q-file-input-hidden-input />
</div>

Sizes

The File Input component supports three size variants: sm, md (default), and lg.

Upload file (Small)

Select a file

Upload file (Medium)

Select a file

Upload file (Large)

Select a file

<div class="flex w-full flex-col items-center gap-6">
  <q-file-input
    class="w-full max-w-sm"
    label="Upload file (Small)"
    placeholder="Select a file"
    size="sm"
    startIcon="Upload"
  />

  <q-file-input
    class="w-full max-w-sm"
    label="Upload file (Medium)"
    placeholder="Select a file"
    size="md"
    startIcon="Upload"
  />

  <q-file-input
    class="w-full max-w-sm"
    label="Upload file (Large)"
    placeholder="Select a file"
    size="lg"
    startIcon="Upload"
  />
</div>

Errors

Set invalid and errorText for field-level validation messages. Configure file validation with properties such as accept, maxFileSize, and validate.

Tax document

Select a PDF

Upload a PDF file under 5 MB

<q-file-input
  class="w-full max-w-sm"
  errorText="Upload a PDF file under 5 MB"
  invalid
  label="Tax document"
  placeholder="Select a PDF"
  required
  startIcon="Upload"
  [accept]="['.pdf']"
  [maxFileSize]="5 * 1024 * 1024"
/>

Disabled

Set disabled on the simple component or root directive to prevent file selection and clearing.

I agree to the terms and conditions

Upload approval

Select a file

<div class="flex w-full max-w-sm flex-col gap-4">
  <label
    label="I agree to the terms and conditions"
    q-checkbox
    [(ngModel)]="agreed"
  ></label>
  <q-file-input
    label="Upload approval"
    placeholder="Select a file"
    startIcon="Upload"
    [disabled]="!agreed()"
  />
</div>

API

<q-file-input>

The <q-file-input> component extends the q-file-input-root directive with the following properties:

Prop	Type	Default
clearable When `true`, renders a clear button that resets the selected file on click. The button only appears when a file has been selected.	boolean	true
errorText Optional error message that describes the element when invalid is true.	string

label Optional label describing the file input. This element is automatically associated with the hidden file input for accessibility.	string

placeholder Text shown when no file has been selected.	string

clearable

Type

boolean

Description

When true, renders a clear button that resets the selected file on click. The button only appears when a file has been selected.

errorText

Type

string

Description

Optional error message that describes the element when invalid is true.

label

Type

string

Description

Optional label describing the file input. This element is automatically associated with the hidden file input for accessibility.

placeholder

Type

string

Description

Text shown when no file has been selected.

Composite API

q-file-input-root

Prop	Type	Default
accept The accept file types.	FileAcceptType
acceptedFiles The controlled accepted files.	Array<File>
allowDrop Whether to allow drag and drop in the dropzone element.	boolean	true
capture The default camera to use when capturing media (for mobile only).	\| 'user' \| 'environment'
defaultAcceptedFiles The default accepted files when rendered. Use when you don't need to control the accepted files of the input.	Array<File>
dir The document's text/writing direction.	'ltr' \| 'rtl'
directory Whether to accept directories, only works in webkit browsers.	boolean
disabled Whether the file input is disabled.	boolean
endIcon lucide-angular icon, positioned after the input.	\| string \| LucideIconData

getRootNode A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.	() => \| Node \| ShadowRoot \| Document
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string
invalid Whether the file input is invalid. When true, applies error styling and shows the error text. Use for form-level validation. Per-file rejection errors are handled automatically.	boolean
locale The locale for formatting file sizes.	string
maxFiles The maximum number of files.	number	1
maxFileSize The maximum file size in bytes.	number	Infinity
minFileSize The minimum file size in bytes.	number	0
name The name of the underlying file input.	string
preventDocumentDrop Whether to prevent the drop event on the document.	boolean	true
required Whether the file input is required.	boolean
size The size of the input field and its elements. Governs properties like font size, item padding, and icon sizes.	\| 'sm' \| 'md' \| 'lg'	'md'
startIcon lucide-angular icon, positioned before the input.	\| string \| LucideIconData

transformFiles Transforms accepted files asynchronously after validation. Use for compression, resizing, format conversion, or other processing before setting final state.	( files: Array<File>, ) => Promise<Array<File>>
translations The localized messages to use.	{ listLabel?: string }
validate Function to validate a file.	FileValidateFn
(fileAccepted) Callback fired when the file is accepted.	{ files: Array<File> }
(fileChanged) Callback fired when the value changes, whether accepted or rejected.	FileDetails
(fileRejected) Callback fired when the file is rejected.	FileRejectDetails

Type

FileAcceptType

Description

The accept file types.

acceptedFiles

Type

Array<File>

Description

The controlled accepted files.

allowDrop

Type

boolean

Description

Whether to allow drag and drop in the dropzone element.

capture

Type

| 'user'
| 'environment'

Description

The default camera to use when capturing media (for mobile only).

defaultAcceptedFiles

Type

Array<File>

Description

The default accepted files when rendered. Use when you don't need to control the accepted files of the input.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

directory

Type

boolean

Description

Whether to accept directories, only works in webkit browsers.

disabled

Type

boolean

Description

Whether the file input is disabled.

endIcon

Type

| string
| LucideIconData

Description

lucide-angular icon, positioned after the input.

getRootNode

Type

() =>
| Node
| ShadowRoot
| Document

Description

A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

invalid

Type

boolean

Description

Whether the file input is invalid. When true, applies error styling and shows the error text. Use for form-level validation. Per-file rejection errors are handled automatically.

locale

Type

string

Description

The locale for formatting file sizes.

maxFiles

Type

number

Description

The maximum number of files.

maxFileSize

Type

number

Description

The maximum file size in bytes.

minFileSize

Type

number

Description

The minimum file size in bytes.

name

Type

string

Description

The name of the underlying file input.

preventDocumentDrop

Type

boolean

Description

Whether to prevent the drop event on the document.

required

Type

boolean

Description

Whether the file input is required.

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the input field and its elements. Governs properties like font size, item padding, and icon sizes.

startIcon

Type

| string
| LucideIconData

Description

lucide-angular icon, positioned before the input.

transformFiles

Type

(
  files: Array<File>,
) => Promise<Array<File>>

Description

Transforms accepted files asynchronously after validation. Use for compression, resizing, format conversion, or other processing before setting final state.

translations

Type

{
  listLabel?: string
}

Description

The localized messages to use.

validate

Type

FileValidateFn

Description

Function to validate a file.

(fileAccepted)

Type

{
  files: Array<File>
}

Description

Callback fired when the file is accepted.

(fileChanged)

Type

FileDetails

Description

Callback fired when the value changes, whether accepted or rejected.

(fileRejected)

Type

FileRejectDetails

Description

Callback fired when the file is rejected.

Attribute / Property	Value
`class`	'qui-input__root'
`data-disabled`
`data-dragging`
`data-file-upload-part`	'root'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-input__root'

data-disabled

Value

data-dragging

Value

data-file-upload-part

Value

'root'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-file-input-label

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`class`	'qui-input__label'
`data-disabled`
`data-file-upload-part`	'label'
`data-required`
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-input__label'

data-disabled

Value

data-file-upload-part

Value

'label'

data-required

Value

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-file-input-control

Prop	Type
disableClick Whether to disable the click event on the dropzone	boolean
id	string

disableClick

Type

boolean

Description

Whether to disable the click event on the dropzone

Type

string

Attribute / Property	Value
`class`	'qui-input__input-group'
`data-disabled`
`data-dragging`
`data-file-upload-part`	'dropzone'
`data-focus`
`data-has-file`
`data-invalid`
`data-size`	\| 'sm' \| 'md' \| 'lg'
`tabIndex`	0

class

Value

'qui-input__input-group'

data-disabled

Value

data-dragging

Value

data-file-upload-part

Value

'dropzone'

data-focus

Value

data-has-file

Value

data-invalid

Value

data-size

Value

| 'sm'
| 'md'
| 'lg'

tabIndex

Value

q-file-input-display

Prop	Type
placeholder Text shown when no file has been selected.	string

placeholder

Type

string

Description

Text shown when no file has been selected.

Attribute / Property	Value
`class`	'qui-input__input'
`data-size`	\| 'sm' \| 'md' \| 'lg'

q-file-input-clear-trigger

Attribute / Property	Value
`class`	'qui-input__clear-trigger'
`data-file-upload-part`	'clear-trigger'
`data-invalid`
`data-size`	\| 'sm' \| 'md' \| 'lg'
`hidden`	boolean

class

Value

'qui-input__clear-trigger'

data-file-upload-part

Value

'clear-trigger'

data-invalid

Value

data-size

Value

| 'sm'
| 'md'
| 'lg'

hidden

Value

boolean

q-file-input-hidden-input

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`data-file-upload-part`	'hidden-input'
`style`	CSSProperties
`tabIndex`	-1

q-file-input-error-text

Prop	Type
icon Optional error indicator icon.	\| string \| LucideIconData
id	string

icon

Type

| string
| LucideIconData

Description

Optional error indicator icon.

Type

string

Attribute / Property	Value
`class`	'qui-input__error-text'
`data-file-upload-part`	'error-text'
`hidden`	boolean

Last updated on May 25, 2026 by Ryan Bower

Drawer

Header Bar