Hello Felix,
Thank you for contacting us.
Query 1: “What's the recommended way to use a specific upload directory in Razor Pages projects, when using RTE? Can SaveURL also be used with Razor Pages when the handler method is in code behind?”
Yes. You can achieve upload using the saveUrl property and handler from code behind of Razor pages. But you need to add the below configurations to achieve it.
- Add AntiForgery token in startup file or web.config file.
[Startup.cs]
|
public void ConfigureServices(IServiceCollection services) // Add below code
{
services.AddMvc().AddJsonOptions(x =>
{
x.SerializerSettings.ContractResolver = new DefaultContractResolver();
});
services.AddAntiforgery(o => o.HeaderName = "xsrf-token");
} |
- Setup AntiForgery token in uploading event of Rich Text Editor image uploader through object using toolbarClick event. We have added ValidateAntiForgeryToken attribute on the server-side method when Rich Text Editor image uploading event triggered.
[Index.cshtml]
|
@model IndexModel
@Html.AntiForgeryToken()
<ejs-richtexteditor id="rte" toolbarClick="toolbarClick">
<e-richtexteditor-insertimagesettings saveUrl="/Index?handler=Save" path="../">
</e-richtexteditor-insertimagesettings>
<e-content-template>
<p>
Users can format their content using standard toolbar commands.
</p>
</e-content-template>
</ejs-richtexteditor>
<script>
function toolbarClick(e) { // Triggered when you click the toolbar
if (e.item.id == "rte_toolbar_Image") { // Checked if image toolbar is clicked
var element = document.getElementById('rte_upload') // Image uploader element
element.ej2_instances[0].uploading = function upload(args) { // Added updating event on image uploader
args.currentRequest.setRequestHeader('XSRF-TOKEN', document.getElementsByName('__RequestVerificationToken')[0].value);
}
}
}
</script> |
[Index.cshtml.cs]
|
private IHostingEnvironment hostingEnv;
public IndexModel(IHostingEnvironment env)
{
this.hostingEnv = env;
}
[AcceptVerbs("Post")]
public IActionResult OnPostSave(IList<IFormFile> UploadFiles) // Triggered when uploading image
{
try
{
foreach (var file in UploadFiles)
{
if (UploadFiles != null)
{
var filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
filename = hostingEnv.WebRootPath + $@"\{filename}";
if (!System.IO.File.Exists(filename))
{
using (FileStream fs = System.IO.File.Create(filename))
{
file.CopyTo(fs);
fs.Flush();
}
}
else
{
Response.Clear();
Response.StatusCode = 204;
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File already exists.";
}
}
}
}
catch (Exception e)
{
Response.Clear();
Response.ContentType = "application/json; charset=utf-8";
Response.StatusCode = 204;
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "No Content";
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
}
return Content("");
} |
We have attached the example application for your reference, please find it in the following location:
Currently, we have used MVC pattern for server-side actions in
ASP.NET Core UG documentation.
Query 3: “Without providing any directly upload seems to work, at least I get an URL within the img src tag. But can't find the image after uploading, so I thought it might be better to handle this manually”
If you want to upload image without insertimagesettings property, you can upload the image directly and render it in editor. Suppose if you are going to configure insertimagesettings property, you need to specify path property. The editor considers the path property to render the image in editor. The saveUrl represents the URL to an action result method to save the image, and the path represents the destination folder in which the image must be saved.
Let us know if you need any further assistance on this.
Regards,
Prince
