I’m trying to get image uploads to work in a text editor. I’m working with a text editor which incorporates a lot of jQuery plugins for things like tables and file uploads. I have two files, my TextEditorHook.js
which imports a imageUploadPlugin.js
. Because of the way the text editor is setup all of the logic for attaching/inserting images has to happen inside the imageUploadPlugin.js
. I’m able to get a pushEvent
working, sending the contents of a file to the LiveView but I can’t seem to get handleEvent
to get the results back. In both cases I’m assigning each to a constant and passing them to the editor object when I instantiate it. This approach seems to work for pushEvent
but not handleEvent
.
TextEditorHook.js
const TextEditorHook = {
mounted() {
const handleEvent = this.handleEvent.bind(this)
const pushEvent = this.pushEvent.bind(this)
$(this.el).trumbowyg({
...
plugins: {
upload: {
pushEvent: pushEvent,
handler: handleEvent
}
...
imageUploadPlugin.js
#this is what is not working, I would expect this to log the data to the console but it does not
t.plugins.upload.handler('success', ({ file }) =>
console.log(file)
)
const uploadFile = (file, pushEvent) => {
const reader = new FileReader()
reader.onload = (evt) =>
pushEvent('upload_content', {
filename: file.name,
content: evt.target.result
})
uploadFile(file, t.plugins.upload.pushEvent)
edit.ex
...
socket
|> push_event("success", %{successfile: url})
|> noreply()
To recap, I’m able to get the file content and upload the file but I can’t push the success event to the Javascript file to update the text editor with the uploaded image. Am I going about this the wrong way by passing the handleEvent
from the hook to the text editor object?