Html Editor's UploadUrl setup

Hello, I don't know how to setup html editor's UploadUrl in Blazor WebAssembly application?


It doesn't work even I have created a UploadController

[ApiController]
[Route("[controller]")]
public partial class UploadController : Controller
{
    private readonly IWebHostEnvironment environment;

    public UploadController(IWebHostEnvironment environment)
    {
        this.environment = environment;
    }

    [HttpPost("Image")]
    public IActionResult Image(IFormFile file)
    {
        try
        {
            var fileName = $"{Guid.NewGuid()}{Path.GetExtension(file.FileName)}";

            using (var stream = new FileStream(Path.Combine(environment.WebRootPath, fileName), FileMode.Create))
            {
                // Save the file
                file.CopyTo(stream);

                // Return the URL of the file
                var url = Url.Content($"~/{fileName}");

                return Ok(new { Url = url });
            }
        }
        catch (Exception ex)
        {
            return StatusCode(500, ex.Message);
        }
    }
}

Thanks a lot...

no response after I clicked OK...

Hi @BillZheng168816,

Check in your browser developer tools what happens when you upload the image. Is there a HTTP request to upload the image? What is the server response?

    [AllowAnonymous]
    [HttpPost("Image")]

Now It works, but can't display image as the image has saved in server.

This is my upload control:
[AllowAnonymous]
[HttpPost("Image")]

    public IActionResult Image(IFormFile file)
    {
        try
        {
            var fileName = $"{Guid.NewGuid()}{Path.GetExtension(file.FileName)}";
            using (var stream = new FileStream(Path.Combine(environment.ContentRootPath, "Upload", fileName), FileMode.Create))
            {
                // Save the file
                file.CopyTo(stream);
                // Return the URL of the file
                var url = Url.Content($"~/Upload/{fileName}");
                return Ok(new { Url = url });
            }
        }
        catch (Exception ex)
        {
            return StatusCode(500, ex.Message);
        }
    }

Thanks a lot!

Make sure the returned URL is correct and your app is configured to serve files from that location. Our online demos show a working implementation.

Hi Korchev,

I update the code as your demo:

        [HttpPost("upload/image")]
        public IActionResult Image(IFormFile file)
        {
            try
            {
                var fileName = $"{Guid.NewGuid()}{Path.GetExtension(file.FileName)}";

                using (var stream = new FileStream(Path.Combine(environment.WebRootPath, fileName), FileMode.Create))
                {
                    // Save the file
                    file.CopyTo(stream);

                    // Return the URL of the file
                    var url = Url.Content($"~/{fileName}");

                    return Ok(new { Url = url });
                }
            }
            catch (Exception ex)
            {
                return StatusCode(500, ex.Message);
            }
        }

but environment.WebRootPath is null, please let me know how to set environment.WebRootPath?
My app is Blazor webassembly application...

Thanks a lot,
Bill Zheng

Hi Korchev,

I tested your demo code for Blazor Server application, It works well, but my app is Blazor Webassembly application, would you please help me to make it work?

Thanks a lot,
Bill Zheng

If you wan't to upload files you need a server application as well. The default Microsoft template includes the so called hosted web assembly app which has Client and Server directories and two apps. The Radzen IDE generates the same structure.

WebRootPath is available when UseStaticFiles() is used during app startup.

Thank you Korchev and have a good day !