How to customize image upload request?

[dannystyleart]

Hello @xdan,

I like this wyswyg editor, it is fast and fullpacked but I can't figure out how to customize the image upload.

The default implementation forces a multipart formdata as request payload and somehow flips rabdomly a get request before the post when using cors.

I have to pass a json object in the request body and inside it the image base64 encoded.
Is there anyway to override the uploader class to use own custom logic?

Im using it wit react and axios as http client. It would be cool to pass a custom uploader class that gets the files.

Thanks in advance

[einarhuseby]

I haven't tried it but the afterInsertImage event could work. From the docs you have the image object and I guess you could take the image.src remove the data:image/..;base64, and upload it with your own uploader then change image.src to the url serving your uploaded image which will be inserted (or changed) in the editor.

@xdan, it would be very nice to have an event along the lines of afterInsertFile where you get the file object which one can upload using a custom uploader and then return whatever you want to be inserted in the editor. For an attachment maybe filename with url to file, for an image insert the image with src to the url serving the image etc.

[xdan]

Hi here https://xdsoft.net/jodit/doc/types/UploaderOptions/ in latest example you can find getting file from FormData object

[sowmiyaseshadriii]

Hi @xdan @dannystyleart is it possible to apply custom url for image upload, i.e i dont want to upload in https://xdsoft.net/jodit/connector/index.php?action=fileUpload instead i want use custom url eg xyz.com/upload, for this i need to pass data, filename also, how can be done,

uploader: {
            url:  "xyz.com/upload"
            headers: {
              Authorization: 
               "2wnz2gu8"
            }, 


Jodit.js
Config_1.Config.prototype.uploader = {
    url: 'xyz.com/upload',
   headers: {
              Authorization: 
               "2wnz2gu8"
            },
data: {
 filename: "",
 encodedstr: ""
},
 insertImageAsBase64URI: false,
 imagesExtensions: ['jpg', 'png', 'jpeg', 'gif'],
   withCredentials: false,
    format: 'json',
    method: 'POST',
process: function (resp) {
        return resp.data;
    },
}