File Upload

File Upload component documentation for Velyx. Installation, usage examples, variants, and customization guidance for Laravel Blade, Alpine.js, Livewire, and Tailwind CSS v4.

File Upload

The File Upload component provides a drag-and-drop zone for uploading files with visual feedback and progress tracking.

Installation

Add the file upload component to your project:

npx velyx@latest add file-upload
pnpm dlx velyx@latest add file-upload
yarn dlx velyx@latest add file-upload
bunx --bun velyx@latest add file-upload

Usage

Basic File Upload

File Upload

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

File Upload

Full preview from the registry iframe.

Open in tab

Loading preview...

Props

Prop Type Default Description
accept string '*' File types to accept (e.g., 'image/*', '.pdf,.doc')
multiple boolean false Allow multiple file selection
maxSize number null Maximum file size in bytes

Examples

Images Only

<x-ui.file-upload
    accept="image/*"
    label="Upload images"
/>

Multiple Files

<x-ui.file-upload
    :multiple="true"
    label="Upload documents"
/>

With Size Limit

<x-ui.file-upload
    :maxSize="5242880"
    label="Upload file (max 5MB)"
/>

Accepted File Types

<x-ui.file-upload
    accept=".pdf,.doc,.docx"
    label="Upload document"
/>

Notes

The component uses Alpine.js for drag-and-drop functionality and progress tracking.