Customizing the Image Insert Dialog in Pagedown Editor

I've developed a custom insertImageDialog hook to enable file uploads 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('');
                    }
                }
            });

Initially, this functionality works as expected when inserting an image.

However, subsequent attempts result in an error:

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

File uploading functions correctly outside the editor, suggesting a potential scoping issue with the callback function.

This problem has been causing frustration throughout the day.

Answer №1

The problem had two aspects to it

  1. It didn't occur to me that the hook was being triggered every time the user clicked the image button. This resulted in setting up multiple "change" handlers for the file upload.
  2. The upload plugin I was utilizing required the handler to be set up only once, even if it was cleared.

You can find the complete solution on my personal blog.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing my JavaScript/jQuery code to malfunction when dealing with checkboxes?

My code is supposed to select and disable checkboxes based on which radio button is clicked. For example, when Zero is selected, all checkboxes should be highlighted and disabled, except for the zeroth checkbox. However, this behavior does not consistent ...

Instructions for rearranging the configuration of a 2D array?

A 2-dimensional array is created from a string called matrix: 131 673 234 103 018 201 096 342 965 150 630 803 746 422 111 537 699 497 121 956 805 732 524 037 331 After parsing, it becomes an array of arrays like this: [ [131, 673, 234, 103, 018], [2 ...

Converting an HTMLElement to a Node in Typescript

Is there a method to transform an HTMLElement into a Node element? As indicated in this response (), an Element is one specific type of node... However, I am unable to locate a process for conversion. I specifically require a Node element in order to inp ...

Retrieve the currently logged-in user whenever the component is rendered using React's Context API

For my small React project, I am utilizing ContextAPI. Whenever I hit the /login endpoint, I store the user's token using an HttpOnly Cookie. Below is the code for UserContext.js, which encapsulates all components (children) within App.js import axio ...

Is there a way to programmatically simulate clicking on the "Cancel search" button?

I have a text input field with type "search". In order to perform UI testing, I need to simulate clicking on the "cancel search" button: https://i.sstatic.net/ahcwQ.png The code for this specific input field is as follows: <input type="search" value= ...

The mesh takes on a more defined geometric shape once it has been processed using ThreeCSG

When I use ThreeCSG to subtract one mesh from another, I encounter a problem. The main mesh is a ring and the mesh to subtract is a diamond. Initially, the scene looks fine: Mesh fine. However, after subtracting the meshes, the ring become angular: Mesh Br ...

Issue with file upload: The view is not refreshing in response to non-angular events

I am having an issue with my upload component where the view is not updating when the onchange event fires. Even though I can see the file names being logged, nothing is happening on the screen. My approach involves using a directive so that I can easily ...

Having troubles with the xml2json jQuery plugin's functionality?

I've implemented the jQuery XML to JSON Plugin by Fyneworks.com. Any idea why my code isn't functioning as expected? index.html <!DOCTYPE html> <html> <head> <script src="build/jquery.xml2json.js"></script> <sc ...

What could be the reason for the malfunction of jQuery's show() function?

Using jQuery, I have implemented a functionality to hide a div using the hide() method. However, upon clicking a link, the div is supposed to show but unexpectedly disappears after appearing briefly. HTML Code Snippet <div id="introContent"> & ...

Tips for uploading files in filepicker with protractor

https://i.sstatic.net/noq46.png Here's a snippet of HTML code you might find useful: <input type="file" class="fileUploadInput" name="fileUpload" id="fileUploadInput" accept="application/msword,application/pdf,text/plain,application/rtf,applicat ...

Suggestions for this screenplay

I am completely new to the world of coding and computer languages, and I could use some guidance on how to utilize this script for a flash sale. setInterval(function() { var m = Math.floor((new Date).getTime()/1000); if(m == '1476693000000& ...

How to activate an event using a Bootstrap switch in VueJS 2

Dealing with a bootstrap switch has been quite interesting. In JQuery, managing it is simple, just follow the documentation: $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) { console.log( ...

On production, Heroku fails to load JavaScript files, only allowing CSS files to be loaded. However, the files load successfully when

I've been struggling to find a solution to my problem, so I'm reaching out for some help. I am in the process of deploying my node (express) app to Heroku, but I've encountered an issue where only CSS files from my public folder are being t ...

React video recording not displaying in the video element

I'm currently developing a React application that facilitates webcam interviews with candidates. As part of this process, candidates have the option to "Start Again" or "Complete" their interviews. One challenge I am facing is displaying the recorded ...

Can you explain the significance of "mongodb is not a function"?

As a novice in the world of programming, I am currently diving into a web development course. However, I encountered an error while trying to connect to a database I created. The error message states that "mongodb.connect is not a function." Below is the ...

The not-found.js file in Next.js is displaying an empty page rather than showing a 404 error message

My current project involves using Next.js v13.4.19 with the app router mode. However, I seem to be facing an issue with the not-found.js page located in the app folder. Whenever a non-existing route is accessed, it does not render a 404 page as expected. ...

Angular EventEmitter coupled with Callbacks

In order to create a custom button component for my angular application and implement a method for click functionality, I have the following code snippet: export class MyButtonComponent { @Input() active: boolean = false; @Output() btnClick: EventEmit ...

Add the AJAX response to the dropdown menu options

Currently in my project, I am utilizing Laravel as a backend. The scenario is such that once the corresponding page loads, it triggers an ajax request to fetch vehicle data which consists of vehicle model and plate number properties. My aim is to display t ...

What could be causing NgModel to fail with mat-checkbox and radio buttons in Angular?

I am working with an array of booleans representing week days to determine which day is selected: selectedWeekDays: boolean[] = [true,true,true,true,true,true]; In my HTML file: <section> <h4>Choose your days:</h4> <mat-che ...

D3.js is providing inaccurate tick numbers

Even though I specify that I want 3 ticks, I end up with 4 in my d3 js code The y-axis values I am working with are [2, 1, 3, 2, 4, 4, 6] svg .select(`[data-labels-y]`) .call(d3.axisLeft().scale(yScale).ticks(3).tickPadding(4))` My expected tick valu ...