Upload

Upload handles file selection, drop zones, validation, and removable file lists.

Drag and Drop file here or Choose file

Supported formats: XLS, XLSXMaximum size: 25MB

Table Name.xls

3 MB

import { useState } from 'react';
import CloseButton from '@/components/ui/close-button';
import Upload from '@/components/ui/upload';
import Alert from '@/components/ui/alert';

Installation

Add this component with the NateUI CLI.

npx @nateui/cli@latest add Upload

pnpm dlx @nateui/cli@latest add Upload

yarn dlx @nateui/cli@latest add Upload

Examples

Basic

import Upload from '@/components/ui/upload';

export default function BasicDemo() {
  return (

Drag And Drop

import Upload from '@/components/ui/upload';
import { PiCloudArrowUp } from 'react-icons/pi'

export default function DragAndDropDemo() {

Custom Trigger

import Upload from '@/components/ui/upload';
import Button from '@/components/ui/button';
import { PiUploadSimple } from 'react-icons/pi'

Validation

import { useState } from 'react';
import Upload from '@/components/ui/upload';
import Alert from '@/components/ui/alert';

Avatar Image

import { useEffect, useState } from 'react';
import Avatar from '@/components/ui/avatar';
import Button from '@/components/ui/button';
import Upload from '@/components/ui/upload';

Controlled

import { useState } from 'react';
import Upload from '@/components/ui/upload';
import Tag from '@/components/ui/tag';

Custom File Item

import { useState } from 'react';
import Upload from '@/components/ui/upload';
import Button from '@/components/ui/button';
import CloseButton from '@/components/ui/close-button';

Disabled

import Upload from '@/components/ui/upload';

export default function DisabledDemo() {
  return (

API

Upload manages browser file selection and an in-memory list of selected files. It does not send files to a server by itself; use onChange, beforeUpload, and customFileItem to connect it to the workflow around it.

Prop	Description	Type	Default
`accept`	File accept string forwarded to the hidden file input.	`string`	-
`beforeUpload`	Synchronously validates selected files before they are added to the list. Return `false` or a message string to block them.	`UploadBeforeUpload`	-
`children`	Custom trigger content. Without children, Upload renders its default button or dropzone text.	`ReactNode`	-
`customFileItem`	Custom renderer for each listed file. Receives the file, index, remove callback, and internal `FileIcon` renderer.	`UploadCustomFileItem`	-
`disabled`	Prevents file selection and applies disabled styling.	`boolean`	`false`
`draggable`	Renders a dashed drop area and enables drag-over feedback.	`boolean`	`false`
`fileList`	Controlled file list. When omitted, Upload stores selected files internally.	`File[]`	-
`fileListClass`	Class names applied to the file-list wrapper.	`string`	-
`fileItemClass`	Class names applied to default file rows.	`string`	-
`multiple`	Allows selecting more than one file.	`boolean`	-
`onBeforeUpload`	Called when `beforeUpload` blocks a file, with `false` or the returned message.	`(result: boolean \| string) => void`	-
`onChange`	Called after a valid file is added. Receives the first selected file and the full list.	`UploadChangeHandler`	-
`onFileRemove`	Called after a file is removed. Receives the removed file and the next list.	`UploadRemoveHandler`	-
`showList`	Shows the selected file list below the trigger.	`boolean`	`true`
`tip`	Hint content rendered below the trigger.	`string \| ReactNode`	-
`uploadLimit`	Limit checked before adding another selection. When set to `1`, the next valid upload replaces the current file.	`number`	-
`className`	Extra classes for the root upload container.	`string`	-
`ref`	Ref forwarded to the root upload container.	`Ref<HTMLDivElement>`	-
`...nativeProps`	Native props forwarded through the root container type.	`UploadNativeProps`	-

Types

type UploadBeforeUpload = (
  files: FileList | null,
  fileList: File[],
) => boolean | string
 
type UploadChangeHandler = (file: File, fileList: File[]) => void
 
type UploadRemoveHandler = (file: File, fileList: File[]) => void
 
type UploadCustomFileItem = (props: {
  file: File
  index: number
  onRemove: () => void
  FileIcon: (props: FileIconProps) => JSX.Element
}) => ReactNode
 
type FileIconProps = {
  file: File
}
 
type UploadNativeProps = Omit<ComponentPropsWithRef<'div'>, 'onChange'>