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.