Open Closed

IList<IFormFile> is empty when using Blazor UI to upload file but returns file if using Swagger UI #2299

User avatar
0
Sturla created

For some reason I can't get data from Blazor to a controller but I can through SwaggerUI when using this Syncfusion File Upload component.

Looks like it works in Blazor (but doesn't)

When in Blazor it only looks like I successfully upload a file

when in reality 0 file data gets transferred with no errors anywhere.. (nb.I have tried all kinds of attributes and [FromForm] etc that I seen suggested around the internet)

Works in SwaggerUI

But it does WORK if I use the SwaggerUI

here you can see that I get content with using SwaggerUI

The question

What is going on here and what do I need to do to make this work?

  • ABP Framework version: v4.4.4
  • UI type: Blazor WASM
  • DB provider: EF Core
  • Identity Server Separated: yes
Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Go to accepted answer
17 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    Can you try using IRemoteStreamContent.

    public void Save(IList<IRemoteStreamContent> uploadFiles)
{
   .....
}
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Sturla created

    Sorry that doesn't work. I have tried every mutation of that. I just don't understand that it works with SwaggerUI but not Blazor if there is no setting or something I need to configure...

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Sturla created

    I have just updated my demo repo with the code for you to try out. Just F5 and upload file with Browse

    Here is the Blazor code and here is the API that gets hit but is always empty (except with SwaggerUI).

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    Thanks for the demo, I will check it.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
    1
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    The point is ID property, you need to change the API parameter name

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Sturla created

    Ok ok that was not obvious so thank you so much!

    But should I use IList<IFormFile> or IList<IRemoteStreamContent> because both work?

    Is there any benefit for me using IList<IRemoteStreamContent> here?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    Yes, IList<IFormFile> and IList<IRemoteStreamContent> both work.

    Is there any benefit for me using IList<IRemoteStreamContent> here?

    IRemoteStreamContent work with dynamic/static proxy system.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
    1
  • User Avatar
    0
    Sturla created

    Thank you! I'll then use IRemoteStreamContent Now closing this

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Sturla created

    One more related question, how can I add custom header to the response?

    This doesn't work in the controller Response.Headers.Add("BlobName", "content"); but I can still manipulate the response like with Response.ContentType = "THIS IS RETURNED!!"

    public virtual async Task Save(IList<IRemoteStreamContent> UploadRecording) 
{
    try
    {
        Response.Headers.Add("CustomHeader", "someContent"); //<-- Isn´t returned!
        Response.ContentType = "THIS IS RETURNED!!"; //<-- BUT this is!
    }
    catch (Exception e)
    {
        Response.Clear();
        Response.StatusCode = 204;
        
        Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload";
        Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
    }
}

    Here in Blazor I'm trying to get the response back when successfully uploaded a file to the controller.

    I'm just going after the Syncfusion example so there must be something else I need to do ?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Can you share the HTTP response detail (include header and body)?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Sturla created

    Here it is but you can also try it out your self with the demo just as before (I had updated it to try to return the headers)

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    It is already included in the headers.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Sturla created

    Ok didn’t see it because I was just looking at the response in code. Then the method Im using there to get the headers is not a good one (just using Syncfusion code example)

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Sturla created

    Yes I can't see that its returned in their SuccessEventArgs. Any idea?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Sturla created

    Ok I found an issue talking about this here

    .. in the Blazor WASM application, there is no need to use cookies for authentication. So browser cross origins, headers are removed, and the response headers are not returned in the success event.

    and then says

    As a result, we recommend calling the AllowCredentials() method, as shown in the code snippet below, to allow header configuration in the startup page.

    But my ConfigureCors() is just the same (similar)

    But something must be stripping out the headers so any idea?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Sturla created

    OK I found out what is stripping the headers away

    WithAbpExposedHeaders()

    if I swap that out with

    WithExposedHeaders("*")

    I get all the headers.

    But what does that mean and is that a viable sultion?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Sturla created

    Finally found this out... you need to add WithExposedHeaders("customheader")for all the headers you want to include. Now this is being returned!

    Closing this

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Assignee
No one
Labels
None yet
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 21, 2026, 06:18
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.