DocsFile Upload

File Upload

File upload components with drag and drop.

NextCard

On This Page

Quick Actions

Project Studio

New Nexore Make (AI)Source on GitHub

DocsFile Upload

File Upload

File upload components with drag and drop.

File Upload

Drag and drop file upload region with automatic validation checking for size, count and support extensions.

When to use

default layoutInline form blocks requesting a fast document upload or receipt scanner

dropzone variantDedicated media or content drop areas where rich instructions, drag alerts, and multi-file listings are expected

button variantCompact dialog forms or profile picture triggers where a full drag zone is visually overwhelming

accept type constraintEnforcing strict file extensions (e.g. only JPEG/PNG images or PDF documents) before browser selection opens

Interactive Playground

Live CanvasInteractive

Click to upload or drag & drop

Supports: image/*,application/pdf (Max: 10MB)

Controls(4)

variant

select

Visual container styling format option

multiple

boolean

Toggle state:

Allows uploading multiple items simultaneously

text

Comma-separated string of accepted formats

maxSize

number

Maximum file size constraint limit in bytes (e.g. 10MB)

Generated JSX

Source

import { FileUpload } from "nexoreui"

<FileUpload />

Default Drag & Drop Zone

Click to upload or drag & drop

All files supported (Max: 10MB)

component.tsx

Large Dropzone Variant

Click to upload or drag & drop

All files supported (Max: 5MB)

component.tsx

Simple Button Trigger

component.tsx

Multiple File Selection

Click to upload or drag & drop

All files supported (Max: 10MB)

component.tsx

Images & PDF Formats Only

Click to upload or drag & drop

Supports: image/*,application/pdf (Max: 10MB)

component.tsx

API Reference (Props)

Prop	Type	Default	Description
onUpload*	(files: File[]) => void	`—`	Callback fired when files are validated and uploaded.
accept	string	`—`	Mime-type query string (e.g. "image/*,.pdf").
maxSize	number	`10485760 (10MB)`	Maximum file size threshold in bytes.
multiple	boolean	`false`	Allows uploading more than one item in sequence.
variant	"default" \| "dropzone" \| "button"	`"default"`	Display variant for file collection component.
className	string	`—`	Additional custom class names.

♿ Accessibility (a11y)

Keyboard Focus: Target clickable zones are focusable and can be activated using Enter or Space.
Native Input: Employs a hidden native <input type="file"> element to guarantee full compatibility with mobile devices, voice command utilities, and standard screen readers.

NextCard

On This Page

Quick Actions

Project Studio

New Nexore Make (AI)Source on GitHub

File Upload

Drag and drop file upload region with automatic validation checking for size, count and support extensions.

When to use

default layoutInline form blocks requesting a fast document upload or receipt scanner

dropzone variantDedicated media or content drop areas where rich instructions, drag alerts, and multi-file listings are expected

button variantCompact dialog forms or profile picture triggers where a full drag zone is visually overwhelming

accept type constraintEnforcing strict file extensions (e.g. only JPEG/PNG images or PDF documents) before browser selection opens

Interactive Playground

Live CanvasInteractive

Click to upload or drag & drop

Supports: image/*,application/pdf (Max: 10MB)

Controls(4)

variant

select

Visual container styling format option

multiple

boolean

Toggle state:

Allows uploading multiple items simultaneously

text

Comma-separated string of accepted formats

maxSize

number

Maximum file size constraint limit in bytes (e.g. 10MB)

Generated JSX

Source

import { FileUpload } from "nexoreui"

<FileUpload />

Default Drag & Drop Zone

Click to upload or drag & drop

All files supported (Max: 10MB)

component.tsx

Large Dropzone Variant

Click to upload or drag & drop

All files supported (Max: 5MB)

component.tsx

Simple Button Trigger

component.tsx

Multiple File Selection

Click to upload or drag & drop

All files supported (Max: 10MB)

component.tsx

Images & PDF Formats Only

Click to upload or drag & drop

Supports: image/*,application/pdf (Max: 10MB)

component.tsx

API Reference (Props)

Prop	Type	Default	Description
onUpload*	(files: File[]) => void	`—`	Callback fired when files are validated and uploaded.
accept	string	`—`	Mime-type query string (e.g. "image/*,.pdf").
maxSize	number	`10485760 (10MB)`	Maximum file size threshold in bytes.
multiple	boolean	`false`	Allows uploading more than one item in sequence.
variant	"default" \| "dropzone" \| "button"	`"default"`	Display variant for file collection component.
className	string	`—`	Additional custom class names.

♿ Accessibility (a11y)

Keyboard Focus: Target clickable zones are focusable and can be activated using Enter or Space.
Native Input: Employs a hidden native <input type="file"> element to guarantee full compatibility with mobile devices, voice command utilities, and standard screen readers.