InputFile component problem with image upload

Question

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,

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.

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 value, 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?

"What's wrong with InputFile in Blazor? this was the actual image I'm trying to upload" Almost certainly nothing, it's your code. Without more code, your question is impossible to answer. That looks like MudBlazor? — MrC aka Shaun Curtis
– MrC aka Shaun Curtis, Commented Jul 19, 2022 at 20:14
Woah, kinda passive-aggressive comment don't you think? you could have said it nicer. Yes, it's mudblazor, but I don't know if it's relevant, I tried using it without mudblazor and still the same issue. I don't know what kind of code you are looking for, that's the only code that has any relationship with InputFile, but ok, I'll try to add the razor if that's what you're looking for. — Marlon Dumal-is
– Marlon Dumal-is, Commented Jul 20, 2022 at 6:29
@MrCakaShaunCurtis now I have edited the questions please enlighten me with the "Almost certainly, it's your code" comment you made please. thank you very much. — Marlon Dumal-is
– Marlon Dumal-is, Commented Jul 20, 2022 at 6:45
[Polite] No malice intended :-), but many question askers think that the problem is caused by a bug, when in 99+% of the cases it's their code. Your question implied that. Your original question was light on detail and you never mentioned MudBlazor which you were obviously using and may be pertinent to the problem. It's hard for people to help questioners when they don't provide enough detail. — MrC aka Shaun Curtis
– MrC aka Shaun Curtis, Commented Jul 20, 2022 at 7:57

Adam Janovec · Accepted Answer · 2022-09-30 10:02:48Z

4

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

answered Sep 30, 2022 at 10:02

Adam Janovec

814 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ahmad Gabari Over a year ago

Thanks man, you saved hours of my life - great.

Tito · Accepted Answer · 2022-12-17 11:41:27Z

0

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.

edited Dec 17, 2022 at 11:41

answered Dec 17, 2022 at 11:37

Tito

11 bronze badge

Collectives™ on Stack Overflow

InputFile component problem with image upload

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related