We have created a Blazor Server application with .NET 5 framework, with a feature that uploads images and it crops it which part should be uploaded, what we use is croppie.js, I tried the code below when after the cropping of image then save, what approach I did use is getting the src of image using javascript, that is been called by my method inside of the Blazor Server Page, here's my code.
Javascript:
function getImgSrc() {
debugger;
var GetValue = document.getElementById('my-img').src;
return GetValue;
}
My Blazor Server-side page codes (Index.razor.cs)
public async Task SavePhoto()
{
string GetSRC = await jSRuntime.InvokeAsync<string>("getImgSrc");
string path = _hostingEnvironment.WebRootPath + "/images/" + fileName;
byte[] imageBytes = Convert.FromBase64String(GetSRC);
File.WriteAllBytes(path, imageBytes);
return;
}
Then, when I run the application, crop the image and save it, it causes an error, the only error message show is this.
Error: Connection disconnected with error 'Error: Server returned an error on close: Connection closed with an error.'.
Has anyone tried to use croppie in Blazor Server? have you successfully gotten the image from image tag's src??
I hope someone can help me on this.
Thanks everyone
I have solved this by not using code behind of the blazor component page, I used a javascript, json/ajax and webapi for saving the image, then used the code behind for getting the image to show, but I have to force reload the page for this. Our team is currently want to avoid blob on the code behind of the blazor, to make our app to be light weight as possible.
Thank you everyone.