Added possibility for a custom upload function

README.md

@@ -156,6 +156,10 @@ easyMDE.value('New input for **EasyMDE**');
      - if the request was successfully processed (HTTP 200-OK): `{"data": {"filePath": "<filePath>"}}` where *filePath* is the relative path of the image;
      - otherwise: `{"error": "<errorCode>"}`, where *errorCode* can be `noFileGiven` (HTTP 400), `typeNotAllowed` (HTTP 415), `fileTooLarge` (HTTP 413) or `importError` (see *errorMessages* below). If *errorCode* is not one of the *errorMessages*, it is alerted unchanged to the user. This allows for server side error messages.
      No default value.
+- **imageUploadFunction**: A custom function for handling the image upload. Using this function will render the options `imageMaxSize`, `imageAccept`, `imageUploadEndpoint` and `imageCSRFToken` ineffective.
+    - The function gets the list of files as parameter.
+    - Calling the exposed `EasyMDE.afterImageUploaded` function with as parameters the editor and the url, will insert the correct markdown in the editor.
+    - Example: `function (files) { var url = upload(files[0]); EasyMDE.afterImageUploaded(editor, url); }`
 - **imageCSRFToken**: CSRF token to include with AJAX call to upload image. For instance used with Django backend. 
 - **imageTexts**: Texts displayed to the user (mainly on the status bar) for the import image feature, where `#image_name#`, `#image_size#` and `#image_max_size#` will replaced by their respective values, that can be used for customization or internationalization:
     - **sbInit**: Status message displayed initially if `uploadImage` is set to `true`. Defaults to `Attach files by drag and dropping or pasting from clipboard.`.

src/js/easymde.js

@@ -1640,11 +1640,19 @@ function EasyMDE(options) {
         this.codemirror.on('drop', function (cm, event) {
             event.stopPropagation();
             event.preventDefault();
-            self.uploadImages(event.dataTransfer.files);
+            if (options.imageUploadFunction) {
+                options.imageUploadFunction(event.dataTransfer.files);
+            } else {
+                self.uploadImages(event.dataTransfer.files);
+            }
         });
 
         this.codemirror.on('paste', function (cm, event) {
-            self.uploadImages(event.clipboardData.files);
+            if (options.imageUploadFunction) {
+                options.imageUploadFunction(event.clipboardData.files);
+            } else {
+                self.uploadImages(event.clipboardData.files);
+            }
         });
     }
 }
@@ -2390,6 +2398,7 @@ EasyMDE.redo = redo;
 EasyMDE.togglePreview = togglePreview;
 EasyMDE.toggleSideBySide = toggleSideBySide;
 EasyMDE.toggleFullScreen = toggleFullScreen;
+EasyMDE.afterImageUploaded = afterImageUploaded;
 
 /**
  * Bind instance methods for exports.

types/easymde-test.ts

@@ -1,4 +1,6 @@
 // Create new instance
+import EasyMDE = require('./easymde');
+
 const editor = new EasyMDE({
     autoDownloadFontAwesome: false,
     element: document.getElementById('mdEditor')!,
@@ -40,7 +42,7 @@ const editor2 = new EasyMDE({
         title: 'Bold',
     }, '|', { // Separator
         name: 'alert',
-        action: (editor) => {
+        action: (editor: EasyMDE) => {
             alert('This is from a custom button action!');
             // Custom functions have access to the `editor` instance.
         },
@@ -80,6 +82,33 @@ const editorImages = new EasyMDE({
         fileTooLarge: 'Image too big',
         importError: 'Something went oops!',
     },
+    errorCallback: (errorMessage: string) => {
+        console.error(errorMessage);
+    },
+});
+
+const editorImagesCustom = new EasyMDE({
+    uploadImage: true,
+    imageAccept: 'image/png, image/bmp',
+    imageCSRFToken: undefined,
+    imageMaxSize: 10485760,
+    imageUploadFunction: (files: FileList) => {
+        console.log(files)
+    },
+    imageTexts: {
+        sbInit: 'Drag & drop images!',
+        sbOnDragEnter: 'Let it go, let it go',
+        sbOnDrop: 'Uploading...',
+        sbProgress: 'Uploading... (#progress#)',
+        sbOnUploaded: 'Upload complete!',
+        sizeUnits: 'b,Kb,Mb'
+    },
+    errorMessages: {
+        noFileGiven: 'Please select a file',
+        typeNotAllowed: 'This file type is not allowed!',
+        fileTooLarge: 'Image too big',
+        importError: 'Something went oops!',
+    },
     errorCallback: (errorMessage) => {
         console.error(errorMessage);
     },

types/easymde.d.ts

@@ -135,6 +135,7 @@ declare namespace EasyMDE {
         imageMaxSize?: number;
         imageAccept?: string;
         imageUploadEndpoint?: string;
+        imageUploadFunction?: (files: FileList) => void;
         imageCSRFToken?: string;
         imageTexts?: ImageTextsOptions;
         errorMessages?: ImageErrorTextsOptions;