Pagedown Editor insertimagedialog hook

Question

I've created my own insertImageDialog hook to allow uploading of files directly within the editor.

            $('div#insertImageDialog input[type=file]').ajaxfileupload({
                action: $file.attr('data-action'),
                onStart: function() {
                    $loader.show();
                },
                onComplete: function(response) {
                    $loader.hide();
                    if (response.success) {
                        callback(response.imagePath); // <---- oO
                        dialogClose();
                    } else {
                        alert(response.message);
                        $file.val('');
                    }
                }
            });

This works fine the first time I insert an image.

Every time after, it fails with the following exception:

Uncaught TypeError: Cannot call method 'removeChild' of null Markdown.Editor.js:1683 commandProto.doLinkOrImage.linkEnteredCallback Markdown.Editor.js:1683 self.initMarkdownEditor.editor.hooks.set.$.ajaxfileupload.onComplete

The uploading works fine outside of the editor so I can only think it is some kind of scoping issue with the callback.

Have been pulling my hair out over this for most of the day.

Answer 1

The issue was two fold

1. I didn't realize the hook gets called every time the user clicks the image button. This meant that I was actually setting up multiple "change" handlers for the file upload.
2. The upload plugin I was using expected the handler to be registered once (even if we clear it).

I've documented the full working solution on my blog.