(Unique) Naming images uploaded from HTMLEditor

Hi,

Thank you for your patience.

I examined the internals of the HTML Editor, and I believe I found a custom solution to implement this functionality. Please follow these steps:

1. Set the OnUploaded option through the HTML Editor's FileUploaderOptions helper method:

JavaScript
@(Html.DevExtreme().HtmlEditor()
        .ImageUpload(imageUpload => imageUpload
            .FileUploaderOptions(uploaderOptions => uploaderOptions.OnUploaded("fileUploaded"))
            .FileUploadMode(HtmlEditorImageUploadFileUploadMode.Server)
            .UploadUrl("your upload url")

2. The code above will override the internal fileUploaded callback. The internal callback will no longer be called, but you will have control over the process of inserting uploaded images into the HTML Editor. This simple code shows a potential implementation for a newly assigned callback:

JavaScript
<script>
    function fileUploaded(e) {
        // e.component here is an instance of the HTML Editor's FileUploader component
        // so you need to get the instance of the HTML Editor to use insertEmbedd function
        const component = $("#html-editor").dxHtmlEditor("instance");

        // e.request here is the result returned by your server option
        // url parameter must be set on the server
        const fileName = JSON.parse(e.request.response).url;

        component.insertEmbed(0, "extendedImage", {
            src: fileName,
            alt: "you can set alt here",
            width: "100px",
            height: "100px"
        });
    }
</script>

3. Finally, update your server method to return data required to correctly process a new file name. In the following code, the url parameter is specified in the Ok response:

C#
[HttpPost("UploadImage")]
public object UploadImage([FromForm] IFormFile file) {
    if (file != null && file.Length > 0) {
        your code here to upload an image here
        var imageUrl = get image new url nere
        return Json(new { url = imageUrl }); // url is used in fileUploaded
    }
    return BadRequest("No file uploaded.");
}

Please try this solution and let me know if it helps.

Thanks,
Alisher