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

William Liu 266 Reputation points
2024-04-19T06:48:37.5933333+00:00

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.

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,229 questions
Blazor
Blazor
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 (SqlWork.com) 57,646 Reputation points
    2024-04-19T17:59:33.5666667+00:00

    see min api parameter binding for binding to file uploads:

    https://learn.microsoft.com/en-us/aspnet/core/fundamentals/minimal-apis/parameter-binding?view=aspnetcore-8.0

    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
    2024-04-19T07:08:00.83+00:00

    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" />
    </form>
     
    <button type="button" class="btn btn-primary" @onclick="UploadFile">
        Upload
    </button>
     
    <div id="result"></div>
     
    @code {
        private async Task UploadFile()
        {
            await JSRuntime.InvokeVoidAsync("uploadFile");
        }
    }
    

    exampleJsInterop.js

    window.uploadFile = () => {
        var fd = new FormData(document.getElementById("form1"));
     
        $.ajax({
            url: '/Upload',
            method: 'post',
            data: fd,
            processData: false,
            contentType: false
        }).done(function (response) {
            $("#result").empty;
            $("#result").text(response);
        }).fail(function (jqXHR, textStatus, errorThrown) {
            $("#result").empty;
            $("#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
    {
        [Route("[controller]")]
        [ApiController]
        public class UploadController : ControllerBase
        {
            [HttpPost]
            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";
                }
                else
                {
                    result = "Upload fail";
                }
     
                return result;
            }
        }
    }