File Input

Native file browsing and drag/drop selection with permitted file types, optional size limits, individual removal and form submission. A rejected proposal preserves the previous selection. Applications own upload transport, progress, cancellation and retry.

Choose or drop files

Browse with the keyboard or drop several files into the card. Removal keeps the remaining selection intact. Uploads are application-owned.

Attachments

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-file-input/ui-file-input.html"
>

<ui-file-input
  label="Attachments"
  name="attachments"
  multiple
></ui-file-input>

<script setup>
  import { UiFileInput } from "@threadlabs/looma";
</script>

<template>
  <UiFileInput
    label="Attachments"
    name="attachments"
    :multiple="true"
  />
</template>

import { UiFileInput } from "@threadlabs/looma";

export default function Example() {
  return <UiFileInput
    label="Attachments"
    name="attachments"
    multiple
  />;
}

/** @jsxImportSource preact */
import { UiFileInput } from "@threadlabs/looma";

export default function Example() {
  return <UiFileInput
    label="Attachments"
    name="attachments"
    multiple
  />;
}

<script>
  import { UiFileInput } from "@threadlabs/looma";
</script>

<UiFileInput
  label="Attachments"
  name="attachments"
  multiple
/>

import { Component } from "@angular/core";
import { UiFileInput } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiFileInput],
  template: `
    <ng-template
      ui-file-input
      [label]="'Attachments'"
      [name]="'attachments'"
      [multiple]="true"
    ></ng-template>
  `,
})
export default class Example {}

Limit selection

This example accepts PDF files up to five million bytes each. Limits are explicit application choices, not library defaults.

Document

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-file-input/ui-file-input.html"
>

<ui-file-input
  label="Document"
  name="document"
  accept=".pdf"
  max-file-size="5000000"
></ui-file-input>

<script setup>
  import { UiFileInput } from "@threadlabs/looma";
</script>

<template>
  <UiFileInput
    label="Document"
    name="document"
    accept=".pdf"
    :max-file-size="5000000"
  />
</template>

import { UiFileInput } from "@threadlabs/looma";

export default function Example() {
  return <UiFileInput
    label="Document"
    name="document"
    accept=".pdf"
    maxFileSize={5000000}
  />;
}

/** @jsxImportSource preact */
import { UiFileInput } from "@threadlabs/looma";

export default function Example() {
  return <UiFileInput
    label="Document"
    name="document"
    accept=".pdf"
    maxFileSize={5000000}
  />;
}

<script>
  import { UiFileInput } from "@threadlabs/looma";
</script>

<UiFileInput
  label="Document"
  name="document"
  accept=".pdf"
  maxFileSize={5000000}
/>

import { Component } from "@angular/core";
import { UiFileInput } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiFileInput],
  template: `
    <ng-template
      ui-file-input
      [label]="'Document'"
      [name]="'document'"
      [accept]="'.pdf'"
      [maxFileSize]="5000000"
    ></ng-template>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: ui-card

Attributes

Name	Description	Property	Type	Default	Allowed values
`accept`	Comma-separated extensions or MIME types, such as .pdf,image/*. Applies to browsing and dropping after upgrade; servers still validate files.	`accept`	`string`		`—`
`disabled`	Prevents browsing, dropping and removal, and omits files from native submission.	`disabled`	`boolean`	`false`	`—`
`form`	Optional ID of a form outside the component's ancestor tree.	`form`	`string`		`—`
`input-id`	Optional native file input ID for an external label.	`inputId`	`string`		`—`
`invalid`	External invalid appearance supplied by the application.	`invalid`	`boolean`	`false`	`—`
`label`	Visible heading and accessible name for the file input and group.	`label`	`string`	`Files`	`—`
`locale`	Intl locale used to display file sizes.	`locale`	`string`	`en-US`	`—`
`max-file-size`	Optional per-file byte limit. Omit for no size restriction; an explicit zero permits only empty files.	`maxFileSize`	`number`	`—`	`—`
`multiple`	Allows several files in one selection. A new browse or drop replaces the selection, matching the native input.	`multiple`	`boolean`	`false`	`—`
`name`	Native form field name. Selected files submit as File entries; upload transport remains with the application.	`name`	`string`		`—`
`remove-label`	Accessible action prefix, followed by the file name.	`removeLabel`	`string`	`Remove`	`—`
`required`	Requires at least one selected file for submission.	`required`	`boolean`	`false`	`—`

Framework props

Name	Type	Default	Allowed values
`accept`	`string`		`—`
`disabled`	`boolean`	`false`	`—`
`form`	`string`		`—`
`inputId`	`string`		`—`
`invalid`	`boolean`	`false`	`—`
`label`	`string`	`Files`	`—`
`locale`	`string`	`en-US`	`—`
`maxFileSize`	`number`	`—`	`—`
`multiple`	`boolean`	`false`	`—`
`name`	`string`		`—`
`removeLabel`	`string`	`Remove`	`—`
`required`	`boolean`	`false`	`—`

Events

Name	Detail	Description
`change`	`object` `files`: `list(unknown)` (required) `trigger`: `keyword` (required)	Emitted when a toggleable control changes checked state.
`reject`	`object` `files`: `list(unknown)` (required) `message`: `string` (required)	Emitted with the declared detail payload.

Slots

Name	Purpose
`default`	Default child content.
`footer`	Named content for the footer region.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

No component tokens.

Shared tokens

No shared tokens.