RichEditor image upload fails in modals

[fabio-ivona]

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]

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

[fabio-ivona]

Will check tomorrow and will post an update here 👍

[fabio-ivona]

@thethunderturner still no luck with v3.2.16 😢

Peek.28-01-2024.09-34.mp4

[R70YNS]

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]

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

[R70YNS]

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]

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

Screencast.2024-04-12.09.33.41.mp4

[fabio-ivona]

weird, I'll try again

what's your OS?

[dmitry-udod]

weird, I'll try again

what's your OS?

Ubuntu 22.04 and latest Chrome

[aquib20034]

Please try to change your .env APP_URL.
In my case, it worked.

[DmitryAdam]

Please try to change your .env APP_URL. In my case, it worked.

Change to what?

[aquib20034]

In Itemsresource.php

in .env file

[zepfietje]

Might this be the same issue as #14394?