JODIT WYSIWYG editor 3.24.1 - how to call a function and get source filename after a base64 encoded image has been inserted

Question

I've got images inserting into the editor as base64 encoded images (uploader option insertImageAsBase64URI is set to true). However, I'd like to call a function after the image has been inserted and also read the source filename for the inserted image.

I'm new to the JODIT editor, it seems great so far, but I need to tweak it a bit and am not sure how to register an event callback for this, or if there is another/better way. Any help is appreciated!

Answer 1

I think the best solution is to fork JODIT in github and edit the code. For some reason, however, I have been unable to build the code on my mac laptop for at least a couple of reasons (missing file in node module, fixed, and a build error "TypeError: require(...) is not a function" that may indicate circular dependencies in node modules?). Anyway, I found a complete and limited "HACK" for my needs and that is to actually capture the filename when the file is added by attaching an "onchange" handler function to the JODIT instance's file input element. This works roughly as follows (I'm using jQuery):

var selectedFile = null;
function setSelectedFile(){
    $('.jodit').find('input[type="file"]').removeProp('multiple');
    $('.jodit').find('input[type="file"]').on('change', function(){ 
        var files = $(this).prop('files');
        selectedFile = files[0].name;
    });
});

$('.jodit').find('button[aria-label="Insert file"]').on('click',
    function(){
        setSelectedFile();
    }
);

I run something like this after the page has loaded. This works only for the "change" event (where you select a file directly) and I could not figure out how to read the filename after a file is "dropped". Dropping a file does not seem to trigger the "change" event in the file input element. If anyone knows how to get the filename of a dropped file for the JODIT editor I'd appreciate sharing. I will update this if I get around to fixing that.