HTMLEditor - Paste image and convert it "on the fly" to base64

Roneri · March 11, 2022, 7:39am

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 the file.

korchev · March 11, 2022, 8:59am

This is probably doable but the RadzenHtmlEditor does not support it at the moment. We can probably add it as a built-in feature if the Upload url isn't configured.

Roneri · March 11, 2022, 9:49am

That would be great, since the Azure Static Web does not have a "temp file" area to use for an upload url.

The current eidtor i'm using is TinyMCE and I'm having some huge performance issues with it and it uses a IFrame for the editor and i'm not really happy with it and the only thing that is kind of holding me back from using Radzen is the function to Paste a image so if it is possible to some how catch the pasted image in the OnPaste event so I can convert it to a Base64 in the client I think I'll switch over to Radzen for the whole project.
I have just started using Radzen and I really like it and I might even switch to it in some of my other project too.

roycroftcr1 · February 6, 2023, 12:29am

Hi, was this ever implemented? I am trying to achieve something similar (provide the user the ability to paste inline pics/screenshots in). Thanks!

korchev · February 6, 2023, 7:48am

I just implemented it - images will be pasted as data URI if the UploadUrl property of RadzenHtmlEditor is not set. This will go live with the next release of Radzen.Blazor (probably later this week).

SandroRiz · December 6, 2023, 4:25pm

Hi korchev,
is something changed or do you have reduced the limit of size of the pasted image?

If I paste a very little snapshot it works ok, but as soon the image is a little bigger (but not giant, just 800x600) the blazor server app disconnects for a few second and often you loose what you're doing (it's like it make a refresh/post in the old times of webforms without saving)

See video:

Thanks

enchev · December 6, 2023, 4:29pm

You might need this:

github.com

radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos.Server/Program.cs#L17


      
          using RadzenBlazorDemos.Data;

          using RadzenBlazorDemos.Services;

          

          var builder = WebApplication.CreateBuilder(args);

          

          // Add services to the container.

          builder.Services.AddRazorPages();

          builder.Services.AddRazorComponents()

              .AddInteractiveServerComponents().AddHubOptions(o =>

          {

              o.MaximumReceiveMessageSize = 10 * 1024 * 1024;

          });

          builder.Services.AddSingleton(sp =>

          {

              // Get the address that the app is currently running at

              var server = sp.GetRequiredService<IServer>();

              var addressFeature = server.Features.Get<IServerAddressesFeature>();

              string baseAddress = addressFeature != null ? addressFeature.Addresses.First() : string.Empty;

              return new HttpClient { BaseAddress = new Uri(baseAddress) };

          });

SandroRiz · December 7, 2023, 11:24am

Works perfect thanks!!

Forgot to mention that mine is a Blazor Server NET7 app but added to

builder.Services.AddServerSideBlazor()
    .AddHubOptions(o =>
{
    o.MaximumReceiveMessageSize = 10 * 1024 * 1024;
}); ;