Attachment

Displays a file or image attachment with media, metadata, state, and actions.

project-brief.pdf

PDF · 2.4 MB

design-assets.zip

Uploading · 64%

Component Code 
<april:attachment-group class="max-w-xl">
    <april:attachment class="min-w-[280px]" state="done">
        <slot:media><x-lucide-file-text class="text-muted-foreground" /></slot:media>
        <slot:content>
            <p class="truncate font-medium">project-brief.pdf</p>
            <p class="text-sm text-muted-foreground">PDF · 2.4 MB</p>
        </slot:content>
        <slot:actions>
            <april:attachment-action aria-label="Remove project brief">
                <x-lucide-x class="size-4" />
            </april:attachment-action>
        </slot:actions>
    </april:attachment>
    <april:attachment class="min-w-[280px]" state="uploading">
        <slot:media><x-lucide-file-up class="text-muted-foreground" /></slot:media>
        <slot:content>
            <p class="truncate font-medium">design-assets.zip</p>
            <p class="text-sm text-muted-foreground">Uploading · 64%</p>
        </slot:content>
    </april:attachment>
</april:attachment-group>

Use named slots for the attachment media, content, and actions. Use attachment-action for each repeatable action and attachment-group when displaying multiple attachments.

<april:attachment state="done">
    <slot:media><x-lucide-file-text /></slot:media>
    <slot:content>
        <p class="font-medium">report.pdf</p>
        <p class="text-sm text-muted-foreground">PDF · 2.4 MB</p>
    </slot:content>
    <slot:actions>
        <april:attachment-action aria-label="Remove report">
            <x-lucide-x />
        </april:attachment-action>
    </slot:actions>
</april:attachment>

Supported states are done, uploading, processing, and error. Set orientation="vertical" to stack the media above the metadata.

Publishing Views

Use the following commands to publish these views:

php artisan april:publish attachment
php artisan april:publish attachment-action
php artisan april:publish attachment-group
April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run: 
php artisan april:publish --all
Review local overrides after an upgrade with `php artisan april:update --diff`.