Getting a filestream from a blazor component file upload

I'm tasked with creating an upload form using server side blazor.

This form as well as the file upload has a number of other elements that need to be filled in, such as description, author etc.

I'm thinking that using a template form would be the best approach, esp since I already have a data model that has appropriate properties on it, including an IFormFile for the file to be uploaded.

However, when I "post" this file my UI actually sends it to another service using a rest interface, and this rest interface requires that the data be sent as an "application/multipart-form" data payload, with the file attached as a stream.

What's the best way to get a stream of the uploaded file from the file input component, as reading the documentation doesn't appear that a stream is even available.

For further assistance, here is the test code I've been using to communicate with the API, as you can see the object passed to it has to have it's properties iterated and added to the form, and the file has to be available as a stream:

Hi @shawty,

Indeed the RadzenUpload component does not provide a FileStream object. It posts the file to the value specified in the Path property (usually a controller). The controller receive an IFormFile instance which you can use to get the uploaded file content as a stream. Check the UploadController.cs file which Radzen has generated in your application.

Hi Korchev, if it hands me an IFormFile then I should be able to use that then, thanks.

I'm using the components directly, not the Application designer :slight_smile:

Just a thought, what about the FileInput component? I need the file to be uploaded at the same time as the other form fields and not into it's own controller?

Again viewing the docs for the component, leads me to believe no, but asking just in case there is anything I'm missing.

The RadzenFileInput is bound to a String property - it contains the file content as a DATA URI attribute. You can probably use it and decode the string to a MemoryStream.

hmmm, never thought of that one... I'll give that a try :slight_smile:

HI, I'm struggling to make this work, can someone take a look and see if I'm doing anything wrong.

I've folded some of the elements up to protect my clients data etc, those are just regular text boxes and drop downs bound to the rest of the form.

In my code the FileUploadChange handler NEVER hit's it's breakpoint, and if I breakpoint on the submit button for the form submission, "theFile" is ALWAYS null.

I also tested it with binding the file to the field in my "Employee Attachment" object that is an IFormFIle, and same with that, always null and the event handler never gets hit.

Any insight would be helpful.

Many
Thanks

Here is how our online demo looks like: Blazor FileInput | a free UI component by Radzen

It uses similar code. Check if there are any JS or C# errors.

Hi @korchev , yes there is a Javascript error, I click the file control button, my file browser appears, I select the PDF file I want, click open, then this appears in the console:

There are however, no errors shown at C# level, no exceptions or anything like that.


A few minutes later:

Sorry I apologize, I went back to Rider, and noticed this:

I never hooked up the OnError handler in the control until now, so I've never seen this trap like this.

The args are showing as:

image

I understand the error message, but not the reason why? I know fine well I can encode a PDF file as a base64 string, so I fail to see what the issue is here.

The error handling seems very erratic, sometimes it works, sometimes it errors.

It never sets the variable, the variable is always null, but sometimes it hits the onerror handler with an exception, other times it doesn't, and yet other times it hits the handler 10/20/30 seconds or more later, long after I've hit F5 to continue.

Message is always the same though, unable to read file as base64

How big is the file? RadzenFileInput does not work with larger files because of SignalR payload limitations. Maybe you should use the Blazor built-in InputFile component.

I already thought of that one, and realised after I tested with an 8mb file a long time before, so my test file has been 1 of 3 each of 84k, 132k & 200k

All 3 have the same failure.

I have just found this:

Fileinput cannot upload some images - Radzen.Blazor Components - Radzen

Going to try and see if this helps in any way.

Ok, so increasing the hub limit to 10 * 1024 * 1024 as in the link in my previous reply, actually worked.

These are the files I was using:

It turns out the small 86.4k file was still too big, but the error handler never reported them as too big, it only reported as task cancelled.

It did report as too big when I tried an 8mb file (Prior to changing the size) , so I do suspect you guys have a bug in there somewhere with regards to file size reporting.

I'm going to leave it set where it is for now, as it is possible that files of 10mb may be used with the system.

It does look like the issue was indeed size related though.

Regards
Peter

Further information that may help you, definitely looks like there's something not quite right in the file input component.

Also, no matter what files I upload using file input, no file name is ever shown:

Regards
Shawty

RadzenFileInput has a MaxFileSize property which is different from the Hub options. Also the Blazor runtime does not give any additional information if reading the file via JS Interop fails for some reason.

Ok, will take a look at that, what about getting the file name?

Still getting problems with larger files. The small ones are fine now, but 8mb...

Comes up with the task cancelled error again, just like the smaller ones where, when they where clearly too big for signalr.

File input is declared like this:

image

And startup is configured like this:

As in previous post, file size is clearly less than both figures, anyway, I'm leaving this alone for tonight, I may have to use a different strategy to get the file's uploaded, possibly a raw file blazor upload...

Cheers
Shawty