How to use file picker (InputFile) in Blazor .net 5
Finally there is a native way to pick files in Blazor and here is how you should use it…
In general, we use InputFile to pick the file(s), but a real world arrangement will likely need to be a bit more complex.
The InpuFile basically generates input element in HTML and as you may know — you cannot really do any design on it. That is why we have to use button for user interactions, once clicked it will execute click event of InputFile and then once the user chooses the file OnChange event will occur. Also, notice that it is hidden and it has “multiple” which allows user to pick multiple files — if you do not want that, simply remove it.
The file itself will be found in the event arguments (InputFileChangeEventArgs), but there are two ways to access it. First, if you have multiple files you will need to run a foreach loop as shown in the example. Also, you need to provide the file count or you can also limit them in there — the default value is 10. With that, you can access content type and you can also open images and “resize” by providing maximum width and height. Not very useful, but the feature does exist… The better way is to just open a stream and read as you need. It is very important to provide the file size as there is a default value which is terribly tiny. Finally, if you only have a single file, you can simply use e.File and then open get the stream from there.
Join me on Skillshare and take a look at my Blazor course
