Image Upload

Allows users to upload and preview images before submission.

Image Upload Playground

Preview

Code

Upload Company Logo

PNG or JPG up to 5 MB

Controls

Type:

Logo

Avatar

Installation

You can add the image upload component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install class-variance-authority clsx tailwind-merge @phosphor-icons/react @react-aria/focus @react-aria/interactions

Copy and paste the following code into your project.

ImageUpload.tsx

Button.tsx

Avatar.tsx

Loader.tsx

cn.ts

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { ImageUpload } from '@versaui/ui/components/FileUpload';

<ImageUpload
  imageType="logo"
  onImageSelect={(file) => console.log('File selected:', file)}
  onRemove={() => console.log('Image removed')}
/>

Image Types

The imageType prop determines the icon/placeholder style and preview border radius:

logo (default): Uses a rounded pill icon badge with brand accents, ideal for company logos and brand icons.
avatar: Uses a circular placeholder and circular thumbnail preview, ideal for user profile pictures.

// Logo Upload
<ImageUpload
  imageType="logo"
  title="Upload Company Logo"
  description="PNG or JPG up to 5 MB"
/>

// Avatar Upload
<ImageUpload
  imageType="avatar"
  title="Upload Profile Picture"
  description="PNG or JPG up to 2 MB"
/>

Uploaded State

When an image is uploaded (or provided via imageUrl), the component displays a thumbnail preview alongside the title, description, and Remove and Change action buttons:

<ImageUpload
  imageType="avatar"
  imageUrl="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop"
  title="Profile Picture"
  description="PNG or JPG up to 5 MB"
  onRemove={() => console.log('Removed')}
  onChange={() => console.log('Change clicked')}
/>

Custom Requirements

Customize the title, description, and accepted file extensions to guide users:

<ImageUpload
  imageType="logo"
  title="Brand Icon"
  description="SVG or PNG • Minimum 512 × 512 px"
  accept="image/svg+xml, image/png"
/>

Accessibility

Keyboard navigation: Press Enter or Space to activate file selection when focused.
Focus ring: Displays a visible primary focus ring when navigated via keyboard.
ARIA labels: Proper aria-label describing the upload action for screen readers.
Interactive actions: Remove and Change action buttons are accessible semantic buttons.

ImageUpload Props

Prop	Type	Default	Description
`imageType`	`'logo' \| 'avatar'`	`'logo'`	Type of image to upload (affects icon and preview shape).
`title`	`string`	`—`	Title text displayed next to the icon (defaults to "Upload Logo" or "Upload Avatar").
`description`	`string`	`'File type PNG or JPG • Min 512 x 512 px'`	Supporting description or file requirements text.
`accept`	`string`	`'image/png, image/jpeg, image/jpg'`	Accepted MIME types for file selection.
`imageUrl`	`string`	`—`	Initial image URL for pre-populated state.
`onImageSelect`	`(file: File) => void`	`—`	Callback fired when an image file is selected.
`onRemove`	`() => void`	`—`	Callback fired when the remove button is clicked.
`onChange`	`() => void`	`—`	Callback fired when the change button is clicked.
`width`	`number \| string`	`600`	Width of the component container.
`className`	`string`	`''`	Additional CSS class names.
`style`	`React.CSSProperties`	`—`	Additional inline styles.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page