We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Avoiding file name clashes when saving images server side in Rich Text Editor.

Is there any way to intervene (e.g. through an event handler) when uploading an image into the Rich Text Editor that needs to be saved server-side? This is necessary because filenames of uploaded images are not necessarily unique: I need to be able to use a dynamically-calculated identifier (e.g. a GUID) instead - both for the image save operation and to subsequently retrieve the image when opening the saved HTML later.

An "OnImageSaving" method might do the trick, but I can't see anything like that available.

A similar method would also be useful for the FileUploader, which suffers from the same problem.

5 Replies

FK Fahad Khalil November 26, 2018 04:15 AM UTC

Subscribing to this thread. I am facing exactly the same design problem. For now, I have implemented a custom upload dialog using a custom command in the toolbar.

SB Stephen Brat November 26, 2018 11:28 PM UTC

This will be having the changes in such way that it will be going to have the overall changes while getting the part to change in such way which will be going to change the whole process for the understanding of the user so lenovo laptop screen flickering will allow the following information to enhance the particular things in the best way.

PO Prince Oliver Syncfusion Team November 27, 2018 03:47 AM UTC

Hi Charles, 
Thank you for contacting Syncfusion support. 
Raw File details cannot be modified from user end. To achieve the custom name, we can pass the unique ID in uploading event as additional parameter. We can form the custom name in server end with the received additional parameter with file name. To know about passing additional parameter, please refer the below documentation link. 
While uploading images we can process the image file details in controller method where we receive the file to save. If we have misunderstood the requirement here,  please provide additional information regarding your scenario and your requirement. This will help us provide a prompt solution at the earliest. 

CS Charles Southey December 5, 2018 06:08 PM UTC

Hi - in the end I have solved the problem using the OnActionBegin method instead of the InsertImageSettings to capture the appearance of an image by any means as follows:

function rteActionBegin(event)
    if (event.requestType === "Image")
        var fd = new FormData();
        var xhr = new XMLHttpRequest;
        xhr.responseType = 'blob';

        xhr.onload = function () 
            fd.append('data', xhr.response);
                        type: 'POST',
                        url: '...' //Put here the url to the server-side method that saves your image - including any parameters you want encoded into the url
                        data: fd,
                        processData: false,
                        contentType: false
                .done(function (data) 
                    if (data.error)
                    } else
                        var url = data.image_url; //The server-side method returns a url for the saved image
                        var img = $('img[src="' + event.itemCollection.url + '"]');
                        img.prop('src', url);
        xhr.open('GET', event.itemCollection.url);

This also works with pasted and drag/dropped images straight into the RTE editor field - whereas the InsertImageSettings method doesn't seem to pick those up.

CI Christopher Issac Sunder K Syncfusion Team December 7, 2018 12:58 PM UTC

Hi Charles, 
Yes , you can use ActionBegin event for getting image details. Also, we have processed the same AJAX post with saveUrl property of InsertImageSettings. You can directly specify the Url of controller method in which you are going to process the uploaded image using saveUrl and the path specifies the location where the image has to be saved. Please refer to the below given code and UG 
@Html.EJS().RichTextEditor("image").InsertImageSettings(obj => obj.SaveUrl("/Home/Save").Path("../Images/")).ActionComplete("onActionComplete").Render() 
    function onActionComplete(e) { 
        var url = e.elements[0].src; 
You can directly upload using browse button or drag and drop files to upload with this saveUrl property of InsertImageSettings property. 

Attached sample for your reference which can be downloaded from the below link 
While pasting images into RTE , the image blob Url will be automatically set to src attribute and image will be pasted directly without any controller action. Please refer to the below screenshot 


Also, you can get this Url through actionBegin event through event.itemCollection.Url as done in your code. Please let us know the requirement on exact scenario with paste action which you expect with InsertImageSettings option.  


Live Chat Icon For mobile
Up arrow icon