#8 add CSRF

README.md

@@ -7,39 +7,40 @@ A module for Quill rich text editor to upload images to be selected from toolbar
 ### Webpack/ES6
 
 ```javascript
-import Quill from 'quill'
-import { ImageUpload } from 'quill-image-upload'
+import Quill from 'quill';
+import { ImageUpload } from 'quill-image-upload';
 
-Quill.register('modules/imageUpload', ImageUpload)
+Quill.register('modules/imageUpload', ImageUpload);
 
 const quill = new Quill(editor, {
-  // ...
-  modules: {
-    // ...
-    imageUpload: {
-      url: '', // server url. If the url is empty then the base64 returns
-      method: 'POST', // change query method, default 'POST'
-      name: 'image', // custom form name
-      withCredentials: false, // withCredentials
-      headers: {}, // add custom headers, example { token: 'your-token'}
-      customUploader: () => {}, // add custom uploader
-      // personalize successful callback and call next function to insert new url to the editor
-      callbackOK: (serverResponse, next) => {
-        next(serverResponse)
-      },
-      // personalize failed callback
-      callbackKO: serverError => {
-        alert(serverError)
-      },
-      // optional
-      // add callback when a image have been chosen
-      checkBeforeSend: (file, next) => {
-        console.log(file)
-        next(file) // go back to component and send to the server
-      }
-    }
-  }
-})
+	// ...
+	modules: {
+		// ...
+		imageUpload: {
+			url: '', // server url. If the url is empty then the base64 returns
+			method: 'POST', // change query method, default 'POST'
+			name: 'image', // custom form name
+			withCredentials: false, // withCredentials
+			headers: {}, // add custom headers, example { token: 'your-token'}
+			csrf: { token: 'token', hash: '' }, // add custom CSRF
+			customUploader: () => {}, // add custom uploader
+			// personalize successful callback and call next function to insert new url to the editor
+			callbackOK: (serverResponse, next) => {
+				next(serverResponse);
+			},
+			// personalize failed callback
+			callbackKO: serverError => {
+				alert(serverError);
+			},
+			// optional
+			// add callback when a image have been chosen
+			checkBeforeSend: (file, next) => {
+				console.log(file);
+				next(file); // go back to component and send to the server
+			}
+		}
+	}
+});
 ```
 
 ### Script Tag
@@ -52,24 +53,24 @@ Copy image-upload.min.js into your web root or include from node_modules
 
 ```javascript
 var quill = new Quill(editor, {
-  // ...
-  modules: {
-    // ...
-    imageUpload: {
-      url: '', // server url. If the url is empty then the base64 returns
-      method: 'POST', // change query method, default 'POST'
-      name: 'image', // custom form name
-      withCredentials: false, // withCredentials
-      headers: {}, // add custom headers, example { token: 'your-token'}
-      // personalize successful callback and call next function to insert new url to the editor
-      callbackOK: (serverResponse, next) => {
-        next(serverResponse)
-      },
-      // personalize failed callback
-      callbackKO: serverError => {
-        alert(serverError)
-      }
-    }
-  }
-})
+	// ...
+	modules: {
+		// ...
+		imageUpload: {
+			url: '', // server url. If the url is empty then the base64 returns
+			method: 'POST', // change query method, default 'POST'
+			name: 'image', // custom form name
+			withCredentials: false, // withCredentials
+			headers: {}, // add custom headers, example { token: 'your-token'}
+			// personalize successful callback and call next function to insert new url to the editor
+			callbackOK: (serverResponse, next) => {
+				next(serverResponse);
+			},
+			// personalize failed callback
+			callbackKO: serverError => {
+				alert(serverError);
+			}
+		}
+	}
+});
 ```

index.js

@@ -76,6 +76,12 @@ export class ImageUpload {
 				const fd = new FormData();
 
 				fd.append(name, file);
+
+				if (this.options.csrf) {
+					// add CSRF
+					fd.append(this.options.csrf.token, this.options.csrf.hash);
+				}
+
 				const xhr = new XMLHttpRequest();
 				// init http query
 				xhr.open(method, url, true);

src/image-upload.js

@@ -76,6 +76,12 @@ export class ImageUpload {
 				const fd = new FormData();
 
 				fd.append(name, file);
+
+				if (this.options.csrf) {
+					// add CSRF
+					fd.append(this.options.csrf.token, this.options.csrf.hash);
+				}
+
 				const xhr = new XMLHttpRequest();
 				// init http query
 				xhr.open(method, url, true);