1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Saving an inserted image in the Rich Text Editor control server-side so it can be persisted between sessions and users.

Saving an inserted image in the Rich Text Editor control server-side so it can be persisted between sessions and users.

Hi,

Using the JS2 Rich Text Editor control in a C# ASP.NET MVC 4.5 application, how is it possible to store an uploaded image server-side AND have the src property of the resulting img element point to a server-side URL so that when the content of the Rich Text Editor has been saved (server side) and is re-rendered at a later date the img element points to a server-side copy of the image?

I have successfully set the saveUrl parameter so that it is possible to save the image server-side - but the resulting img element on the client still references a blob url which does not persist the image between sessions (or between users). 

There seems to be scant documentation on this. Key questions are:

1. Is there a difference between the Path parameter and the saveUrl parameter of the InsertImageSettings?
2. Should the server-side method return anything? (presumably yes, otherwise how will a server-side URL be set - but what?).
3. What can be done to force the img element to use the server-side URL rather than a blob url?

I've tried catching the ActionBegin and ActionComplete events, but they don't seem to contain anything useful.

The Razor definition of my Rich Text Editor control is as follows...

  var items = new object[] {"Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "|", "SourceCode", "FullScreen", "Undo", "Redo"};    

@Html.EJS().RichTextEditor("symptoms").ActionBegin("rteActionBegin").ActionComplete("rteActionComplete").Value(ticket.symptoms).InsertImageSettings(new RichTextEditorImageSettings(){SaveUrl = "/FSC/SaveImage"}).Placeholder("e.g. Contents page won't generate").ToolbarSettings(e => { e.Type(Syncfusion.EJ2.RichTextEditor.ToolbarType.Expand).EnableFloating(false).Items(items); }).Change("setSymptoms").Render()




3 Replies
PO Prince Oliver Syncfusion Team October 12, 2018 12:53 PM UTC

Hi Charles, 
 
Thank you for contacting Syncfusion support. 
 
Query 1:  Is there a difference between the Path parameter and the saveUrl parameter of the InsertImageSettings? 
 
Yes, saveUrl represents the URL to action result method to save the image and path represents the destination folder in which the image has to be saved. 
 
 
Query 2: Should the server-side method return anything? (presumably yes, otherwise how will a server-side URL be set - but what?). 
 
It is not mandatory to return data from server-side. ActionComplete event will be triggered after the upload action is completed successfully and the arguments will contain the image details. You can return data in case , if you need to pass any additional data to client end. 
 
Query 3: What can be done to force the img element to use the server-side URL rather than a blob url? 
 
While inserting image without service (like online source), the image element will use blob url. This can be replaced with server-side Url when you pass the image name along with its saved path from server end. 
 
Please let us know if you require any further assistance on this. 
 
Regards, 
Prince 


EL elirodrigues August 25, 2019 09:29 PM UTC

Guys,

I've read a lot, but couldn't find how to solve the issue bellow:

1. In Angular, how do I update the PATH of an uploaded image?

 public insertImageSettings = {
        saveUrl: 'http://127.0.0.1:5000/image',
        path: ???
  };

I'm able to save the image on Cloudinary using "saveURL", but not to receive the final URL to show the image in the component (obs: the url changes on each upload)

I saw you saying about "ActionComplete" event and was able to trigger it as following:

ejs-richtexteditor [(ngModel)] = "lesson.content" [(value)]='lesson.content' [insertImageSettings]='insertImageSettings' (actionComplete)="test()"   /ejs-richtexteditor

But how do I change the path to what received from the service?

Can you help, please?

NP Narayanasamy Panneer Selvam Syncfusion Team August 26, 2019 02:15 PM UTC

Hi Charles, 
 
Thanks for your update. 
 
Query 1: I'm able to save the image on Cloudinary using "saveURL", but not to receive the final URL to show the image in the component (obs: the url changes on each upload) 
In RichTextEditor, the uploaded image URL can be accessible only after inserted image into editor area. The Cloudinary service will return the response once the image got uploaded successfully into their server. Please refer couldinary documentation for more details, 
To access couldinary response, you need to return the final URL from controller to view. Please find the intermediate controller’s service action in below, 
@Contoller 
HttpResponse Response = System.Web.HttpContext.Current.Response; 
Response.Clear(); 
Response.Headers.Add("url", finalUrl); 
Response.ContentType = "application/json; charset=utf-8"; 
Response.End(); 
 
 
To access response header, we need to bind RichTextEditor’s uploadSuccess event. Please find code to access the response header of final URL  in below, 
 
Html: 
<ejs-richtexteditor  [insertImageSettings]='insertImageSettings' (imageUploadSuccess)='onImageUploadSuccess'></ejs-richtexteditor> 
 
 
TS: 
function onImageUploadSuccess(args) { 
    if (args.e.currentTarget.getResponseHeader('url') != null) { 
        // Access and use url as per your need in application end 
        var url = args.e.currentTarget.getResponseHeader('url'); 
    } 
} 
 
 
From the obtained final URL of couldinary, you can render the image in component. 
If still facing difficulties to configure/add cloudinary response URL. Then kindly host the service in which you are facing this issue and share the link to us, which will help us to provide quick solution. 
 
Query 2: But how do I change the path to what received from the service? 
Can you confirm, whether you're inserting uploaded image into RichTextEditor’s edit area. Or else are you used it for any other scenario? (like notification scenario) 
 
Please let us know if you need further assistance on this. 
 
Regards,
Narayanasamy P. 
 


Loader.
Up arrow icon