filament
filament copied to clipboard
filamentphp
RichEditor image upload fails in modals
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!
I get no errors with version 3.2.14. Could you maybe try upgrading and see if that fixes your issue?
@thethunderturner still no luck with v3.2.16 :cry:
https://github.com/filamentphp/filament/assets/8792274/96a9b86b-70b3-430e-9d38-2fce93162352
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.
Definitely not the same issue, please open a new one with a reproduction repository
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.
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
