Logo
Neura
Back to Home

Getting Started

Introduction
Installation
Usage
Dark Mode
Theming
Layouts

Components

Atoms

Form Elements

Field
Label
Description
Fieldset
Form
Input
Textarea
Select
Autocomplete
Calendar
Date Picker
Rich Editor
Checkbox
Radio
Switch
OTP
Dropzone
Tags Input

Layout

Container
Grid
Stack
Box
Card
Divider
Spacer

Navigation

Navlist
Link

Feedback

Alert
Callout
Toast
Dialog
Modal
Popover

Content

Text
Heading
Brand
Lottie
Skeleton

Data Display

Table
Chart
Kanban
Image Gallery
Tabs
Accordion
Badge
Avatar

Actions

Button
Command Palette
Composer
Context Menu
Dropdown

Utilities

Theme Switcher
Wizard

Dropzone

File upload component with drag & drop support, preview, and validation

Basic Usage

The most basic dropzone for uploading files:

Drag & drop a file here, or browse

Images only · Max 10MB 

<neura::dropzone />

With Label and Description

Add a label and description to guide the user:
Profile Picture

Upload a profile picture. JPG, PNG or GIF. Max 5MB.

Drag & drop a file here, or browse

Images only · Max 10MB 

<neura::dropzone 
    label="Profile Picture"
    description="Upload a profile picture. JPG, PNG or GIF. Max 5MB."
/>

Single File Upload

By default, the dropzone allows a single file. You can specify it with multiple="false":
Upload Document

Select a single document to upload

Drag & drop a file here, or browse

Images only · Max 10MB 

<neura::dropzone 
    label="Upload Document"
    :multiple="false"
/>

Multiple Files Upload

Enable multiple mode to allow uploading multiple files:
Upload Images

Select multiple images to upload

Drag & drop files here, or browse

Images only · Max 10MB 

<neura::dropzone 
    label="Upload Images"
    :multiple="true"
/>

File Type Restrictions

Specify accepted file types with the accept attribute:

Images Only (Default)

Upload Images

Drag & drop a file here, or browse

Images only · Max 10MB

PDF Only

Upload PDF

Only PDF files are allowed

Drag & drop a file here, or browse

All files · Max 10MB

Multiple File Types

Upload Documents

PDF, Word documents, or text files

Drag & drop a file here, or browse

All files · Max 10MB 

<!-- Images only -->
<neura::dropzone accept="image/*" />

<!-- PDF only -->
<neura::dropzone accept=".pdf" />

<!-- Multiple types -->
<neura::dropzone accept=".pdf,.doc,.docx,.txt" />

File Size Limit

Set the maximum file size in MB (default 10MB):
Upload File

Maximum file size: 5MB

Drag & drop a file here, or browse

Images only · Max 5MB 

<neura::dropzone 
    label="Upload File"
    :maxSize="5"
    description="Maximum file size: 5MB"
/>

Without Preview

Disable file preview with preview="false":
Upload Files

Files will be uploaded without preview

Drag & drop a file here, or browse

Images only · Max 10MB 

<neura::dropzone 
    :preview="false"
/>

Without Remove Button

Disable the remove button with removable="false":
Upload Files

Files cannot be removed after selection

Drag & drop a file here, or browse

Images only · Max 10MB 

<neura::dropzone 
    :removable="false"
/>

With Livewire

Integrate the dropzone with Livewire to handle server-side uploads:
Upload Images

Drag & drop files here, or browse

Images only · Max 10MB 

<neura::dropzone 
    wire:model="photos"
    :multiple="true"
/>

<!-- In your Livewire component -->
#[Validate(['photos.*' => 'image|max:2048'])]
public $photos = [];

With Form Validation

Use the dropzone in a form with validation. Errors are displayed automatically:
Profile Avatar

Upload your profile picture

Drag & drop a file here, or browse

Images only · Max 2MB 

<form method="POST" action="/upload" enctype="multipart/form-data">
        
    <neura::dropzone 
        name="avatar"
        label="Profile Avatar"
        accept="image/*"
        :maxSize="2"
    />
    
    <button type="submit">Submit</button>
</form>

Use Cases

Profile Picture Upload

Profile Picture

Upload a square profile picture. Recommended size: 400x400px

Drag & drop a file here, or browse

Images only · Max 2MB

Document Gallery

Upload Documents

Drag and drop multiple documents or click to browse

Drag & drop files here, or browse

All files · Max 10MB

Image Gallery

Upload Images

Upload multiple images to create a gallery

Drag & drop files here, or browse

Images only · Max 5MB

Best Practices

✓ Do

  • Always specify accepted file types with the accept attribute
  • Set a reasonable maximum size to avoid overly large uploads
  • Add clear labels and descriptions to guide the user
  • Use server-side validation in addition to client-side validation
  • Enable preview for images to improve user experience

✗ Don't

  • Don't accept all file types without restriction (accept="*")
  • Don't set a maximum size that's too high and could overload the server
  • Don't forget server-side validation even if client-side validation exists
  • Don't use without label or description if the context is not obvious
  • Don't allow uploading files that are too large without warning the user

Properties

Property Type Default Description
name string|null null Field name for form validation
accept string 'image/*' Accepted file types (e.g., 'image/*', '.pdf', '.pdf,.doc')
maxSize int 10 Maximum file size in MB
multiple bool false Allow uploading multiple files
preview bool true Display preview of uploaded files
removable bool true Display remove button for each file
label string|null null Label displayed above the dropzone
description string|null null Description displayed below the label
invalid bool|null null Error state (automatically detected if name is provided)