Image Upload

ImageUpload provides a dedicated interface for uploading and managing brand logos and user avatars.

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="avatar"
  onImageSelect={(file) => uploadFile(file)}
  onRemove={() => console.log('Removed')}
/>

Accessibility

Upload button is keyboard accessible
Image preview has descriptive alt text
Remove action has accessible label

ImageUpload Props

Prop	Type	Default	Description
`imageType`	`'logo' \| 'avatar'`	`'logo'`	Upload type (affects layout).
`title`	`string`	`—`	Title text above the upload area.
`description`	`string`	`—`	Description text below title.
`accept`	`string`	`'image/png, image/jpeg, image/jpg'`	Accepted MIME types.
`imageUrl`	`string`	`—`	URL for initial/existing image.
`onImageSelect`	`(file: File) => void`	`—`	Callback when image is selected.
`onRemove`	`() => void`	`—`	Callback when image is removed.
`onChange`	`() => void`	`—`	Callback when change button is clicked.
`width`	`number \| string`	`600`	Container width.
`className`	`string`	`''`	Additional CSS classes.