How to implement image upload to the PageDown markdown editor?

ajax, form-data, pagedown

Solution

This article provide a useful method,

editor.hooks.set("insertImageDialog", function (callback) {
 var $input = $('<input type="file" name="File" id="file_0" class = "fileUpload"/>');
 var $okButton = $('<a class="okButton">'+uploadOK()+'</a>');
 $okButton.click(function(){
        var data = new FormData();
        var file = $input[0].files[0];
       if (file === undefined || null === file) {
          // alert("error message);
       } else {
         data.append('file',  file);
        $.ajax({
            url: 'uploadFile',
            data: data,
            dataType : 'json',
            processData: false,
            contentType: false,
            type: 'POST',
            success: function ( data ) {
                  callback(data.dataObject.url);
            },
            error : function(data){
                  // error
            }
        });    
      }
    }); )

Problem

To implement image upload to the PageDown markdown editor, I have modified some code about the editor. Markdown.Editor.js var defaultsStrings = { imagedialog : "< input id='image' type='file' />" } When select a picture and then click ok button to sent ajax request. It can return image path. ``` var okButton = doc.createElement("input"); okButton.type = "button"; okButton.onclick = function () { var data = new FormData(); data.append('file', $( '#image' )[0].files[0] ); $.ajax({ url: 'uploadFile', data: data, processData: false, contentType: false, type: 'POST', success: function ( data ) { alert(path); } }); return close(false);}; ``` How to preview the image in the editor preview area?

Original source