Dropzone

component

File uploads with Symfony UX Dropzone, styled with the kit's theme: drag and drop or browse, a preview of the picked image, several files that add up across picks.

Install

php bin/console ux:install dropzone \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: assets/ → assets/
templates/ → templates/
Recipes: form-theme turbo
Composer: symfony/ux-dropzone:^3.5
symfony/ux-icons
symfony/ux-twig-component:^3.5
twig/html-extra:^3.24.0
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (6)

Default

Light

Dark

Code

<div class="w-full max-w-md">
    <twig:FormField for="dropzone-default" label="Profile picture">
        <twig:Dropzone id="dropzone-default" name="photo" />
    </twig:FormField>
</div>

Hint and accepted types

Light

Dark

Code

<div class="w-full max-w-md">
    <twig:FormField for="dropzone-hint" label="Cover image">
        <twig:Dropzone id="dropzone-hint" name="cover" accept="image/png,image/jpeg" placeholder="Drop an image or browse" hint="PNG or JPG, up to 2 MB" />
    </twig:FormField>
</div>

Multiple files

Light

Dark

Code

<div class="w-full max-w-md">
    <twig:FormField for="dropzone-multiple" label="Attachments">
        <twig:Dropzone id="dropzone-multiple" name="attachments[]" multiple hint="Up to 3 files" />
    </twig:FormField>
</div>

Invalid

Light

Dark

Code

<div class="w-full max-w-md">
    <twig:FormField for="dropzone-invalid" label="Profile picture" help="PNG or JPG, up to 1 MB." error="The file is too large (1.5 MB). The maximum allowed size is 1 MB.">
        <twig:Dropzone id="dropzone-invalid" name="photo" accept="image/png,image/jpeg" aria-invalid="true" aria-describedby="dropzone-invalid_help dropzone-invalid_error" />
    </twig:FormField>
</div>

Disabled

Light

Dark

Code

<div class="w-full max-w-md">
    <twig:FormField for="dropzone-disabled" label="Contract">
        <twig:Dropzone id="dropzone-disabled" name="contract" disabled hint="Uploads are closed" />
    </twig:FormField>
</div>

Custom content

Light

Dark

Code

<div class="w-full max-w-md">
    <twig:FormField for="dropzone-custom" label="Invoice">
        <twig:Dropzone id="dropzone-custom" name="invoice" accept="application/pdf" hint="PDF only">
            <twig:ux:icon name="flowbite:paper-clip-outline" class="size-8 text-body" aria-hidden="true" />
            <p class="text-sm text-body"><span class="font-semibold text-heading">Click to upload</span> or drag and drop</p>
        </twig:Dropzone>
    </twig:FormField>
</div>