Using the new Blazor Serverside Preview 4 breaks my upload Component.
Preview 3 I was able to increase the SignalR connection buffer size using
` app.UseRouting(routes =>
{
routes.MapRazorPages();
routes.MapHub<ComponentHub>(
ComponentHub.DefaultPath,
o =>
{
o.ApplicationMaxBufferSize = 102400000; // larger size
o.TransportMaxBufferSize = 102400000; // larger size
})
.AddComponent<App>("app");
});`
In preview 4 it has switched to endpoint routing
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
How would I configure MapBlazorHub();
Related Issue #7884
Try this:
C#
services.AddServerSideBlazor().AddSignalR().AddHubOptions<ComponentHub>(o =>
{
o.MaximumReceiveMessageSize = 102400000;
});
Try this:
services.AddServerSideBlazor().AddSignalR().AddHubOptions(o =>
{
o.MaximumReceiveMessageSize = 102400000;
});
That doesn't seem to resolve the issue. I can confirm its not my code because I made an image under the buffer size and it uploads fine.
Javasciprt error
My javascript code
JsInterop sending back DataUrl as image data.
const readUploadedFileAsText = (inputFile) => {
const temporaryFileReader = new FileReader();
return new Promise((resolve, reject) => {
temporaryFileReader.onerror = () => {
temporaryFileReader.abort();
reject(new DOMException("Problem parsing input file."));
};
temporaryFileReader.onload = () => {
resolve(temporaryFileReader.result);
};
temporaryFileReader.readAsDataURL(inputFile);
});
};
UploadFiles = async (instance, fileInput) => {
const files = Array.from(fileInput.files);
files.map(async image => {
var imagedata = await readUploadedFileAsText(image);
instance.invokeMethodAsync('GetUploadedFiles', imagedata);
});
};
My C# Code
public async Task UploadFile()
{
await JSRuntime.InvokeAsync<object>("UploadFiles", new DotNetObjectRef(this), fileUpload);
}
[JSInvokable]
public void GetUploadedFiles(string message)
{
ImageDataSources.Add(message);
var image = new CreateImageDto();
image.Data = message;
image.Position = ImageDataSources.Count;
image.FileName = Guid.NewGuid().ToString();
CreateImageDtos.Add(image);
StateHasChanged();
}
Are you sure you're hitting a size limit then? How big is the image?
@davidfowl Not very big. Tested with 5kb - 13kb. Before was able to upload 6mb plus images. Looking further into things seems like it could also be that the dataurl string is too long. Simplified test repo is located here https://dev.azure.com/twinnaz/_git/BlazorBug
I've got the same problem. I've investigated that it's not because MaximumReceiveMessageSize. It is impossible to invoke .NET method from javascript if parameters passed to method are to big. I guess, the limit of parameters serialized to JSON during invokeMethodAsync is 4KB. Worked fine before preview 4.
Dedicated server-side project with simple tester on first page to reproduce:
@javiercn assigning this to you as you have couple of similar issues on your plate already: #9683 and #9808.
This can be done today in the same way with endpoint routing.
endpoints.MapHub<ComponentHub>(
ComponentHub.DefaultPath,
o =>
{
o.ApplicationMaxBufferSize = 102400000; // larger size
o.TransportMaxBufferSize = 102400000; // larger size
})
// .AddComponent<App>("app");
For the record, in the future we plan to hide the specific hub we use and expose all the SignalR configuration options on MapBlazorHub.
@javiercn Can you please explain exactly how this can be done today? Adding the snippet above does not work, but I may well be doing something incorrectly.
@javiercn Adding the above code gives error in console.
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<ComponentHub>(
ComponentHub.DefaultPath,
o =>
{
o.ApplicationMaxBufferSize = 102400000; // larger size
o.TransportMaxBufferSize = 102400000; // larger size
});
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
Adding on the BlazorHub doesn't compile.
Compiler Error Message: CS1660: Cannot convert lambda expression to type 'string' because it is not a delegate type
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub<ComponentHub>(
ComponentHub.DefaultPath,
o =>
{
o.ApplicationMaxBufferSize = 102400000; // larger size
o.TransportMaxBufferSize = 102400000; // larger size
});
endpoints.MapFallbackToPage("/_Host");
});
@javiercn @mkArtakMSFT If possible can you provide a working repo to test.
@javiercn that no longer will prevent the size limit from being hit but it's not being hit in this issue.
@javiercn: I pushed your workaround to a new branch
https://github.com/Tewr/Bug9570Repro/tree/MapHubWorkAround/ , but the behaviour is the same as with default setup MapBlazorHub().
Moving this to Preview7 to spend some more time and investigate what's going on here.
I submitted a PR to add overloads that allow configuring this (somehow they got lost).
I expect the issues in json serialization issue to go away with @pranavkm changes
I think we exposed the wrong options here. There are a new set of options in 3.0 to increase the message size
@davidfowl :( what should it be then? This is what we were doing before.
It's on HubOptions which I believe is already exposed:
That鈥檚 fine, but I imagine that is global and this is local to the endpoint. Isn鈥檛 it?
Independent of that setting I would expect it will still be valuable to configure this and other things on the endpoint.
We should not hide the underlying hub endpoint configuration.
That鈥檚 fine, but I imagine that is global and this is local to the endpoint. Isn鈥檛 it?
No, the configuration that was the max buffer size before is just an optimization now.
Independent of that setting I would expect it will still be valuable to configure this and other things on the endpoint.
Sure it's not "bad" to expose this setting, it just doesn't do what you think it does and I'd imagine is going to be much less useful to set in the future.
[EDIT] : I find the solution for preview 7 in another post, i put the solution bellow
pServices.AddServerSideBlazor()
.AddHubOptions(o =>
{
o.MaximumReceiveMessageSize = 102400000;
});
Hi guys, i'm currently under preview 7 (server-side version) and i meet the same problem.
i try to send a base64 string wich represent an image from js to one of my components (with JSInvokable).
I try tu use code you suggest on this post but I have reference problem (maybe this workaround is outdated ?)
endpoints.MapBlazorHub<ComponentHub>(
ComponentHub.DefaultPath,
o =>
{
o.ApplicationMaxBufferSize = 102400000; // larger size
o.TransportMaxBufferSize = 102400000; // larger size
});
I'm unable to resolve ComponentHub. When i check what's expected, it's seem to be a IComponent (so my root Component ?)
I don't understand what can i done now to bypass the problem
thanks for your help !
Most helpful comment
[EDIT] : I find the solution for preview 7 in another post, i put the solution bellow
pServices.AddServerSideBlazor() .AddHubOptions(o => { o.MaximumReceiveMessageSize = 102400000; });Hi guys, i'm currently under preview 7 (server-side version) and i meet the same problem.
i try to send a base64 string wich represent an image from js to one of my components (with JSInvokable).
I try tu use code you suggest on this post but I have reference problem (maybe this workaround is outdated ?)
endpoints.MapBlazorHub<ComponentHub>( ComponentHub.DefaultPath, o => { o.ApplicationMaxBufferSize = 102400000; // larger size o.TransportMaxBufferSize = 102400000; // larger size });I'm unable to resolve ComponentHub. When i check what's expected, it's seem to be a IComponent (so my root Component ?)
I don't understand what can i done now to bypass the problem
thanks for your help !