Upload image using custom service

Question

Hi, I wanted to know how can I insert an image in the RickTextEditor but using a custom service call inside my app.
I just see the option of using the saveUrl prop, the problem with that is that that request hasn't got any of the headers that my other requests have (Auth token, for example).

I've searched for an answer to this in your forums but couldn't find one, so sorry if this was already asked before. Also, there's no mention of this in the documentation.
If that's not possible, I've though about calling my service in the imageSelected callback, the only problem with that is that I don't know how could I insert the url that my service provides me (where the img is stored in our server) instead of the one your component is generating (if Blob format chosen).

I think this is a common situation between your clients so I'm sure you already have a solution for this case.

Thanks in advance.

Pandiyaraj Muniyandi · Accepted Answer

Hi Alex, 
 
Greetings from Syncfusion support. 
 
We have validated your query from our end. We can achieve your requirement of pass the additional form data and request header by updating below event arguments from imageUploading event callback 
 




 
imageUploading - Event: https://ej2.syncfusion.com/react/documentation/api/rich-text-editor#imageuploading 
 
Event arguments (UploadingEventArgs): https://ej2.syncfusion.com/react/documentation/api/uploader/uploadingEventArgs/ 
 

currentRequest: https://ej2.syncfusion.com/react/documentation/api/uploader/selectedEventArgs/#currentrequest
 

customFormData: https://ej2.syncfusion.com/react/documentation/api/uploader/selectedEventArgs/#customformdata
 
 
Sample code:  
 




 
imageUploading: function(args) { 
    args.customFormData = [{ name: "Syncfusion INC" }]; 
} 
 
 
To update the saved remote image location in RTE return the remote location through http response and receive through imageUploadSuccess event callback and update like below 
 
imageUploadSuccess: https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/#imageuploadsuccess 
 




 
imageUploadSuccess(args) { 
   if (args.e.currentTarget.getResponseHeader("name") != null) { 
      args.file.name = args.e.currentTarget.getResponseHeader("name"); 
      filename = document.querySelectorAll(".e-file-name")[0]; 
      filename.innerHTML = args.file.name.replace(document.querySelectorAll(".e-file-type")[0].innerHTML, ""); 
      filename.title = args.file.name; 
   } 
} 
 
 
Documentation (For update remote url): https://ej2.syncfusion.com/react/documentation/rich-text-editor/how-to/rename-images-in-server/ 
 
If you still facing any issue, kindly revert to us. 
 
Regards, 
Pandiyaraj