Blazor Server Stream Image Example

[gabephudson]

I wonder if streaming image (or file) data via JS is the best solution? This can also be done by adding a Razor Page to the Blazor Server project and using the traditional "return File()" method in the controller. This allows for simple URL's in an image tag and browser caching. Just a thought when streaming binary data.

To add Razor Page to the project, all one has to do is add app.MapRazorPages(); to Program.cs for routing and we are off to the races.

Document Details

⚠ Do not edit this section. It is required for learn.microsoft.com ➟ GitHub issue linking.

• ID: 66bb1712-60ac-77a6-10d2-f2d795126783
• Version Independent ID: 66bb1712-60ac-77a6-10d2-f2d795126783
• Content: Work with images in ASP.NET Core Blazor
• Content Source: aspnetcore/blazor/images.md
• Product: aspnet-core
• Technology: aspnetcore-blazor
• GitHub Login: @guardrex
• Microsoft Alias: riande

[guardrex]

Hello @gabephudson ... IIRC, it's even simpler than that. IIRC, a Blazor Server app can just call File.OpenRead(@"{PATH}") in a component to get a stream of any file (cross-ref: File Downloads article). I think this article could use a similar tip/approach example.

I'm buried in work at the moment trying to get through Blazor Security node updates. This issue will be tracked by the Blazor project, so it won't get lost. I'll try to get back to it within a couple of weeks. I'll ping u on the PR when it goes up.

Thanks for the issue!

[gabephudson]

Thanks, Guardrex. The issue I'm trying to solve is, once we have a stream (or byte array) on the server side (this could be a local file, database binary, Azure blob, etc.) is how do we stream it to the client as a file/image with the proper content-type? Both articles suggest one has to write the stream to the client using JS interop?

JS streaming works ok for one-time files, but for things like dynamic images (clients can upload their logo for example), it causes one to have to stream all the data for the image each time it's requested. Using a classic controller, the binary data can be streamed and then cached as an image by the browser, so it's not read from the sever each time it's requested.

My goal, for example, is to be able to do something like img src="/image?id=xxxx" from Blazor server and have the "image" component stream down the file to the client as binary data with proper headers/content-type. This can be done with MVC/Razor Pages, but not sure how to have a Blazor component stream binary data? Looks like we have to use JS to accomplish (or add a classic controller like suggested)...
https://stackoverflow.com/questions/68393235/download-file-from-server-with-blazor-app

[guardrex]

Depends on what kind of timing you want for "not read from the sever each time it's requested."

If the goal is to avoid it for component re-renders, can you stream during OnInitialized/OnInitializedAsync once at component initialization? ... and then on-demand in the component's markup/code (button click or via some other code-based trigger) thereafter?

not sure how to have a Blazor component stream binary data

That's what the Stream image data section explains ... with further info over in the other topic on File downloads with streaming.

Just in general ...

the binary data can be streamed and then cached as an image by the browser, so it's not read from the sever each time it's requested

... is highly case specific. It depends on the app's spec, and we focus on the basic use cases so that devs can develop for a specific app's needs from there. I don't think we're missing coverage on how to stream image data, but it's true that we don't elaborate with more advanced cases, such as caching and timing ... or how to use a controller/page in the approach that you described. Let's ask the product unit to see if they think we need more here ...

Pinging @MackinnonBuck to take a look. Mackinnon ... Tanay produced the image streaming content/example for what he thought would be the most common starting point for devs. Do you think we need to add coverage? I'm inclined to say that additional approaches are of the "advanced" variety. Given the workload, I don't think we have the cycles to spend further resources on this subject, but I'll schedule this for work if you want to indicate what you'd like to see covered that isn't here.

[guardrex]

@gabephudson ... We decided to let the devs/community take this approach on if they wish. Tanay put up a general, starting point approach, and we'll just stick with that for now. Thanks for your issue tho.

Mackinnion said that you might want to take a look at dotnet/aspnetcore#25274 WRT general improvements on the subject.