How does it upload the image?

[hamada147]

if you don't mind but how dose it upload the image to the server and where dose it save it if i wanted to save it on the server where would i be able to find it's location so i can out it in the right directory?

[kevgithub]

I ve checked the mindmup which uses the bootstrap-wysiwyg as the rich text editor as its own, the mindmup sent the entire data url to the server, since the bootstrap-wysiwyg is designed for the mindmup, I guess that the only solution for uploaing image

[ezekieltanch]

In the insertFiles function of bootstrap-wysiwyg.js, replace the following section with ajax image upload:

$.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) {
    underscoreThrottle(execCommand('insertimage', dataUrl), options.keypressTimeout);
    editor.trigger('image-inserted');
    options.successAction(true, dataUrl);
}).fail(function (e) {
    options.fileUploadError("file-reader", e);
});

• fileInfo is the image file

A sample is:

var data = new FormData();
data.append('file' , fileInfo);
$.ajax({
    url: '<YOUR SERVER SIDE URL>', 
    type: 'POST',
    contentType: false, 
    data: data, 
    processData: false, 
    cache: false
}).done(function(data) {
    // The server side codes will return the img url
    fullImgLink = data.imgName;
    // Insert the newly uploaded image into the editor
    underscoreThrottle(execCommand('insertimage', fullImgLink), options.keypressTimeout);
    editor.trigger('image-inserted');
    options.successAction(true);
});

Hope this helps!

[BellaBi]

first,you should have bootstrap-wysiwyg.js in your HTML file ,the code of bootstrap-wysiwyg,like: the "action" is what you use to upload your image, "id","name" is necessary
Define a function called bootstrap-wysiwyg.js in the uploadFileToServer, the function format is as follows:
//begin
uploadFileToServer = function(id, action, callback) {
$.ajaxFileUpload({
url : action,
secureurl : false,
fileElementId : id,
dataType : 'json',
success : function(obj) {
//返回值为status、thumb_url、url、message
//console.log(obj.status);
//console.log(obj.thumb_url);
//console.log(obj.url);
if (obj.status) {
// callback(obj.imgsrc);
callback(obj.thumb_url);
}else{
https://guides.github.com/features/mastering-markdown/
options.fileUploadError("server-internal-exception",
obj.message);
}
},
error : function() {
options.fileUploadError("upload-failure", "");
}
});
};
//end
In fact, the position of this function can be free, I put it in the back of the initFileDrops, function and function separated by a comma.
InsertFiles function to modify the way to use callback,
//new
insertFiles = function (files,id,action) {
// console.log(action);
editor.focus();
$.each(files, function (idx, fileInfo) {
if (/^image//.test(fileInfo.type)) {
/*$.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) {
execCommand('insertimage', dataUrl);
}).fail(function (e) {
options.fileUploadError("file-reader", e);
}); */
uploadFileToServer(id,action,function(src){
execCommand('insertimage',src);
});
} else {
options.fileUploadError("unsupported-file-type", fileInfo.type);
}
});
},
//end
At the same time to make some changes to the listener, in order to get the necessary properties
toolbar.find('input[type=file][data-' + options.commandRole + ']').change(function () {
restoreSelection();
if (this.type === 'file' && this.files && this.files.length > 0) {
//insertFiles(this.files);
insertFiles(this.files,$(this).attr('id'),$(this).attr('action'));
}
saveSelection();
this.value = '';
});

Hope this helps!
sorry,For the first time using this software, the code is a bit messy, please forgive me.