Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pagedown Editor insertimagedialog hook

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.

like image 508
Ben Foster Avatar asked Nov 04 '22 23:11

Ben Foster


1 Answers

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.

like image 95
Ben Foster Avatar answered Nov 11 '22 05:11

Ben Foster