diff --git a/src/js/easymde.js b/src/js/easymde.js
index ee3d51f..436c2cf 100644
--- a/src/js/easymde.js
+++ b/src/js/easymde.js
@@ -187,35 +187,6 @@ function createTooltip(title, action, shortcuts) {
return tooltip;
}
-/**
- * Create the input element (ie. ) used to open the
- * browse-file window in order to allow the user to select an image to be
- * imported to the server. Used among with the 'import-image' icon.
- * @param editor {Object} the EasyMDE object
- * @returns Node The created input DOM element.
- */
-function createImageInput(editor) {
- var imageInput = document.createElement('input');
- imageInput.className = 'imageInput';
- imageInput.type = 'file';
- imageInput.multiple = true;
- imageInput.name = 'image';
- imageInput.accept = editor.options.imageAccept;
- imageInput.style.display = 'none';
- imageInput.style.opacity = 0;
- imageInput.addEventListener('change', function(event) {
- for(var i=0; i= editor.options.imageMaxSize) {
- var units = editor.options.imageTexts.sizeUnits.split(',');
- alert(editor.options.imageTexts.errorImageTooBig
- .replace('#image_name#', file.name)
- .replace('#image_size#', humanFileSize(file.size, units))
- .replace('#image_max_size#', humanFileSize(editor.options.imageMaxSize, units))
- );
- return;
- }
-
- var formData = new FormData();
- formData.append('image', file);
- var request = new XMLHttpRequest();
- request.open('POST', editor.options.imageUploadEndpoint);
- request.send(formData);
-
- request.onprogress = function (event) {
- if (event.lengthComputable) {
- // TODO: test with a big image on a remote web server
- var progress = Math.round((event.loaded * 100) / event.total);
- editor.updateStatusBar('upload-image', editor.options.imageTexts.sbProgress.replace('#file_name#', file.name).replace('#progress#', progress));
- }
- };
-
- request.onload = function () {
- if(this.status === 200) {
- onSuccess(window.location.origin + '/' + this.responseText);
- } else {
- onError(file.name, this.status, this.statusText.toString());
- }
- };
-}
-
// Merge the properties of one object into another.
function _mergeProperties(target, source) {
for (var property in source) {
@@ -1658,23 +1578,36 @@ function EasyMDE(options) {
this.codemirror.on('drop', function(cm, event) {
event.stopPropagation();
event.preventDefault();
+ self.uploadImages(event.dataTransfer.files);
+ });
+ }
+}
- var files = event.dataTransfer.files;
- var names = [];
- for(var i=0; i= this.options.imageMaxSize) {
+ var units = this.options.imageTexts.sizeUnits.split(',');
+ alert(this.options.imageTexts.errorImageTooBig
+ .replace('#image_name#', file.name)
+ .replace('#image_size#', humanFileSize(file.size, units))
+ .replace('#image_max_size#', humanFileSize(this.options.imageMaxSize, units))
+ );
+ return;
+ }
+
+ var formData = new FormData();
+ formData.append('image', file);
+ var request = new XMLHttpRequest();
+ request.open('POST', this.options.imageUploadEndpoint);
+ request.send(formData);
+
+ var self = this;
+ request.onprogress = function (event) {
+ if (event.lengthComputable) {
+ // TODO: test with a big image on a remote web server
+ var progress = '' + Math.round((event.loaded * 100) / event.total);
+ self.updateStatusBar('upload-image', self.options.imageTexts.sbProgress.replace('#file_name#', file.name).replace('#progress#', progress));
+ }
+ };
+
+ request.onload = function () {
+ if(this.status === 200) {
+ onSuccess(window.location.origin + '/' + this.responseText);
+ } else {
+ onError(file.name, this.status, this.statusText.toString());
+ // TODO: handle several errors defined by the server (bad type, file too large, etc.)
+ }
+ };
+};
+
EasyMDE.prototype.createSideBySide = function () {
var cm = this.codemirror;
var wrapper = cm.getWrapperElement();
@@ -2067,8 +2047,22 @@ EasyMDE.prototype.createToolbar = function (items) {
toolbarData[item.name || item] = el;
bar.appendChild(el);
+
+ // Create the input element (ie. ), used among
+ // with the 'import-image' icon to open the browse-file window.
if (item.name === 'upload-image') {
- bar.appendChild(createImageInput(self));
+ var imageInput = document.createElement('input');
+ imageInput.className = 'imageInput';
+ imageInput.type = 'file';
+ imageInput.multiple = true;
+ imageInput.name = 'image';
+ imageInput.accept = self.options.imageAccept;
+ imageInput.style.display = 'none';
+ imageInput.style.opacity = 0;
+ imageInput.addEventListener('change', function (event) {
+ self.uploadImages(event.target.files);
+ });
+ bar.appendChild(imageInput);
}
})(items[i]);
}