diff --git a/README.md b/README.md index 671d3aa..ada380a 100644 --- a/README.md +++ b/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); + } + } + } +}); ``` diff --git a/image-upload.min.js b/image-upload.min.js index 0ae9ebe..e2249b5 100644 --- a/image-upload.min.js +++ b/image-upload.min.js @@ -1,5 +1,5 @@ (function () { var exports = {}; -"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function e(e,t){for(var a=0;a1&&arguments[1]!==undefined?arguments[1]:{};_classCallCheck(this,e);this.quill=t;this.options=a;this.quill.getModule("toolbar").addHandler("image",this.selectLocalImage.bind(this))}_createClass(e,[{key:"selectLocalImage",value:function e(){var t=this;var a=document.createElement("input");a.setAttribute("type","file");a.click();a.onchange=function(){var e=a.files[0];if(/^image\//.test(e.type)){var n=t.options.checkBeforeSend||t.checkBeforeSend.bind(t);n(e,t.sendToServer.bind(t))}else{console.warn("You could only upload images.")}}}},{key:"checkBeforeSend",value:function e(t,a){a(t)}},{key:"sendToServer",value:function e(t){var a=this;if(this.options.customUploader){this.options.customUploader(t,function(e){a.insert(e)})}else{var n=this.options.url,i=this.options.method||"POST",s=this.options.name||"image",o=this.options.headers||{},l=this.options.callbackOK||this.uploadImageCallbackOK.bind(this),r=this.options.callbackKO||this.uploadImageCallbackKO.bind(this);if(n){var u=new FormData;u.append(s,t);var c=new XMLHttpRequest;c.open(i,n,true);for(var d in o){c.setRequestHeader(d,o[d])}c.onload=function(){if(c.status===200){l(JSON.parse(c.responseText),a.insert.bind(a))}else{r({code:c.status,type:c.statusText,body:c.responseText})}};if(this.options.withCredentials){c.withCredentials=true}c.send(u)}else{var f=new FileReader;f.onload=function(e){l(e.target.result,a.insert.bind(a))};f.readAsDataURL(t)}}}},{key:"insert",value:function e(t){var a=(this.quill.getSelection()||{}).index||this.quill.getLength();this.quill.insertEmbed(a,"image",t,"user")}},{key:"uploadImageCallbackOK",value:function e(t,a){a(t)}},{key:"uploadImageCallbackKO",value:function e(t){alert(t)}}]);return e}(); +"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function e(e,t){for(var i=0;i1&&arguments[1]!==undefined?arguments[1]:{};_classCallCheck(this,e);this.quill=t;this.options=i;this.quill.getModule("toolbar").addHandler("image",this.selectLocalImage.bind(this))}_createClass(e,[{key:"selectLocalImage",value:function e(){var t=this;var i=document.createElement("input");i.setAttribute("type","file");i.click();i.onchange=function(){var e=i.files[0];if(/^image\//.test(e.type)){var n=t.options.checkBeforeSend||t.checkBeforeSend.bind(t);n(e,t.sendToServer.bind(t))}else{console.warn("You could only upload images.")}}}},{key:"checkBeforeSend",value:function e(t,i){i(t)}},{key:"sendToServer",value:function e(t){var i=this;if(this.options.customUploader){this.options.customUploader(t,function(e){i.insert(e)})}else{var n=this.options.url,a=this.options.method||"POST",s=this.options.name||"image",o=this.options.headers||{},l=this.options.callbackOK||this.uploadImageCallbackOK.bind(this),r=this.options.callbackKO||this.uploadImageCallbackKO.bind(this);if(n){var u=new FormData;u.append(s,t);if(this.options.csrf){u.append(this.options.csrf.token,this.options.csrf.hash)}var c=new XMLHttpRequest;c.open(a,n,true);for(var d in o){c.setRequestHeader(d,o[d])}c.onload=function(){if(c.status===200){l(JSON.parse(c.responseText),i.insert.bind(i))}else{r({code:c.status,type:c.statusText,body:c.responseText})}};if(this.options.withCredentials){c.withCredentials=true}c.send(u)}else{var f=new FileReader;f.onload=function(e){l(e.target.result,i.insert.bind(i))};f.readAsDataURL(t)}}}},{key:"insert",value:function e(t){var i=(this.quill.getSelection()||{}).index||this.quill.getLength();this.quill.insertEmbed(i,"image",t,"user")}},{key:"uploadImageCallbackOK",value:function e(t,i){i(t)}},{key:"uploadImageCallbackKO",value:function e(t){alert(t)}}]);return e}(); window.Quill.register('modules/imageUpload', exports.ImageUpload); })(); \ No newline at end of file diff --git a/index.js b/index.js index bae4706..610194d 100644 --- a/index.js +++ b/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); diff --git a/src/image-upload.js b/src/image-upload.js index bae4706..610194d 100644 --- a/src/image-upload.js +++ b/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);