Unable to insert an image in the HTMLEditor
To Reproduce
Go to Blazor HTML editor componenet with lots of built-in tools
Place the cursor in the editor, where you wish to place the image
Click on "Insert Image" icon from the top toolbar
Browse for the image from the local computer (jpg image) and provide height, width, and alt text properties.
Click on the OK button
Nothing happens. The select image dialog is still open and not getting closed
No error is visible on the UI
Check the second demo - image upload works there. The first one is missing the UploadUrl setting hence it doesn't upload.
Can You paste a link to this demo?
The online demo shows a working configuration. Check the documentation about image uploads.
Thank you for the fast response!
The html editor works normally with .net 8, but uploading the image does not work even passing the url according to the documentation. The dialog box opens, but when you click the button nothing happens. Some help?
<RadzenHtmlEditor @bind-Value="post.Conteudo" UploadUrl="upload/image" style="height:300px;" />
Hi @dpelissari ,
Check the network tab to see what happens on upload. I suspect the HTTP request fails for some reason.
1 Like
This means there is no such route in your application. Check your upload controller implementation.
1 Like
@korchev Thanks for the answer!
The documentation seems a little confusing to me. Is there somewhere that demonstrates uploadController configuration and its usage for .net 8?
I appreciate your help!
There isn't anything specific to Radzen in this controller. Your app should just support controllers and everything should work. The online demo contains an upload controller too: radzen-blazor/RadzenBlazorDemos.Host/Controllers/UploadController.cs at master · radzenhq/radzen-blazor · GitHub
1 Like
I managed to get the controller to be called, I had to pass "app.MapControllers();" in my program.cs.
Now I have the following error: Error: System.NullReferenceException: Object reference not defined for an instance of an object.
Debug your controller. There is a NullReferenceException in it.
I really appreciate your help, I managed to make uploading images work in the html editor with .net8.
My controller (added class):
public partial class UploadController : Controller
{
private readonly IWebHostEnvironment environment;
public UploadController(IWebHostEnvironment environment)
{
this.environment = environment;
}
[HttpPost("upload/image")]
public IActionResult Image(IFormFile file)
{
try
{
var fileName = $"upload-{DateTime.Today.ToString("yyyy-MM-dd")}-{Guid.NewGuid()}{Path.GetExtension(file.FileName)}";
using (var stream = new FileStream(Path.Combine(environment.WebRootPath, fileName), FileMode.Create))
{
// Save the file
file.CopyTo(stream);
// Return the URL of the file
var url = Url.Content($"~/{fileName}");
return Ok(new { Url = url });
}
}
catch (Exception ex)
{
return StatusCode(500, ex.Message);
}
}
}
My Program.cs (lines added):
builder.Services.AddControllers();
app.MapControllers();
RadzenHtmlEditor call:
<RadzenHtmlEditor @bind-Value="post.Conteudo" UploadUrl="/upload/image" style="height:300px;" />
Another question, does Radzen support multiple languages? Is it possible to leave the dialog box texts in pt-br?
Thank you very much, hugs!
Yes, it does. You can set the properties of the InsertImage tool.
<RadzenHtmlEditor>
<!-- other tools -->
<RadzenHtmlEditorImage SelectText="Select" OkText="OK" />
</RadzenHtmlEditor>
Here is a list of all properties available: Class RadzenHtmlEditorImage
On this topic, are we still able to insert images inline by leaving UploadUrl blank? It's doesn't seem to be able to do that now. I tried it in the demo by removing the UploadUrl and it doesn't work there either...
What do you mean by insert images inline?
So i'm working on a Blazor wasm support site that will be published to an Azure Static Web page and there is no real easy way to save files somewhere and I don't want to make a backend.
Is it possible to expose the the file in the OnPaste funtion in the HtmlEditorPasteEventArgs?
That way maybe you can upload the file in the browser and convert it to a base64 directly?
Or is that impossible?
That would have solved a lot of issues when you don't have a backend where you can temporarily save th…
Used to be able to insert base 64
The linked thread is about pasting images. It still works.
The insert image dialog however never supported this - only pasting did.
UPDATE: We decided to implement that as well - inserting images as base64 when the UploadUrl attribute is not set. Will be live with the next release of the Radzen.Blazor component library.
1 Like
