File Uploader

NbFileUploader lets users select or drag files into your app. It replaces the native <input type="file"> with a consistent, accessible widget that includes heading, description, upload states (loading, success, error), and drag-and-drop support.

The color accent follows the variant prop, which maps directly to NbButton variants, so the button, drop zone, and status icons all stay visually coherent.

Basic Usage ​

<template>
  <NbFileUploader
    heading="Upload files"
    description="Max file size is 500 KB. Supported file types are .jpg, .png, and .pdf."
    button-label="Add file"
    accept=".jpg,.png,.pdf"
    :max-size="512000"
  />
</template>

Variants ​

The variant prop sets the accent color on the button and the drag-over drop zone. Every NbButton variant is supported.

<template>
  <NbFileUploader variant="primary" button-label="Add file" />
  <NbFileUploader variant="danger" button-label="Add file" />
  <NbFileUploader variant="success" button-label="Upload" />
</template>

Multiple Files ​

Set multiple to allow selecting more than one file at a time.

<template>
  <NbFileUploader multiple button-label="Add files" />
</template>

Drag and Drop ​

Dragging any file over the component reveals the drop zone: a dashed bordered area with a prompt to drop. Releasing the file triggers the same validation and file-list logic as clicking the button.

The drop zone accent color matches the active variant.

File States ​

Each file in the list can be in one of three states, controlled via the setFileStatus method on the component instance:

Validation errors (size, type) are shown immediately on drop/select with a red border and error message below the filename.

<template>
  <NbFileUploader ref="uploader" button-label="Add file" :max-size="512000" />
</template>

// After starting your upload request:
uploader.value.setFileStatus(0, 'loading')

// On success:
uploader.value.setFileStatus(0, 'success')

// On server-side error:
uploader.value.setFileStatus(0, 'idle', 'Upload failed. Please try again.')

Validation ​

Client-side validation runs automatically on file select and drop:

• maxSize - rejects files larger than the specified number of bytes.
• accept - rejects files whose extension does not match the accept string.

Rejected files are still added to the list with an error state so the user can see what went wrong and remove them.

<template>
  <NbFileUploader accept=".jpg,.png" :max-size="204800" />
</template>

Events ​

<template>
  <NbFileUploader @change="onFilesChanged" @remove="onFileRemoved" />
</template>

Props ​

Exposed ​