Aspnetcore: Add a file upload component

[mkArtakMSFT]

Introduce a component for file upload. We have a couple of examples of this including @SteveSandersonMS's sample here: http://blog.stevensanderson.com/2019/09/13/blazor-inputfile/

[RemiBou]

It would be easier if there was a class that would handle the js interop. It's 20 LOC but I think it would be easier for everybody to have this built in instead of relying on 3rd party lib. I am not a big fan of builtin JS interop (like a full DOM interaction wrapper), but in this case it would be nice.

[conficient]

Agreed @RemiBou - I liked your blog article on this, by the way 🥇

This is almost "core" functionality and a lot of apps will want to do this, so it would be nice if there was a <UploadFile> component and the necessary JSinterop was embedded in either blazor.webassembly.js or blazor.server.js as appropriate. That way you don't have to import a package to do this.

It won't suit all use cases but those can be implemented custom packages and JSinterop as required.

[ryanelian]

I love this library approach for uploading files to Blazor:

https://github.com/Tewr/BlazorFileReader

It turns file input into readable stream.

I think you guys can improve upon this concept by automatically streaming the input file into a temporary folder.

<form>
    <!-- File automagically gets uploaded when selected, streamed directly into a temporary file / folder transparently. Allow a progress bar for good measure. -->
    <input type="file" @bind-value="MyFile" @progress="PercentageProgress" />
</form>

@code {
    System.IO.FileStream MyFile { set; get; }
    double PercentageProgress { set; get; }
}

[rynowak]

@SteveSandersonMS also made a thing http://blog.stevensanderson.com/2019/09/13/blazor-inputfile/

[etherealjoy]

@SteveSandersonMS also made a thing http://blog.stevensanderson.com/2019/09/13/blazor-inputfile/

I like this. I hope in the future you can take it forward and make it more intuitive and easy to use.
No fancy setup needed, it just works!

[GiantCrocodile]

It would be great if the new component is able to handle multiple files (min/max number of files) and not just a few MB but also bigger files. Drag & drop support would be nice to have.

[SteveSandersonMS]

@GiantCrocodile If you get chance, please try out https://blog.stevensanderson.com/2019/09/13/blazor-inputfile/ and see if that meets your needs. It has the features you mentioned there. We are considering bringing this into the framework.

[GiantCrocodile]

@SteveSandersonMS Thank you for your reply. The mentioned example is one of the most relevant ones for me. I will try/use it for now but it has one or two minor issues I would like to see fixed/enhanced (see bug tracker at https://github.com/SteveSandersonMS/BlazorInputFile/issues). Thus it would be great if we have a solution like that in the official core. I'm sure you guys will do this properly. So far, I'm a newbie user of Blazor but heavily amazed!

Edit: Nevermind, I didn't notice that it's you @SteveSandersonMS; the guy behind that example. Thank you for your great work and the good article! Highly appreciated.

[etherealjoy]

@GiantCrocodile If you get chance, please try out https://blog.stevensanderson.com/2019/09/13/blazor-inputfile/ and see if that meets your needs. It has the features you mentioned there. We are considering bringing this into the framework.

I tried it, and I see it has been updated too :)
No more warnings. Many thanks for the effort.

[hultqvist]

Will this component pass through native file objects that can be passed on to an HTTP request?
As I understand it now the file is read and sent as bytes to the Blazor runtime.

For example when uploading a file, I rather not the content be read in memory of my app.

[SteveSandersonMS]

@hultqvist No, that isn't what this new component is for. If you want to do a traditional HTTP upload, you don't need this new component. You can simply create an <input type=file> within a <form> that uploads to whatever HTTP endpoint you want.

[hultqvist]

@SteveSandersonMS I was thinking of something similar to the Javascript example below where the file is uploaded without reloading the page.

I was looking for a similar approach where the logic is managed with the rest of the C# code.

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});