Neura UI

Loading…

Logo
Neura UI
All pages 100

Dropzone

Drop files onto a dashed frame, preview them, and bind the result to Livewire.

Files

Drop a file or browse. Images preview in place. A dashed edge marches while a file is over the frame, and an invalid file tints the edge red. Size, variant, color, rounded, and shadow follow the dropzone config.
blade 
<neura::dropzone />

Variants

variant is default, solid, card, minimal, cover, or avatar. Avatar is a circle: the camera sits in the empty state, and a scrim appears only once a photo is there.
blade
Solid

Filled well

Card

Raised card

Minimal

Compact trigger

Cover

Wide banner

<neura::dropzone variant="solid" label="Solid" />
<neura::dropzone variant="card" label="Card" />
<neura::dropzone variant="minimal" label="Minimal" />
<neura::dropzone variant="cover" label="Cover" />
<neura::dropzone variant="avatar" accept="image/*" />

Several files

multiple keeps every file. compact-at switches the previews to a tight row once that many files are in. accept limits the picker, and max-size is the cap in megabytes.
blade
Upload images

JPG, PNG, or GIF. Up to 5MB each.

files a file 

<neura::dropzone
    label="Upload images"
    description="JPG, PNG, or GIF. Up to 5MB each."
    accept="image/*"
    :multiple="true"
    :compact-at="2"
    :max-size="5"
/>

<neura::dropzone accept=".pdf,.doc,.docx" />

Livewire

Bind with wire:model. Validation errors on that property, including documents.*, mark the frame invalid. Submit with no file to see the message under the field.
blade
Documents

PDF, DOC, or DOCX. Up to 5MB each.

files a file 

<neura::dropzone
    wire:model="documents"
    accept=".pdf,.doc,.docx"
    :multiple="true"
    :max-size="5"
/>
<neura::error name="documents" />
PHP 
use Livewire\WithFileUploads;
use Neura\Kit\Concerns\WithDropzone;

class DocumentUploader extends Component
{
    use WithFileUploads, WithDropzone;

    public $documents = [];

    public function save()
    {
        $this->validate([
            'documents' => 'required|array|min:1',
            'documents.*' => 'file|mimes:pdf,doc,docx|max:5120',
        ]);

        $paths = $this->storeDropzoneFiles('documents', 'uploads/documents');
        $this->clearDropzone('documents');
    }
}

WithDropzone

The trait turns the dropzone payload into TemporaryUploadedFile instances. Use it when the field posts the chunked payload. A plain wire:model file does not need it.
Property Type Default Description
getDropzoneFiles($property) DropzoneFiles Every file as a collection.
getDropzoneFile($property) TemporaryUploadedFile|null The single file, for an upload that is not multiple.
storeDropzoneFiles($property, $path, $disk) array Stores every file and returns the paths.
storeDropzoneFile($property, $path, $disk) string|null Stores one file and returns the path.
clearDropzone($property) void Empties the field after you have stored the files.

Invalid

:invalid="true" forces the error state. Leave it unset and wire:model turns it on when validation fails.
blade
Upload documents

This frame is marked invalid.

files a file 

<neura::dropzone :invalid="true" label="Upload documents" />
<neura::dropzone :preview="false" />
<neura::dropzone :removable="false" />
<neura::dropzone :chunk-size="2" :max-size="100" />

Props

Property Type Default Description
acceptstringimage/* File types the picker allows.
variantstringdefault default, solid, card, minimal, cover, or avatar.
sizestringconfig xs, sm, md, lg, or xl.
maxSizeint10 Maximum size in megabytes.
multipleboolfalse Keep more than one file.
compactAtint|nullnull Switch previews to a compact row at this count.
previewbooltrue Show a preview of each file.
removablebooltrue Show the remove control on each preview.
labelstring|nullnull Text above the frame.
descriptionstring|nullnull Text under the label.
invalidbool|nullnull Force the error state. Unset follows wire:model errors.
chunkSizeint1 Upload chunk size in megabytes.