From 29d145a9b135071d36881163938ec61b3be1ae1e Mon Sep 17 00:00:00 2001
From: Jeroen van Oorschot <j.j.v.oorschot@student.tue.nl>
Date: Mon, 15 Jul 2019 21:39:49 +0200
Subject: [PATCH] Add option for CSRF token on AJAX image upload

---
 CHANGELOG.md      | 1 +
 README.md         | 1 +
 src/js/easymde.js | 7 +++++--
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f02302e..1775105 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - replace MouseEvent(click) with .click() for IE compat
 - Fix status bar update when dragging but not dropping
 - Fix progressbar
+- Add option for CSRF token to include in AJAX call for imageupload
 
 ## [2.7.0] - 2019-07-13
 ### Added
diff --git a/README.md b/README.md
index 227fe78..1b0b853 100644
--- a/README.md
+++ b/README.md
@@ -155,6 +155,7 @@ easyMDE.value('New input for **EasyMDE**');
 - **imageUploadEndpoint**: The endpoint where the images data will be sent, via an asynchronous *POST* request. The server is supposed to save this image, and return a json response.
      - 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). No default value.
+- **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.`.
     - **sbOnDragEnter**: Status message displayed when the user drags a file to the text area. Defaults to `Drop image to upload it.`.
diff --git a/src/js/easymde.js b/src/js/easymde.js
index 2576221..f2a210f 100644
--- a/src/js/easymde.js
+++ b/src/js/easymde.js
@@ -1995,8 +1995,12 @@ EasyMDE.prototype.uploadImage = function(file, onSuccess, onError) {
 
     var formData = new FormData();
     formData.append('image', file);
+
+    // insert CSRF token if provided in config.
+    if(self.options.imageCSRFToken){
+        formData.append('csrfmiddlewaretoken', self.options.imageCSRFToken);
+    }
     var request = new XMLHttpRequest();
-    // TODO insert csrf token in post ajax request
     request.upload.onprogress = function (event) {
         if (event.lengthComputable) {
             var progress = '' + Math.round((event.loaded * 100) / event.total);
@@ -2005,7 +2009,6 @@ EasyMDE.prototype.uploadImage = function(file, onSuccess, onError) {
     };
     request.open('POST', this.options.imageUploadEndpoint);
 
-
     request.onload = function () {
         try {
             var response = JSON.parse(this.responseText);