Html Editor's UploadUrl setup

Radzen Studio Blazor WebAssembly
1

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...

2

image
image760×814 27.8 KB

no response after I clicked OK...

3

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?

4 
    [AllowAnonymous]
    [HttpPost("Image")]

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

image
image777×487 26 KB

5

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!

6

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.

7

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

8

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

9

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.

10

Thank you Korchev and have a good day !

11

I am also getting no response after I clicked OK...
What made fix this for you ?

12

Hi @Simply_Hemant,

You can check your browser's network tab to see what HTTP request is made during upload. It will also show any errors.