Aspnetcore: Uploading/Reading files?

[DNF-SaS]

Hi,

does any best practice for uploading files into a Blazor-Application exist?
I guess, using the IFormFile Interface from AspNetCore.Http will not work?

Regards, Sascha

[SteveSandersonMS]

It's not something we've built anything special for. In general you can use arbitrary HTML elements inside a Blazor component, so you can use <input type=file> to do normal full-page-refresh uploads.

Submitting the file to the server via an HttpClient request isn't currently supported, though I'll add it to the tracking issue aspnet/Blazor#479.

[RemiBou]

@SteveSandersonMS now that the linked issue is closed, any thought on how we culd achieve file upload without full page refresh ?

[SteveSandersonMS]

You can use HttpClient to do a POST or PUT request containing the data you need. If you want to get that data from an <input type=file>, you'd have to get the binary data via something like https://stackoverflow.com/a/32556944 using JS interop.

[creeeeeg]

Could you use something like IFormFile to get access to the [CopyTo, CopyToAsync,OpenReadStream] methods without having to go out to the JS interop?

I'm not really sure, just wondering... Blazor newbie here.

[RemiBou]

@creeeeeg IFormFIle will be used on server side, but we need to get ths file content first and build the http request.

@SteveSandersonMS the problem with this solution is that a byte[] is not serializable in json. I can make a string from the byte[] but that would mean the data would be manipulated as the following forms : byte[] => string => json (interop) => byte[]. At this point it's better to do the data posting directly in js

[SteveSandersonMS]

@RemiBou Is that really a blocking problem? The data transfer is all local to the process and in memory. The buffer is going to have to be copied regardless (to get from the JS memory space into the .NET heap), so if that happens via base64 representation it's not really a major difference. The base64 representation will consume an extra ~30% memory but for file uploads the total amount of data is not typically huge, and it's not like that extra data is being sent over the network.

[RemiBou]

Ok got it thanks

[RemiBou]

I managed to do it, you can find the details here https://remibou.github.io/Upload-file-with-Blazor/

[rathga]

Just checking in on this given we are 10 months down the road :) @RemiBou @SteveSandersonMS is RemiBou's solution still the best way of going about this for now?

[SteveSandersonMS]

The JS interop APIs have changed (e.g., there's no more RegisteredFunction), but the overall principles still look good.

[Tirumalesh8686]

"https://github.com/RemiBou/Toss.Blazor"

Im trying to run the code from above link.....I resolved most of the errors but still there is a error coming up saying
Severity Code Description Project File Line Suppression State
Error: Could not find file 'D:\User\Toss.Blazor-master\Toss.Client\binx64\Release\netstandard2.0\Toss.Client.dll'. Toss.Server C:\Program Files\dotnet\sdk\3.0.100-preview8 013656\Sdks\Microsoft.NET.Sdk.Razor\build\netstandard2.0\Microsoft.NET.Sdk.Razor.MvcApplicationPartsDiscovery.targets 54

Can u help me resolve this???

[danroth27]

@Tirumalesh8686 I think that typically means the client project failed to build. What happens if you just try to build Toss.Client.dll?

[Tirumalesh8686]

Im getting the above mentioned error when im trying to build Toss.Server....

When im building the Toss.Client...I got the folowing warnings...

NETSDK1080 A PackageReference to Microsoft.AspNetCore.App is not necessary when targeting .NET Core 3.0 or higher. If Microsoft.NET.Sdk.Web is used, the shared framework will be referenced automatically. Otherwise, the PackageReference should be replaced with a FrameworkReference. Toss.Tests.E2E
C:\Program Files\dotnet\sdk\3.0.100-preview8-013656\Sdks\Microsoft.NET.Sdk\targets\Microsoft.NET.Sdk.DefaultItems.targets 154

NETSDK1080 A PackageReference to Microsoft.AspNetCore.App is not necessary when targeting .NET Core 3.0 or higher. If Microsoft.NET.Sdk.Web is used, the shared framework will be referenced automatically. Otherwise, the PackageReference should be replaced with a FrameworkReference. Toss.Tests
C:\Program Files\dotnet\sdk\3.0.100-preview8-013656\Sdks\Microsoft.NET.Sdk\targets\Microsoft.NET.Sdk.DefaultItems.targets 154

[danroth27]

@Tirumalesh8686 That sounds like the client project is not setup correctly. Can you share the client project file?

[Tirumalesh8686]

"https://github.com/RemiBou/Toss.Blazor"

All required files are from the above link..........
(And Im using ASP.Net Core SDK 3.0 preview8)

[RemiBou]

I think this is not the right place for this issue, can you post it on the Toss repo ? I'll have a look. Thanks @danroth27

[River39]

How would this be done with blazor serverside (with out a page load)? the interop doesn't like the file size. all i can come up with for now is do a httppost from javascript (and return an id with interop to query the file to continue the process of the application.)