Is it able to upload a folder with blazor wasm client and minimal api server?

William Liu 266 Reputation points

I want to upload files and folders recursively throught the wasm client to minimal api server.

I have learned that I can use IFormFile or IFormFileCollection to receive files in minimal api.

A set of technologies in the .NET Framework for building web applications and XML web services.
4,229 questions
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,412 questions
0 comments No comments
{count} votes

Accepted answer
  1. Bruce ( 57,646 Reputation points

    see min api parameter binding for binding to file uploads:

    the browser only supports multiple file selects for upload, not folders.

    1 person found this answer helpful.

1 additional answer

Sort by: Most helpful
  1. SurferOnWww 1,996 Reputation points

    Below is a sample of Blazor Web Assembly (WASM) app which can upload file by using jQuery ajax (I don't know what you mean by "recursively" though):

    enter image description here

    Razor page for file upload

    @page "/fileupload"
    @inject IJSRuntime JSRuntime;
    <h3>File Upload by jQuery Ajax</h3>
    <form id="form1" method="post" enctype="multipart/form-data">
        <input type="file" name="postedfile" />
    <button type="button" class="btn btn-primary" @onclick="UploadFile">
    <div id="result"></div>
    @code {
        private async Task UploadFile()
            await JSRuntime.InvokeVoidAsync("uploadFile");


    window.uploadFile = () => {
        var fd = new FormData(document.getElementById("form1"));
            url: '/Upload',
            method: 'post',
            data: fd,
            processData: false,
            contentType: false
        }).done(function (response) {
        }).fail(function (jqXHR, textStatus, errorThrown) {
            $("#result").text('textStatus: ' + textStatus +
                ', errorThrown: ' + errorThrown);

    Add jQuery.js and exampleJsInterop.js

    enter image description here

    Add script tag to index.html

    enter image description here

    Add controller to Sever project to recive uploaded file

    using Microsoft.AspNetCore.Mvc;
    namespace BlazorWasmCoreHosted.Server.Controllers
        public class UploadController : ControllerBase
            public string Post([FromForm] IFormFile? postedFile)
                string result = "";
                if (postedFile != null && postedFile.Length > 0)
                    string filename = System.IO.Path.GetFileName(postedFile.FileName);
                    // process of uploaded file - Omitted
                    result = $"{filename} ({postedFile.ContentType}) - " +
                        $"{postedFile.Length} bytes Upload Complete";
                    result = "Upload fail";
                return result;