UploadZone

A drag-and-drop file upload component with built-in preview functionality.

'use client';

import { UploadZone } from 'rizzui/upload-zone';

Default

The default style of UploadZone.

Upload File

Drag & drop files here or click to browse

'use client';

import { UploadZone } from 'rizzui/upload-zone';

export default function App() {
  return <UploadZone label="Upload File" />;
}

Variants

You can change the style of UploadZone using variant property.

Outline Variant

Drag & drop files here or click to browse

Flat Variant

Drag & drop files here or click to browse

'use client';

import { UploadZone } from 'rizzui/upload-zone';

export default function App() {
  return (
    <>
      <UploadZone label="Outline Variant" variant="outline" />
      <UploadZone label="Flat Variant" variant="flat" />
    </>
  );
}

Sizes

You can change the size of UploadZone using size property.

Small UploadZone

Drag & drop files here or click to browse

Default UploadZone

Drag & drop files here or click to browse

Large UploadZone

Drag & drop files here or click to browse

'use client';

import { UploadZone } from 'rizzui/upload-zone';

export default function App() {
  return (
    <>
      <UploadZone label="Small UploadZone" size="sm" />
      <UploadZone label="Default UploadZone" />
      <UploadZone label="Large UploadZone" size="lg" />
    </>
  );
}

With Multiple Files

By enabling multiple property true, user can upload multiple files.

Upload Multiple Files

Drag & drop files here or click to browse

'use client';

import { UploadZone } from 'rizzui/upload-zone';

export default function App() {
  return <UploadZone label="Upload Multiple Files" multiple />;
}

Accept File Types

You can restrict file types using accept property.

Upload Images

Drag & drop files here or click to browse

Only image files are allowed

Upload PDF

Drag & drop files here or click to browse

Only PDF files are allowed

'use client';

import { UploadZone } from 'rizzui/upload-zone';

export default function App() {
  return (
    <>
      <UploadZone
        label="Upload Images"
        accept="image/*"
        helperText="Only image files are allowed"
      />
      <UploadZone
        label="Upload PDF"
        accept=".pdf,application/pdf"
        helperText="Only PDF files are allowed"
      />
    </>
  );
}

Custom Placeholder & Icon

You can customize the placeholder text and icon using placeholder and icon properties.

Custom Placeholder

Drop your files here or click to select

Custom Icon

Drag & drop files here or click to browse

'use client';

import { UploadZone } from 'rizzui/upload-zone';

export default function App() {
  return (
    <>
      <UploadZone
        label="Custom Placeholder"
        placeholder="Drop your files here or click to select"
      />
      <UploadZone
        label="Custom Icon"
        icon={
          <svg
            className="w-12 h-12 text-primary"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M12 4v16m8-8H4"
            />
          </svg>
        }
      />
    </>
  );
}

Disabled

The disabled state of the UploadZone component.

Upload File

Drag & drop files here or click to browse

'use client';

import { UploadZone } from 'rizzui/upload-zone';

export default function App() {
  return <UploadZone label="Upload File" disabled />;
}

With Helper Text

You can add helper text to the UploadZone component using helperText property.

Upload Files

Drag & drop files here or click to browse

Maximum file size: 10MB. Supported formats: PDF, DOC, DOCX

'use client';

import { UploadZone } from 'rizzui/upload-zone';

export default function App() {
  return (
    <UploadZone
      label="Upload Files"
      helperText="Maximum file size: 10MB. Supported formats: PDF, DOC, DOCX"
      className="w-full"
    />
  );
}

With Error Message

You can show the validation error message using error property.

Upload Files

Drag & drop files here or click to browse

Please select a valid file

'use client';

import { UploadZone } from 'rizzui/upload-zone';

export default function App() {
  return <UploadZone label="Upload Files" error="Please select a valid file" />;
}

Controlled Component

You can control the UploadZone component using value and onChange properties.

Controlled UploadZone

Drag & drop files here or click to browse

'use client';

import { useState } from 'react';
import { UploadZone } from 'rizzui/upload-zone';

export default function App() {
  const [files, setFiles] = useState<FileList | null>(null);

  return (
    <UploadZone
      label="Controlled UploadZone"
      multiple
      value={files}
      onChange={(files) => {
        setFiles(files);
        if (files) {
          console.log('Selected files:', files);
        }
      }}
      className="w-full"
    />
  );
}

With Drag and Drop Callback

You can use onDrop callback to handle drag-and-drop events specifically.

Upload Files

Drag & drop files here or click to browse

'use client';

import { UploadZone } from 'rizzui/upload-zone';

export default function App() {
  return (
    <UploadZone
      label="Upload Files"
      multiple
      onDrop={(files) => {
        console.log('Files dropped:', files);
        // Handle file upload
      }}
      onChange={(files) => {
        console.log('Files selected:', files);
      }}
    />
  );
}

API Reference

---

UploadZone Props

Here is the API documentation of the UploadZone component. And the rest of the props are the same as the original html input field.

Props	Type	Description	Default
label	ReactNode	Set field label	__
labelWeight	LabelWeight	Set label font weight	"medium"
variant	UploadZoneVariants	The variants of the component are:	"outline"
size	UploadZoneSizes	The size of the component. "sm" is equivalent to the dense input styling.	"md"
placeholder	ReactNode	Set placeholder text (can be JSX)	__
icon	ReactNode | null	Set custom icon (set to null to hide)	__
disabled	boolean	Whether the input is disabled or not	__
multiple	boolean	Allow multiple file selection	__
accept	string	Accepted file types (e.g., 'image/*', '.pdf')	__
value	FileList | File[] | null	Controlled value for files	__
onChange	(files: FileList | null) => void	Callback when files are selected	__
onDrop	(files: FileList) => void	Callback specifically for drag-and-drop events	__
helperText	ReactNode	Add helper text. Can be a string or a React component	__
error	string	Show error message using this prop	__
labelClassName	string	Override default CSS style of label	__
uploadZoneClassName	string	Override default CSS style of upload zone area	__
contentClassName	string	Override default CSS style of content area	__
previewClassName	string	Override default CSS style of preview container	__
helperClassName	string	Override default CSS style of helperText	__
errorClassName	string	Override default CSS style of error message	__
className	string	Add custom classes to the root of the component	__
ref	Ref<HTMLInputElement>		__
name	string	Input name (for form submission)	__
...	InputHTMLAttributes	native props like required, onFocus, onBlur ...	__

UploadZone Variants

type UploadZoneVariants = 'outline' | 'flat';

Label Weight

type LabelWeight = 'normal' | 'medium' | 'semibold' | 'bold';

UploadZone Sizes

type UploadZoneSizes = 'sm' | 'md' | 'lg';