LiveView handleEvent hook

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.


const TextEditorHook = {
  mounted() {
    const handleEvent = this.handleEvent.bind(this)
    const pushEvent = this.pushEvent.bind(this)

      plugins: {
        upload: {
          pushEvent: pushEvent,
          handler: handleEvent


 #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 }) =>

const uploadFile = (file, pushEvent) => {
  const reader = new FileReader()
  reader.onload = (evt) =>
    pushEvent('upload_content', {

 uploadFile(file, t.plugins.upload.pushEvent)


|> 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?

Answering my own question for posterity:

Yes you can pass handle events to external scripts and callbacks. Something like:
const handleEvent = this.handleEvent.bind(this)
Then in the exteral script:

handleEvent('success', (res) =>

Works very well. There were several issues here that I encountered which needed to be fixed:

  1. Making sure that the content to be uploaded was properly chunked and uploaded to the server.
  2. Making sure that the assigns were correct
  3. Making sure that the JavaScript reader object was able to finish its work and return