ASP.NET Core Blazor file uploads

ASP.NET Core’s Blazor provides a modern, component-based architecture for developing interactive web applications. One of its powerful features is handling file uploads with minimal fuss. This blog post will walk you through the process of setting up file uploads in your Blazor application, ensuring your journey in creating a feature-rich, user-friendly app remains smooth.

Introduction to File Uploads in Blazor

Blazor makes it a breeze to accept file uploads, providing an intuitive approach to handle user interaction. At the heart of this feature is the <InputFile> component, an integral part of Blazor’s component library.

The syntax for utilizing this component is straightforward. You can use the OnChange attribute to specify an event callback, which will be triggered when the user selects a file. To allow multiple file selections, simply add the multiple attribute as shown below:

<InputFile OnChange="@LoadFiles" multiple />

Next, let’s dive into the LoadFiles method, which is invoked when the user selects a file (or files) to upload.

@code {
    private void LoadFiles(InputFileChangeEventArgs e)
    {
        ...
    }
}

InputFileChangeEventArgs gives you access to the selected files. You can then manipulate the file data according to your needs.

Handling File Streams

One common requirement during file uploads is to write the uploaded file data to disk. The Blazor framework provides a convenient method, OpenReadStream(), that returns a Stream. This stream can then be copied to a FileStream to write the data to disk.

Here is a sample code snippet for this:

await using FileStream fs = new(path, FileMode.Create);
await browserFile.OpenReadStream().CopyToAsync(fs);

In this snippet, path is the destination path where the file will be stored, and browserFile is an instance of IBrowserFile representing the uploaded file.

Integration with Azure Blob Storage

If you are using Azure Blob Storage for storing files, Blazor’s integration with Azure makes it easy to upload the file directly. Here’s how you can do this:

await blobContainerClient.UploadBlobAsync(
    trustedFileName, browserFile.OpenReadStream());

blobContainerClient is an instance of BlobContainerClient representing the Azure Blob Storage container, and trustedFileName is the name under which the file will be stored.

Limiting File Sizes

Sometimes, you may want to limit the size of the files that the users can upload. Blazor provides a neat way to do this. You can use the maxAllowedSize parameter in the OpenReadStream method:

// accept a file upto 307200 bytes (300kb) of size
await myFile.OpenReadStream(maxAllowedSize: 1024 * 300).ReadAsync(buffers);

This code will allow only files of size up to 300 KB to be uploaded. If a user tries to upload a larger file, an exception will be thrown.

Wrapping Up

The ability to handle file uploads effectively and efficiently is a key aspect of many web applications. ASP.NET Core Blazor simplifies this process with its robust, developer-friendly components and methods, making file uploads not only functional but also a cinch to implement. Whether you are writing files to disk or using Azure Blob Storage for handling your uploads, Blazor has got you covered. Happy coding!

Check Authorization Rules Programatically in ASP.NET Blazor

_Imports.razor

@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization

Pages/ProceduralLogic.razor:

@page "/procedural-logic"
@inject IAuthorizationService AuthorizationService

<h1>Procedural Logic Example</h1>

<button @onclick="@DoSomething">Do something important</button>

@code {
    [CascadingParameter]
    private Task<AuthenticationState>? authenticationState { get; set; }

    private async Task DoSomething()
    {
        if (authenticationState is not null)
        {
            var authState = await authenticationState;
            var user = authState?.User;

            if (user is not null)
            {
                if (user.Identity is not null && user.Identity.IsAuthenticated)
                {
                    // ...
                }

                if (user.IsInRole("Admin"))
                {
                    // ...
                }

                if ((await AuthorizationService.AuthorizeAsync(user, "content-editor"))
                    .Succeeded)
                {
                    // ...
                }
            }
        }
    }
}

References
https://learn.microsoft.com/en-us/aspnet/core/blazor/security/?view=aspnetcore-6.0#procedural-logic

Create Admin Account on ASP.NET Blazor Startup

public class StartupWorker: BackgroundService
{
    private readonly IServiceProvider _serviceProvider;
    private static readonly string[] Roles = { "Admin", "Manager", "Member" };
    
    public StartupWorker(IServiceProvider serviceProvider)
    {
        _serviceProvider = serviceProvider;
    }
    
    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        await CreateRoles();
        await CreateAdmin();
    }

    private async Task CreateRoles()
    {
        using var serviceScope = _serviceProvider.GetRequiredService<IServiceScopeFactory>().CreateScope();
        var roleManager = serviceScope.ServiceProvider.GetRequiredService<RoleManager<IdentityRole>>();
        foreach (var role in Roles)
        {
            if (!await roleManager.RoleExistsAsync(role))
            {
                await roleManager.CreateAsync(new IdentityRole(role));
            }
        }
    }

    private async Task CreateAdmin()
    {
        using var serviceScope = _serviceProvider.GetRequiredService<IServiceScopeFactory>().CreateScope();
        var userManager = serviceScope.ServiceProvider.GetRequiredService<UserManager<ApplicationUser>>();
        var user = await userManager.FindByNameAsync("admin");

        if (user == null)
        {
            var identity = new ApplicationUser("admin") { FirstName = "Admin", LastName = "" };
            var password = "12345";
            await userManager.CreateAsync(identity, password);
            await userManager.AddToRoleAsync(identity, "Admin");
        }
    }
}

References
https://learn.microsoft.com/en-us/aspnet/core/security/authorization/secure-data?view=aspnetcore-7.0

Add Role services to Identity in ASP.NET Blazor

var builder = WebApplication.CreateBuilder(args);

var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
builder.Services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlServer(connectionString));
builder.Services.AddDatabaseDeveloperPageExceptionFilter();

builder.Services.AddDefaultIdentity<IdentityUser>(
    options => options.SignIn.RequireConfirmedAccount = true)
    .AddRoles<IdentityRole>()
    .AddEntityFrameworkStores<ApplicationDbContext>();

References
https://learn.microsoft.com/en-us/aspnet/core/security/authorization/secure-data?view=aspnetcore-7.0
https://stackoverflow.com/questions/52522248/store-does-not-implement-iuserrolestoretuser-asp-net-core-identity

Detect Online Users using Circuit Handler in ASP.NET Blazor Server

public class UserCircuitHandler : CircuitHandler
{
    private readonly IHttpContextAccessor _httpContextAccessor;

    public UserCircuitHandler(IHttpContextAccessor httpContextAccessor)
    {
        _httpContextAccessor = httpContextAccessor;
    }

    public override async Task OnConnectionUpAsync(Circuit circuit,
        CancellationToken cancellationToken)
    {
        var httpContext = _httpContextAccessor.HttpContext;
        var userAgent = httpContext.Request.Headers["User-Agent"];
        string uaString = userAgent.ToString();
        var uaParser = Parser.GetDefault();
        ClientInfo c = uaParser.Parse(uaString);
        Console.WriteLine(httpContext.User.Identity.Name);
    }

    public override async Task OnConnectionDownAsync(Circuit circuit,
        CancellationToken cancellationToken)
    {
        var httpContext = _httpContextAccessor.HttpContext;
        var userAgent = httpContext.Request.Headers["User-Agent"];
        string uaString = userAgent.ToString();
        var uaParser = Parser.GetDefault();
        ClientInfo c = uaParser.Parse(uaString);
        Console.WriteLine(httpContext.User.Identity.Name);
    }
}

References
https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-7.0#blazor-server-circuit-handler
https://learn.microsoft.com/en-us/aspnet/core/blazor/security/server/additional-scenarios?view=aspnetcore-7.0#circuit-handler-to-capture-users-for-custom-services

Apply Authorization to All Pages in Blazor

Program.cs

builder.Services.AddAuthorization(options =>
{
    options.FallbackPolicy = new AuthorizationPolicyBuilder()
        .RequireAuthenticatedUser()
        .Build();
});

builder.Services.ConfigureApplicationCookie(options =>
{
    options.ExpireTimeSpan=TimeSpan.FromDays(14);
    options.SlidingExpiration = true;
    options.Cookie.Name = "BI";
    options.Cookie.HttpOnly = true;
    options.LoginPath = "/Login";
    options.LogoutPath="/Logout";
});

To apply authorization to all pages in Blazor, you have to add:

@attribute [Microsoft.AspNetCore.Authorization.Authorize]

…to your _Imports.razor file.

@attribute [Microsoft.AspNetCore.Authorization.AllowAnonymous]

…on pages that don’t require authorization.

References
https://stackoverflow.com/questions/60840986/blazor-redirect-to-login-if-user-is-not-authenticated
https://stackoverflow.com/questions/71434131/blazor-allow-anonymous-for-razor-page
https://stackoverflow.com/questions/50633896/asp-net-core-identity-change-login-url
https://learn.microsoft.com/en-us/aspnet/core/security/authorization/secure-data?view=aspnetcore-7.0

Automatically refresh the page when reconnection fails in ASP.NET Blazor Server

Pages/_Host.cshtml:

<body>
    ...

    <div id="reconnect-modal" style="display: none;"></div>
    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script src="boot.js"></script>
</body>

wwwroot/boot.js:

(() => {
  const maximumRetryCount = 3;
  const retryIntervalMilliseconds = 5000;
  const reconnectModal = document.getElementById('reconnect-modal');

  const startReconnectionProcess = () => {
    reconnectModal.style.display = 'block';

    let isCanceled = false;

    (async () => {
      for (let i = 0; i < maximumRetryCount; i++) {
        reconnectModal.innerText = `Attempting to reconnect: ${i + 1} of ${maximumRetryCount}`;

        await new Promise(resolve => setTimeout(resolve, retryIntervalMilliseconds));

        if (isCanceled) {
          return;
        }

        try {
          const result = await Blazor.reconnect();
          if (!result) {
            // The server was reached, but the connection was rejected; reload the page.
            location.reload();
            return;
          }

          // Successfully reconnected to the server.
          return;
        } catch {
          // Didn't reach the server; try again.
        }
      }

      // Retried too many times; reload the page.
      location.reload();
    })();

    return {
      cancel: () => {
        isCanceled = true;
        reconnectModal.style.display = 'none';
      },
    };
  };

  let currentReconnectionProcess = null;

  Blazor.start({
    reconnectionHandler: {
      onConnectionDown: () => currentReconnectionProcess ??= startReconnectionProcess(),
      onConnectionUp: () => {
        currentReconnectionProcess?.cancel();
        currentReconnectionProcess = null;
      },
    },
  });
})();

References
https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-7.0#automatically-refresh-the-page-when-reconnection-fails-blazor-server

Dynamically-rendered ASP.NET Core Razor components

<DynamicComponent Type="@componentType" Parameters="@parameters" />

@code {
    private Type componentType = ...;
    private IDictionary<string, object> parameters = ...;
}
<DynamicComponent Type="@typeof({COMPONENT})" @ref="dc" />

<button @onclick="Refresh">Refresh</button>

@code {
    private DynamicComponent? dc;

    private Task Refresh()
    {
        return (dc?.Instance as IRefreshable)?.Refresh();
    }
}

References
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/dynamiccomponent?view=aspnetcore-7.0

Persist State for Prerendered Components in ASP.NET Blazor

Without persisting prerendered state, state used during prerendering is lost and must be recreated when the app is fully loaded. If any state is setup asynchronously, the UI may flicker as the prerendered UI is replaced with temporary placeholders and then fully rendered again.

<body>
    <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />

    ...

    <persist-component-state />
</body>
@page "/weather-forecast-preserve-state"
@implements IDisposable
@using BlazorSample.Shared
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistForecasts);

        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            "fetchdata", out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }
    }

    private Task PersistForecasts()
    {
        ApplicationState.PersistAsJson("fetchdata", forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

References
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/prerendering-and-integration?view=aspnetcore-7.0&pivots=server
https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/persist-component-state?view=aspnetcore-7.0