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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

141095 Nov 23,2018 10:43 AM UTC Dec 7,2018 12:58 PM UTC ASP.NET MVC - EJ 2 5
loading
Tags: RichTextEditor
Charles Southey
Asked On November 23, 2018 10:43 AM UTC

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
Replied On 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.

Stephen Brat
Replied On 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.

Prince Oliver [Syncfusion]
Replied On 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. 
 
Regards, 
Prince 


Charles Southey
Replied On 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);
            $.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 [Syncfusion]
Replied On 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() 
<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 
  
  
  
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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon