Filament FileUpload dialog access cancel button

To access and customize the behavior of the cancel button in a Filament FileUpload dialog, you can use JavaScript to listen for the event when the cancel button is clicked. Filament's FileUpload component is built on top of Livewire, so you can leverage Livewire's hooks and JavaScript events to achieve this.

Here's a general approach to handle the cancel action:

1. Identify the Cancel Button: First, you need to identify the cancel button in the FileUpload dialog. This might require inspecting the HTML structure of the dialog to find the appropriate class or ID.

2. Add a JavaScript Event Listener: Once you have identified the cancel button, you can add a JavaScript event listener to it. You can do this by using Livewire's hook or by directly using JavaScript.

3. Trigger a Custom Action: When the cancel button is clicked, you can trigger a custom action, such as calling a Livewire method or executing some JavaScript logic.

Here's a basic example of how you might implement this:

document.addEventListener('livewire:load', function () {
    // Assuming the cancel button has a class 'file-upload-cancel'
    document.querySelectorAll('.file-upload-cancel').forEach(button => {
        button.addEventListener('click', function () {
            // Your custom action here
            console.log('File upload canceled');
            
            // Optionally, call a Livewire method
            Livewire.emit('fileUploadCanceled');
        });
    });
});

Note: The class .file-upload-cancel is hypothetical. You will need to inspect the FileUpload dialog to find the actual class or ID used for the cancel button.

4. Handle the Event in Livewire: If you want to handle the cancel action in your Livewire component, you can listen for the fileUploadCanceled event:

class YourComponent extends \Livewire\Component
{
    protected $listeners = ['fileUploadCanceled' => 'handleFileUploadCanceled'];

    public function handleFileUploadCanceled()
    {
        // Your custom logic when the file upload is canceled
        session()->flash('message', 'File upload was canceled.');
    }
}

This setup allows you to execute custom logic both on the client side (JavaScript) and server side (Livewire) when the cancel button is clicked in the FileUpload dialog. Adjust the selectors and logic according to your specific implementation and requirements.