How to Build a QR Code Scanner in Blazor

Prerequisites

1. Visual Studio 2022 with the ASP.NET and web development workload installed
2. A Blazor Server project targeting .NET 8 or later

Install IronQR

Install the IronQR library using the NuGet Package Manager Console in Visual Studio. Navigate to Tools > NuGet Package Manager > Package Manager Console and run:

Install-Package IronQR

Alternatively, search for IronQR on NuGet and install the latest version.

Blazor Component Layout

The scanner UI uses Blazor's built-in InputFile component for browser-native file selection, a button to trigger the scan, and a paragraph to display the decoded result. No JavaScript interop is required.

Add a new Razor component Scanner.razor with the following markup:

@page "/scanner"
@using IronQr
@using IronSoftware.Drawing

<h3>QR Code Scanner</h3>

<InputFile OnChange="OnFileSelected" accept="image/*" />

<br /><br />

<button @onclick="ScanQRCode" disabled="@(qrImageSrc == null)">Scan QR Code</button>

<p>Result: @scannedText</p>

Sample Input

Use the QR code below as a test image. Save it to your device, upload it via the file picker in the app, then click Scan QR Code. The decoded value should display as https://ironsoftware.com.

Sample QR code — encodes https://ironsoftware.com

QR Code Scanning with IronQR

When a file is selected, OnFileSelected streams the browser upload to a temporary file on the server. When the scan button is clicked, ScanQRCode loads the file into an AnyBitmap, passes it to QrReader.Read(), and writes the first decoded value to scannedText, which Blazor automatically renders in the component.

Add the following @code block to Scanner.razor:

:path=/static-assets/qr/content-code-examples/how-to/blazor-qr-code-scanner.cs

using IronQr;
using IronSoftware.Drawing;

private string? qrImageSrc;
private string scannedText = string.Empty;

private async Task OnFileSelected(InputFileChangeEventArgs e)
{
    var file = e.File;
    var tempPath = Path.Combine(Path.GetTempPath(), file.Name);
    await using var stream = file.OpenReadStream(maxAllowedSize: 10_000_000);
    await using var fs = File.Create(tempPath);
    await stream.CopyToAsync(fs);
    qrImageSrc = tempPath;
}

private async Task ScanQRCode()
{
    // Load the scanned QR code
    var inputBmp = AnyBitmap.FromFile(qrImageSrc!);
    var imageInput = new QrImageInput(inputBmp);
    var reader = new QrReader();

    // Read the scanned QR code
    var results = reader.Read(imageInput);

    // Check if a result was found
    var firstResult = results.FirstOrDefault();
    if (firstResult != null)
    {
        // Save the QR code value as a string
        scannedText = firstResult.Value;
    }
    else
    {
        scannedText = "No QR code found in the selected image.";
    }
}

Imports IronQr
Imports IronSoftware.Drawing
Imports System.IO
Imports Microsoft.AspNetCore.Components.Forms
Imports System.Threading.Tasks

Private qrImageSrc As String = Nothing
Private scannedText As String = String.Empty

Private Async Function OnFileSelected(e As InputFileChangeEventArgs) As Task
    Dim file = e.File
    Dim tempPath = Path.Combine(Path.GetTempPath(), file.Name)
    Await Using stream = file.OpenReadStream(maxAllowedSize:=10000000)
        Await Using fs = File.Create(tempPath)
            Await stream.CopyToAsync(fs)
        End Using
    End Using
    qrImageSrc = tempPath
End Function

Private Async Function ScanQRCode() As Task
    ' Load the scanned QR code
    Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
    Dim imageInput = New QrImageInput(inputBmp)
    Dim reader = New QrReader()

    ' Read the scanned QR code
    Dim results = reader.Read(imageInput)

    ' Check if a result was found
    Dim firstResult = results.FirstOrDefault()
    If firstResult IsNot Nothing Then
        ' Save the QR code value as a string
        scannedText = firstResult.Value
    Else
        scannedText = "No QR code found in the selected image."
    End If
End Function

InputFile.OpenReadStream streams the uploaded bytes directly to a server-side temp file. AnyBitmap.FromFile decodes the image format, and QrReader.Read returns an IEnumerable<QrResult> with one entry per QR code found. FirstOrDefault safely handles images with no QR code without throwing an exception.

Output

After selecting a QR code image and clicking Scan QR Code, the decoded value renders in the result paragraph below the controls.

Decoded QR code value rendered in the Blazor component

Download the Project

Click here to download the complete BlazorQrScanner project.

Conclusion

IronQR integrates into a Blazor Server application with no JavaScript. InputFile provides browser-native file selection, and QrReader.Read handles decoding entirely on the server. The same pattern scales to scanning multiple QR codes per image by iterating over the full results collection instead of calling FirstOrDefault.

For more on reading QR codes and the available scan modes, see the Read QR Codes from Image and Read QR Codes with Scan Modes guides.