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 installphp artisan migrate --seedphp 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
filamentphp / filament
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
19.2k
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too