customization.md

title	Customization
order	6

Customization

Themes

Publish themes:

php artisan vendor:publish --tag=livewire-upload-handler:themes

CSS Classes Theme

Default: bootstrap-5

Create custom theme in resources/vendor/livewire-upload-handler/themes/css-classes/my-theme.php:

<?php

return [
    'add_button' => 'btn btn-sm btn-outline-primary',
    'replace_button' => 'btn btn-sm btn-outline-primary',
    'delete_button' => 'btn btn-sm btn-outline-danger',
    'undelete_button' => 'btn btn-sm btn-outline-success',
    'cancel_button' => 'btn btn-sm btn-outline-secondary',
    'cancel_upload_button' => 'btn btn-link',
    'actions_group' => 'btn-group',
    'download_link' => 'icon-link',
    'max_files_number_warning' => 'text-warning',
    'missing_file_warning' => 'text-danger small',
    'temporary_file_warning' => 'text-secondary small',
    'error' => 'text-danger lh-1 mt-2',
];

Set in config:

'theme' => 'my-theme',

Or per component:

<livewire:upload-handler.item theme="my-theme" />

Icons Theme

Default: fontawesome-7

Create custom theme in resources/vendor/livewire-upload-handler/themes/icons/my-icons.php:

<?php

return [
    'add' => '<svg>...</svg>',
    'replace' => '<svg>...</svg>',
    'delete' => '<svg>...</svg>',
    'undelete' => '<svg>...</svg>',
    'cancel' => '<svg>...</svg>',
    'cancel_upload' => '<svg>...</svg>',
    'download' => '<svg>...</svg>',
    'sort' => '<svg>...</svg>',
];

Set in config or per component:

<livewire:upload-handler.item iconsTheme="my-icons" />

Views

Publish views:

php artisan vendor:publish --tag=livewire-upload-handler:views

Modify in resources/views/vendor/livewire-upload-handler/:

• group.blade.php - Group component
• group/actions/* - Actions buttons for group
• group/warnings/* - Warnings messages for group
• item.blade.php - Item component
• item/actions/* - Actions buttons for item
• item/warnings/* - Warnings messages for item
• item/filename.blade.php - File name with download link
• item/uploading.blade.php - Uploading file info and progress bar
• errors.blade.php - Validation errors
• components/ - View components, eg. dropzone

Custom Progress View

Override per theme in resources/views/vendor/livewire-upload-handler/themes/my-theme/progress.blade.php.

Translations

Publish translations:

php artisan vendor:publish --tag=livewire-upload-handler:translations

Modify in lang/vendor/livewire-upload-handler/{locale}/:

• actions.php - Button labels
• errors.php - Error messages
• messages.php - Info messages

Add new language:

// lang/vendor/livewire-upload-handler/es/actions.php
return [
    'add' => 'Anadir',
    'replace' => 'Reemplazar',
    'delete' => 'Eliminar',
    'undelete' => 'Deshacer',
    'cancel' => 'Cancelar',
];

Custom Dropzone

<x-livewire-upload-handler-dropzone
    class="border-2 border-dashed rounded p-4"
    overlay-class="bg-secondary opacity-25"
>
    <!-- Content wrapped in dropzone -->
</x-livewire-upload-handler-dropzone>

Next Steps

• Advanced Usage - Extend components