Hi!
I am trying to use the HTML editor and add an image. The image is uploaded after you click the 'Ok' button, but an error is thrown there:
Uncaught (in promise) Error: System.NullReferenceException: Object reference not set to an instance of an object.
at Radzen.Blazor.RadzenHtmlEditorImage.OnUploadComplete(UploadCompleteEventArgs args)
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Radzen.Blazor.RadzenUpload.OnComplete(String response)
at Object.endInvokeDotNetFromJS (blazor.server.js:1:70618)
at e.<anonymous> (blazor.server.js:10:48412)
at blazor.server.js:1:26442
at Array.forEach (<anonymous>)
at e.invokeClientMethod (blazor.server.js:1:26412)
at e.processIncomingData (blazor.server.js:1:24223)
at e.connection.onreceive (blazor.server.js:1:17308)
at WebSocket.i.onmessage (blazor.server.js:1:46784)
for HTML editor to add an image I am using below code and UploadUrl end point, which uploads the file successfully, and return the file URL , but I dont see image URL coming to HTML editor , and no error in consol as well. also image upload dialog closes.
I am using blazor webassembly project, do I need to handle it differently for blazor webassembly ? I am stuck on this from quite good time and no much help is available on this , appreciate if you can tell me what I am doing wrong here ..
[HttpPost()]
public async TaskImage(IFormFile file)
{
try
{
string fileName = "";
var extension = "." + file.FileName.Split('.')[file.FileName.Split('.').Length - 1];
var uploadPath = Path.Combine(_env.ContentRootPath, "xIUploads", "1", "Newsletter");
fileName = $"{Guid.NewGuid()}{extension}";
var filePath = Path.Combine(uploadPath, fileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
file.CopyTo(stream);
var baseUrl = $"{Request.Scheme}://{Request.Host}";
var fileUrl = $"{baseUrl}/xIUploads/{fileName}";
return Ok(new { Url = fileUrl });
}
}
catch (Exception e)
{
return StatusCode(500, "Error uploading image: " + e.Message);
}
}
for HTML editor to add an image I am using below code and UploadUrl end point, which uploads the file successfully, and return the file URL , but I dont see image URL coming to HTML editor , and no error in consol as well. also image upload dialog closes.
I am using blazor webassembly project, do I need to handle it differently for blazor webassembly ? I am stuck on this from quite good time and no much help is available on this , appreciate if you can tell me what I am doing wrong
[HttpPost()]
public async Task<IActionResult>Image(IFormFile file)
{
try
{
string fileName = "";
var extension = "." + file.FileName.Split('.')[file.FileName.Split('.').Length - 1];
var uploadPath = Path.Combine(_env.ContentRootPath, "xIUploads", "1", "Newsletter");
fileName = $"{Guid.NewGuid()}{extension}";
var filePath = Path.Combine(uploadPath, fileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
file.CopyTo(stream);
var baseUrl = $"{Request.Scheme}://{Request.Host}";
var fileUrl = $"{baseUrl}/xIUploads/{fileName}";
return Ok(new { Url = fileUrl });
}
}
catch (Exception e)
{
return StatusCode(500, "Error uploading image: " + e.Message);
}
}
My reply earlier has a link to the documentation. You can also check our online demos. By the way I don't think you can upload files in WASM applications. Uploading means to send a file from the client to the server.
My Webassebly application (running from one domain) making API call on another domain and able to upload the file, also the APID server is retuning back uploaded file URL, but web assembly app is not listening it back. and seems my code is matching with online demo, anything special we need to take care of coming back to Webassebly application to listen back URL as HTML Editor events is not firing back.
In that case I can suggest debugging the Radzen.Blazor.js file. You can easily put a breakpoint in the upload complete event handler and see what the response is.
Debug process is not hitting debug point mentioned when upload dialog closes. any other point we can look at ? like time dialog closes or OK button on upload dialog..
Sorry but can we place debug point to this place? as I see VS giving warning that debug point will not hit. I believe it is becz of optimized code or some other reason of decompiled library code of RadzenHtmlEditorImage.razor.cs
You have probably not attached the source code properly to your project. You should add Radzen.Blazor.csproj as a project reference and remove the existing one from nuget.
RadzenHtmlEditorImage.razor.cs is using "url" to get url while my API was retuning "Url" hence because of capital U in Url if condition was not executing to run InsertHtml() ;
by simply replacing Url to url at returning API call fixed the issue.
async Task OnUploadComplete(UploadCompleteEventArgs args)
{
if (args.JsonResponse.RootElement.TryGetProperty("url", out var property))