InputFile OnChange does not work properly

[davidez]

Hello, I was writing some stuff and I found something unexpected with the InputFile so I created a basic example of the issue I am facing by modifying the counter page of the default Blazor server app:

@page "/counter"
<InputFile multiple OnChange="OnChange" class="form-control"></InputFile>

@code {
	private async Task OnChange(InputFileChangeEventArgs e) {

		foreach (var item in e.GetMultipleFiles()) {

			using FileStream fs = new($@"C:\test\{Guid.NewGuid()}.jpg", FileMode.Create);
			await item.OpenReadStream().CopyToAsync(fs);
		}
	}


}

If I upload some jpg images (one or more) I expect them to be copied in the C:\test folder, the file are created but those files are always empty

[Aldaviva]

You could try calling await fs.FlushAsync() after you await your call to CopyToAsync. I have seen that fix this 0-byte file problem before.

[wfurt]

what OS and .NET version do you use @davidez I think the Flush is good idea.

[davidez]

still not working with the FlushAsync thing:

`@page "/counter" <InputFile multiple OnChange="OnChange" class="form-control"></InputFile>

@code { private async Task OnChange(InputFileChangeEventArgs e) {

	foreach (var item in e.GetMultipleFiles()) {

		using FileStream fs = new($@"C:\test\{Guid.NewGuid()}.jpg", FileMode.Create);
		await item.OpenReadStream().CopyToAsync(fs);
		await fs.FlushAsync();

	}
}

} `

I asked on stack overflow for a little bit different code and a different behaviour: https://stackoverflow.com/questions/77754915/dotnet-8-blazor-server-file-upload-and-save-not-working

Guys I don't know what to say, this code just does not work and it is copied and pasted from here: https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-8.0

dotnet 8 btw

[wfurt]

Could you try to ReadAsync and WriteAsync from the input/output stream? Just to see that you can read & write some data? I have no idea why CopyToAsync would fail. Any thoughts on this @carlossanlop @Jozkee ? I assume your c:\test is writable and normal ntfs?

and using FileStream fs = new(... should it be using FileStream fs = new FileStream(... ???

[davidez]

@wfurt I think you did not read my stack overflow question. And it's not a file system problem nor that fs assegnation (that's syntactic sugar for the same thing), as I said the code is copied and pasted from the Microsoft dotnet 8 documentation.

This is not working with 2 different behaviors with 2 different scenarios and it's weird.

I can supply the full visual studio solution of the sample project I am using, but it's nothing more than what I described

[ghost]

Hi @davidez. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[davidez]

Thank you for filing this issue. In order for us to investigate this issue, please provide a minimal repro project that illustrates the problem without unnecessary code. Please share with us in a public GitHub repo because we cannot open ZIP attachments, and don't include any confidential content.

here it is https://github.com/davidez/ImageUpload

[rmnaderdev]

I just created a new Blazor Server .NET 8 project and added the example code from here and am running into the same problem.

[rmnaderdev]

Disregard my previous comment. I fixed my issue by adding @rendermode InteractiveServer to the top of my page. After reading through the docs a few times, I realized I had missed the rendermode part at the top.

https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-8.0

[davidez]

Disregard my previous comment. I fixed my issue by adding @rendermode InteractiveServer to the top of my page. After reading through the docs a few times, I realized I had missed the rendermode part at the top.

https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-8.0

Is the image you were uploading above 1MB?

[rmnaderdev]

Disregard my previous comment. I fixed my issue by adding @rendermode InteractiveServer to the top of my page. After reading through the docs a few times, I realized I had missed the rendermode part at the top. https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-8.0

Is the image you were uploading above 1MB?

I was uploading a several GB zip file. After I added @rendermode InteractiveServer, I did not have any issues. So I think this is maybe a non-issue?

[davidez]

Idk, I think that the rendering mode should be inherited from the Program.cs AddInteractiveServerComponents() and AddInteractiveServerRenderMode(), shouldn't it? I can retry tomorrow with that, but I still have questions about this behavior

[davidez]

And the default max file size should be around 128 MB as it is commented in the Program.cs file, but i didn't test it. I mean, that's what the documentation says

[davidez]

Disregard my previous comment. I fixed my issue by adding @rendermode InteractiveServer to the top of my page. After reading through the docs a few times, I realized I had missed the rendermode part at the top. https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-8.0

Is the image you were uploading above 1MB?

I was uploading a several GB zip file. After I added @rendermode InteractiveServer, I did not have any issues. So I think this is maybe a non-issue?

nope, doesn't work adding the rendermode. I also tried with a 1.7 GB file and I got the same result. And I'm not gonna lie, I don't even believe that you tried it if you say it works

[rmnaderdev]

Disregard my previous comment. I fixed my issue by adding @rendermode InteractiveServer to the top of my page. After reading through the docs a few times, I realized I had missed the rendermode part at the top. https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-8.0

Is the image you were uploading above 1MB?

I was uploading a several GB zip file. After I added @rendermode InteractiveServer, I did not have any issues. So I think this is maybe a non-issue?

nope, doesn't work adding the rendermode. I also tried with a 1.7 GB file and I got the same result. And I'm not gonna lie, I don't even believe that you tried it if you say it works

What an odd thing to claim. The whole reason I jumped into this discuss was because I was having the same issue on a project I was working on. I have added the rendermode and it is now working for me. You don't have to believe me. I am just adding what I found to the conversation.

After further testing, I have found that most callback events in pages and components don't work unless you explicitly add the @rendermode InteractiveServer to the page/component OR set the route rendermode to InteractiveServer.

I did add AddInteractiveServerComponents(), but my guess is that it just enables the feature. I am not sure what the default rendermode is, but if I had to guess, I think it is static.

[davidez]

Disregard my previous comment. I fixed my issue by adding @rendermode InteractiveServer to the top of my page. After reading through the docs a few times, I realized I had missed the rendermode part at the top. https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-8.0

Is the image you were uploading above 1MB?

I was uploading a several GB zip file. After I added @rendermode InteractiveServer, I did not have any issues. So I think this is maybe a non-issue?

nope, doesn't work adding the rendermode. I also tried with a 1.7 GB file and I got the same result. And I'm not gonna lie, I don't even believe that you tried it if you say it works

What an odd thing to claim. The whole reason I jumped into this discuss was because I was having the same issue on a project I was working on. I have added the rendermode and it is now working for me. You don't have to believe me. I am just adding what I found to the conversation.

After further testing, I have found that most callback events in pages and components don't work unless you explicitly add the @rendermode InteractiveServer to the page/component OR set the route rendermode to InteractiveServer.

I did add AddInteractiveServerComponents(), but my guess is that it just enables the feature. I am not sure what the default rendermode is, but if I had to guess, I think it is static.

Did you try with the code in my repo? I think you did not, and you said you made it work with that render mode... I spent like two days on this, I opened a stack overflow question about it and two months later I still can't make it work and people here only answered me with nonsense. That's why I said you didn't try it, and I still think I am right

[davidez]

@javiercn What kind of feedback is needed?

[javiercn]

@davidez a minimal repro project as a public github repository that we can use for investigation.

[davidez]

Thank you for filing this issue. In order for us to investigate this issue, please provide a minimal repro project that illustrates the problem without unnecessary code. Please share with us in a public GitHub repo because we cannot open ZIP attachments, and don't include any confidential content.

here it is https://github.com/davidez/ImageUpload

Isn't this what you need? @javiercn

[mkArtakMSFT]

@davidez I just tried out your repro and it failed from the first try. The culprit, however, is in your code. The OpeanReadAsync method accepts an optional maxAllowedSize parameter, for which the default value is 512000. Because the file being uploaded was larger than that, the method was throwing an exception. I tweaked your slightly simply to demonstrate that it works. Here what you need to change it to:

item.OpenReadStream(maxAllowedSize: item.Size)

Hope this helps.

[dotnet-policy-service[bot]]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.