RichEditor image upload fails in modals

fabio-ivona commented 5 months ago

Package

filament/forms

Package Version

v3.2.10

Laravel Version

v10.41.0

Livewire Version

v3.3.5

PHP Version

PHP 8.1, 8.2, 8.3

Problem description

When using a RichEditor inside a modal (eg. for a relation manager) the image upload feature doesn't work

it uploads the image to the backend but then alpine throws an exception:

Uncaught Could not find Livewire component in DOM tree

Expected behavior

the image preview should show up

Steps to reproduce

composer install
php artisan migrate --seed
php artisan serve
login in filament panel with default credentials
navigate in Pages and open Home in edit mode
inside the Content field's RichEditor add an image, it uploads without issues (just a minor issue because it doesn't get the :8000 port exposed by php artisan serve, so preview doesn't show)
open the Section inside the Sections Relation Manager, a modal will show up
inside the modal RichTextEditor uploads an image, it shows up and disappears immediately

an Uncaught Could not find Livewire component in DOM tree exception appears in the browser console

Reproduction repository

https://github.com/fabio-ivona/filament-image-upload-issue

Relevant log output

Browser console output

Uncaught Could not find Livewire component in DOM tree @ livewire.js?id=e2b302e9:4451
closestComponent @ livewire.js?id=e2b302e9:4451
get @ livewire.js?id=e2b302e9:4248
eval @ VM354:13
markUploadFinished @ livewire.js?id=e2b302e9:614
(anonymous) @ livewire.js?id=e2b302e9:521
(anonymous) @ livewire.js?id=e2b302e9:4493
dispatchEvent @ livewire.js?id=e2b302e9:4510
dispatchSelf @ livewire.js?id=e2b302e9:4483
(anonymous) @ livewire.js?id=e2b302e9:8836
dispatchEvents @ livewire.js?id=e2b302e9:8834
(anonymous) @ livewire.js?id=e2b302e9:8811
trigger @ livewire.js?id=e2b302e9:433
processEffects @ livewire.js?id=e2b302e9:4393
handleResponse @ livewire.js?id=e2b302e9:3990
(anonymous) @ livewire.js?id=e2b302e9:3925
succeed @ livewire.js?id=e2b302e9:3925
sendRequest @ livewire.js?id=e2b302e9:4177
await in sendRequest (async)
send @ livewire.js?id=e2b302e9:3910
(anonymous) @ livewire.js?id=e2b302e9:4054
createAndSendNewPool @ livewire.js?id=e2b302e9:4050
(anonymous) @ livewire.js?id=e2b302e9:4026
(anonymous) @ livewire.js?id=e2b302e9:4089
setTimeout (async)
bufferPoolingForFiveMs @ livewire.js?id=e2b302e9:4088
add @ livewire.js?id=e2b302e9:4023
requestCall @ livewire.js?id=e2b302e9:4105
(anonymous) @ livewire.js?id=e2b302e9:4336
(anonymous) @ livewire.js?id=e2b302e9:4275
(anonymous) @ livewire.js?id=e2b302e9:593
load (async)
makeRequest @ livewire.js?id=e2b302e9:590
handleSignedUrl @ livewire.js?id=e2b302e9:565
(anonymous) @ livewire.js?id=e2b302e9:515
(anonymous) @ livewire.js?id=e2b302e9:4493
dispatchEvent @ livewire.js?id=e2b302e9:4510
dispatchSelf @ livewire.js?id=e2b302e9:4483
(anonymous) @ livewire.js?id=e2b302e9:8836
dispatchEvents @ livewire.js?id=e2b302e9:8834
(anonymous) @ livewire.js?id=e2b302e9:8811
trigger @ livewire.js?id=e2b302e9:433
processEffects @ livewire.js?id=e2b302e9:4393
handleResponse @ livewire.js?id=e2b302e9:3990
(anonymous) @ livewire.js?id=e2b302e9:3925
succeed @ livewire.js?id=e2b302e9:3925
sendRequest @ livewire.js?id=e2b302e9:4177
await in sendRequest (async)
send @ livewire.js?id=e2b302e9:3910
(anonymous) @ livewire.js?id=e2b302e9:4054
createAndSendNewPool @ livewire.js?id=e2b302e9:4050
(anonymous) @ livewire.js?id=e2b302e9:4026
(anonymous) @ livewire.js?id=e2b302e9:4089
setTimeout (async)
bufferPoolingForFiveMs @ livewire.js?id=e2b302e9:4088
add @ livewire.js?id=e2b302e9:4023
requestCall @ livewire.js?id=e2b302e9:4105
(anonymous) @ livewire.js?id=e2b302e9:4336
(anonymous) @ livewire.js?id=e2b302e9:4275
startUpload @ livewire.js?id=e2b302e9:608
setUpload @ livewire.js?id=e2b302e9:553
upload @ livewire.js?id=e2b302e9:526
upload @ livewire.js?id=e2b302e9:670
(anonymous) @ livewire.js?id=e2b302e9:4306
eval @ VM354:8
[Alpine] 
                    if (! $event.attachment.file) return

                    let attachment = $event.attachment

                    $wire.upload(
                        `componentFileAttachments.mountedTableActionsData.0.content`,
                        attachment.file,
                        () => {
                            $wire
                                .getFormComponentFileAttachmentUrl('mountedTableActionsData.0.content')
                                .then((url) => {
                                    attachment.setAttributes({
                                        url: url,
                                        href: url,
                                    })
                                })
                        },
                    )
                 @ VM354:22
(anonymous) @ livewire.js?id=e2b302e9:1271
tryCatch @ livewire.js?id=e2b302e9:1191
(anonymous) @ livewire.js?id=e2b302e9:3779
handler4 @ livewire.js?id=e2b302e9:3114
(anonymous) @ livewire.js?id=e2b302e9:3179
(anonymous) @ livewire.js?id=e2b302e9:3116
triggerEvent @ rich-editor.js?v=3.2.10.0:2
notify @ rich-editor.js?v=3.2.10.0:143
i.notifyEditorElement @ rich-editor.js?v=3.2.10.0:92
i.compositionDidAddAttachment @ rich-editor.js?v=3.2.10.0:92
c.refreshAttachments @ rich-editor.js?v=3.2.10.0:86
c.setDocument @ rich-editor.js?v=3.2.10.0:85
c.insertText @ rich-editor.js?v=3.2.10.0:85
c.insertAttachments @ rich-editor.js?v=3.2.10.0:86
c.insertFiles @ rich-editor.js?v=3.2.10.0:86
b.insertFiles @ rich-editor.js?v=3.2.10.0:92
(anonymous) @ rich-editor.js?v=3.2.10.0:92
(anonymous) @ rich-editor.js?v=3.2.10.0:42

Donate 💰 to fund this issue

You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
100% of the funding will be distributed between the Filament core team to run all aspects of the project.
Thank you in advance for helping us make maintenance sustainable!

thethunderturner commented 5 months ago

I get no errors with version 3.2.14. Could you maybe try upgrading and see if that fixes your issue?

fabio-ivona commented 5 months ago

Will check tomorrow and will post an update here 👍

fabio-ivona commented 5 months ago

@thethunderturner still no luck with v3.2.16 :cry:

https://github.com/filamentphp/filament/assets/8792274/96a9b86b-70b3-430e-9d38-2fce93162352

R70YNS commented 5 months ago

I'm also seeing this error using v3.2.16 when trying to upload a CSV file via ImportAction.

Clicking within the "Upload a CSV file" dialog opens the select file window, but selecting an appropriate file results in "Could not find Livewire component in DOM tree" being console logged.

Strangely drag and drop works fine and processes the CSV as expected.

danharrin commented 5 months ago

Definitely not the same issue, please open a new one with a reproduction repository

R70YNS commented 5 months ago

Whilst creating the reproduction repo I noticed that <x-filament-actions::modals /> was being conditionally rendered, this was the cause of the issue and worked as expected when moved outside of the conditional statement.

I hope this helps. Good luck with above issue.

dmitry-udod commented 2 months ago

I tried to reproduce the bug using your repo but had no luck. I also noticed that you tried to upload a WEBP image. I uploaded it, and everything is working well.

Check the video bellow for more details

https://github.com/filamentphp/filament/assets/4639175/a978f326-8eb0-4d5b-a860-4d422f13c034

fabio-ivona commented 2 months ago

weird, I'll try again

what's your OS?

dmitry-udod commented 2 months ago

weird, I'll try again

what's your OS?

Ubuntu 22.04 and latest Chrome

filamentphp / filament