Mastering Blazor File Uploads & Downloads (Secure & Scalable)

Are you still relying on outdated file upload scripts or insecure download links in your web apps? Blazor might be the game-changer you’re missing.

File handling is essential in modern applications: whether you’re uploading resumes, downloading reports, or managing media. In this post, you’ll explore how Blazor simplifies and secures file operations by integrating frontend and backend logic seamlessly in C#.

Getting Started with File Handling in Blazor

Overview of File Upload/Download in Web Apps

Handling file uploads/downloads has traditionally involved forms, scripts, and a lot of manual validation. Key concerns include:

• Security: Avoiding malware, controlling file types, and preventing path traversal.
• Usability: Ensuring smooth UX and progress feedback.
• Scalability: Handling large files efficiently.

Why Blazor Stands Out for File Management

Blazor, especially Blazor Server and Blazor WebAssembly with .NET backend, allows direct integration of C# logic across client and server. This eliminates the need for JavaScript-heavy workarounds.

Key benefits:

• Full-stack C# with shared validation.
• Built-in components like <InputFile>.
• Easy integration with ASP.NET Core APIs and cloud storage.

Implementing File Uploads in Blazor

Creating the Upload UI with InputFile

Start with a simple upload form using Blazor’s <InputFile>:

<InputFile OnChange="HandleSelected" multiple />

Backend logic:

private async Task HandleSelected(InputFileChangeEventArgs e)
{
    foreach (var file in e.GetMultipleFiles())
    {
        var stream = file.OpenReadStream(maxAllowedSize: 10485760); // 10 MB
        using var memoryStream = new MemoryStream();
        await stream.CopyToAsync(memoryStream);
        // Save to backend or process
    }
}

This efficiently handles multiple file selections and streams them to memory.

Handling File Streams and Storage

You can store files locally, in a database, or cloud:

var filePath = Path.Combine(_env.WebRootPath, "uploads", file.Name);
using var fs = new FileStream(filePath, FileMode.Create);
await fileStream.CopyToAsync(fs);

Replace WebRootPath with cloud storage SDK logic (Azure Blob, AWS S3, etc.) for production-grade scenarios.

Validating File Inputs (Size, Type, Content)

Implement both client and server-side checks:

if (!file.ContentType.StartsWith("image/"))
    throw new InvalidOperationException("Only images are allowed");
if (file.Size > 5_000_000)
    throw new InvalidOperationException("File too large");

Combine with <InputFile accept="image/*"> on frontend.

Preventing Security Risks in File Uploads

Common threats:

• Executable files: Block .exe, .dll, etc.
• Path traversal: Sanitize file names using Path.GetFileName().
• Virus scanning: Integrate with scanning APIs (e.g., ClamAV).

Implementing File Downloads in Blazor

Creating a Download Endpoint

Expose a secure endpoint in your controller:

[HttpGet("download/{fileName}")]
public IActionResult Download(string fileName)
{
    var path = Path.Combine(_env.WebRootPath, "uploads", fileName);
    var mime = MimeTypes.GetMimeType(fileName);
    return PhysicalFile(path, mime, fileName);
}

Triggering Downloads in the UI

Use navigation or JS interop:

<button @onclick="() => DownloadFile('sample.pdf')">Download</button>

private void DownloadFile(string fileName)
{
    NavigationManager.NavigateTo($"/download/{fileName}", true);
}

Handling Authorization and Access Control

Use [Authorize] attributes and claims-based checks:

[Authorize(Roles = "Admin")]

Add policy checks in controller or Razor component to ensure only permitted files are served.

Integrating Backend Services for File Management

Using ASP.NET Core APIs with Blazor

Expose upload/download logic as Web API endpoints:

[HttpPost("upload")]
public async Task<IActionResult> Upload(IFormFile file) { ... }

Then call them from Blazor with HttpClient.

Storing Files in the Cloud (Azure, AWS, etc.)

Example with Azure Blob Storage:

var blobClient = new BlobContainerClient(connStr, containerName);
await blobClient.UploadBlobAsync(file.Name, fileStream);

Configure access keys and use DefaultAzureCredential in production.

Best Practices and Final Tips

Performance Optimization

• Stream large files instead of buffering.
• Use progress bars with OnProgress.
• Apply lazy loading where possible.

Logging and Monitoring File Activity

• Use Serilog or built-in ILogger for audit logs.
• Log file names, sizes, users, and timestamps.

Testing and Debugging File Operations

• Use tools like Postman for API tests.
• Mock file uploads in unit tests with FormFile objects.
• Test different MIME types and edge cases.

FAQ: Common Questions About File Handling in Blazor

Conclusion: Secure and Seamless File Management in Blazor

From quick prototypes to enterprise apps, Blazor gives you power and security when dealing with file uploads and downloads. You can handle files entirely in C#, apply shared validation, and scale with cloud services. Don’t wait to modernize your approach—try it in your next Blazor project and experience the difference.

Have you already implemented file handling in Blazor? What challenges did you face? Drop your thoughts in the comments!