Netsyms/easy-markdown-editor
2
0
Fork 0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-07-06 01:24:28 -06:00
Code Issues Releases Wiki Activity

Add option for CSRF token on AJAX image upload

Browse Source
This commit is contained in:
Jeroen van Oorschot 2019-07-15 21:39:49 +02:00
parent c54168a656
commit 29d145a9b1
3 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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 - replace MouseEvent(click) with .click() for IE compat
- Fix status bar update when dragging but not dropping - Fix status bar update when dragging but not dropping
- Fix progressbar - Fix progressbar
- Add option for CSRF token to include in AJAX call for imageupload
## [2.7.0] - 2019-07-13 ## [2.7.0] - 2019-07-13
### Added ### Added

1
README.md
View File

@ -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. - **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; - 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. - 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: - **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.`. - **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.`. - **sbOnDragEnter**: Status message displayed when the user drags a file to the text area. Defaults to `Drop image to upload it.`.

7
src/js/easymde.js
View File

@ -1995,8 +1995,12 @@ EasyMDE.prototype.uploadImage = function(file, onSuccess, onError) {
var formData = new FormData(); var formData = new FormData();
formData.append('image', file); 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(); var request = new XMLHttpRequest();
// TODO insert csrf token in post ajax request
request.upload.onprogress = function (event) { request.upload.onprogress = function (event) {
if (event.lengthComputable) { if (event.lengthComputable) {
var progress = '' + Math.round((event.loaded * 100) / event.total); 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.open('POST', this.options.imageUploadEndpoint);
request.onload = function () { request.onload = function () {
try { try {
var response = JSON.parse(this.responseText); var response = JSON.parse(this.responseText);