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

[Charles Southey]

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.

[Fahad Khalil]

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.

[Stephen Brat]

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.

[Prince Oliver]

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. 

https://ej2.syncfusion.com/aspnetmvc/documentation/uploader/how-to#add-additional-data-on-upload 

 

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. 

 

Regards, 

Prince 

[Charles Southey]

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);

            $.ajax(

                    {

                        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)

                    {

                        $.jGrowl(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);

        xhr.send();

    }

}

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.

[Christopher Issac Sunder K]

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() 

<script> 

    function onActionComplete(e) { 

        var url = e.elements[0].src; 

    } 

</script> 

  

  

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 

  

Sample: http://www.syncfusion.com/downloads/support/forum/141095/ze/RTE326280033  

  

UG: https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/image/#image  

  

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.  

Thanks, 

Christo