Hook for FileUpload field when file removed? (X Clicked to remove)

I have the following field:

FileUpload::make('logo')
    ->disk('tenant_logos')
    ->afterStateUpdated(function ($state) {
        // Do stuff here...
    })
    ->maxSize(12288)
    ->visibility('public')
    ->image()
    ->imageEditor(),

FileUpload::make('logo')
    ->disk('tenant_logos')
    ->afterStateUpdated(function ($state) {
        // Do stuff here...
    })
    ->maxSize(12288)
    ->visibility('public')
    ->image()
    ->imageEditor(),

It works when expected when uploading an image as ->afterStateUpdated() is fired, however when I click the (X) to remove the photo the ->afterStateUpdated() does not fire. Is there something I'm missing, or is there another hook I can use to run code when the image/upload is removed?

12 Replies

awcodes•2mo ago

What do you need to run? Until the form is saved it won’t be moved to permanent storage. And the tmp storage in livewire is garbage collected every 24 hours.

CGM•2mo ago

I'm trying to apply 'live' branding to a page so a user can see their edits in real time. When the image is removed I want to fire an event that re-sets a 'base/default' image immedatly so they can see what their settings current look like.

awcodes•2mo ago

Ie, // do stuff here matters. 😆

CGM•2mo ago

Lol, indeed. Here is what I have for the 'adding the image' part. 🙂

$this->dispatch('applyThemeHeader', [
    'logo' => $state->temporaryUrl(),
    'location' => $this->locationId
]);

$this->dispatch('applyThemeHeader', [
    'logo' => $state->temporaryUrl(),
    'location' => $this->locationId
]);

That works exactly as intended. 🙂 It's when the image is removed, I cant get the afterStateUpdated() to fire. I've tried dd/dump to see if it was my dispatch stuff, but nothing fires.

awcodes•2mo ago

Ok, so you’ll need something custom for that to allow for serving at least a blob since the tep directly isn’t publicly accessible.

CGM•2mo ago

Really all i need is a place to put code when the X is clicked. lol. before saving that is.

awcodes•2mo ago

I don’t think removing an item will triggering a Lw update in this context since the state at that point is managed on the alpine side.

CGM•2mo ago

Is it possible filepond has JS hooks that are fired when that x is clicked to remove the image? That could get me moving in the right direction I suppose.

awcodes•2mo ago

I don’t think so, but dive the code.

CGM•2mo ago

Will do. I think I have a path forward. 🙂 Thank you @awcodes ! Found it!

<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.addEventListener('FilePond:removefile', function(event) {
            console.log('Event fired:', event.type);
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.addEventListener('FilePond:removefile', function(event) {
            console.log('Event fired:', event.type);
        });
    });
</script>

Thanks again for your help!

gds•2mo ago

Hi @CGM, I'm new to filament and wanted also to get the state when the image upload starts to disable some action buttons. Unfortunately, beforeStateUpdated is not supported by FileUpload component. Perhaps, I could use your solution, but I'm not sure how can I integrate that script. Thanks upfront! ok, found out, I had to add into my AppServiceProvider.php:

     public function boot(): void
    {
        ...
        FilamentView::registerRenderHook(
            PanelsRenderHook::BODY_END,
            fn (): string => view('filament.forms.components.file-upload-hooks')->render()
        );
    }

     public function boot(): void
    {
        ...
        FilamentView::registerRenderHook(
            PanelsRenderHook::BODY_END,
            fn (): string => view('filament.forms.components.file-upload-hooks')->render()
        );
    }

And store script into my resources accordingly. Now need to figure out which events I need 🙂

CGM•2mo ago

@gds That's great! Here is where I found the event I needed. https://pqina.nl/filepond/docs/api/instance/events/

Easy File Uploading With JavaScript | FilePond

A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

Gaming

Programming

Hook for FileUpload field when file removed? (X Clicked to remove)