CODEWITHSUNDEEP
.netblazorblazorinputfile
Marlon Dumal-is
Marlon Dumal-is

Reputation: 350

InputFile component problem with image upload

What's wrong with InputFile in Blazor?

(Edit: "what's wrong with my implementation of InputFile, as someone pointed out in the comment")

this was the actual image I'm trying to upload, enter image description here

and this is the resulting display, after uploading; the image is cropped. On top of that, the application also stops working all of a sudden.

enter image description here

and here's the piece of code what is called on the OnChange event of the InputFile

    async Task OnFileChange(InputFileChangeEventArgs e) {
        const string format = "image/png";
        var resizedImage = await e.File.RequestImageFileAsync(format, 512, 512);
        var buffer = new byte[resizedImage.Size];
        await resizedImage.OpenReadStream().ReadAsync(buffer);
        imageBase64 = $"data:{format};base64,{Convert.ToBase64String(buffer)}";
      }

the usual tutorials use 200 or 256 as image size, though all I did was just double the valueenter image description here, which is still below the threshold of the RequestImageFileAsync method which is 512000

Edit 1: this is the snippet of the button that triggers the InputFile

<MudFab HtmlTag="label" Size="Size.Small" Color="Color.Primary" StartIcon="@Icons.Filled.CloudUpload" for="fileInput" />

here's the snippet of the InputFile on the razor page.

<InputFile id="fileInput" OnChange="OnFileChange" hidden multiple accept=".jpg, .jpeg, .png" />

here's the image component displaying the image

<MudImage ObjectFit="ObjectFit.ScaleDown" Src="@imageBase64" Elevation="25"  Class="rounded my-2"></MudImage>

note that I'm indeed using Mudblazor, but I don't think that is of any significance. I tried it on vanilla HTML but still the same issue.

I have slimmed the code so if you put it together, the razor page should look like this:

@page "/tryImage"

<PageTitle>Try Image</PageTitle>

<InputFile id="fileInput" OnChange="OnFileChange" hidden multiple accept=".jpg, .jpeg, .png" />
<MudImage ObjectFit="ObjectFit.ScaleDown" Src="@imageBase64" Elevation="25"  Class="rounded my-2"></MudImage>
<MudFab HtmlTag="label" Size="Size.Small" Color="Color.Primary" StartIcon="@Icons.Filled.CloudUpload" for="fileInput" />


@code {
    private string? imageBase64;
    async Task OnFileChange(InputFileChangeEventArgs e) {
        const string format = "image/png";
        var resizedImage = await e.File.RequestImageFileAsync(format, 512, 512);
        var buffer = new byte[resizedImage.Size];
        await resizedImage.OpenReadStream().ReadAsync(buffer);
        imageBase64 = $"data:{format};base64,{Convert.ToBase64String(buffer)}";
      }
}

Edit 2: Or is it possible that the error has something to do with large images in conflict with RequestImageFileAsync since the sample image I showed above is about 1.2 MB and has dimensions of 4929x3286?

Upvotes: 2

Views: 2168

Answers (2)

Tito
Tito

Reputation: 1

This works in this example https://youtu.be/bQ6D4VFMxc4 But it works on net5.0 The problem occurs on net6.0

So I made some changes.

Commented whole program.cs file and copied program.cs and startup.cs from net5.0

In project file I commented

<!--<ImplicitUsings>enable</ImplicitUsings>-->

In Layout.cshtml

Commented

@*<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />*@

and copied form net5.0 host.chtml

<component type="typeof(App)" render-mode="ServerPrerendered" />

to body section before @RenderBody.

And it works but this is not solution. If anybody has idea how to make this work in net6.00 or workaround please let me know.

Upvotes: 0

Adam Janovec
Adam Janovec

Reputation: 81

I faced the same problem on Blazor server side. It wasn't cause by maximum size of the file. No errors, app stuck and only reloading the page helps

I changed this code:

var resized = await browseFile.RequestImageFileAsync(browseFile.ContentType, maxWidth: 500, maxHeight: 800);
var buffer = new byte[resized.Size];
await resized.OpenReadStream(maxAllowedSize: 5120000).ReadAsync(buffer); //500KB
var fileString = $"data:{browseFile.ContentType};base64,{Convert.ToBase64String(buffer)}";

to:

using MemoryStream ms = new();
var resized = await browseFile.RequestImageFileAsync(browseFile.ContentType, maxWidth: 500, maxHeight: 800);
using Stream fileStream = resized.OpenReadStream(); 
await fileStream.CopyToAsync(ms);
                
var fileString = $"data:{browseFile.ContentType};base64,{Convert.ToBase64String(ms.ToArray())}";

and it works :-)
I still don't know where the cause was. If anyone figures it out, let me know

Upvotes: 4

Related Questions