How to Build a QR Code Scanner in Blazor
Blazor Server is a .NET web framework that runs C# on the server and pushes UI updates to the browser over a SignalR connection. IronQR integrates directly into Blazor Server, enabling server-side QR code scanning from browser-uploaded images without any JavaScript.
In this how-to guide, we'll build a Blazor Server page that accepts an image upload and decodes any embedded QR code using IronQR.
How to Scan a QR Code in Blazor
- Install the IronQR C# library to scan QR codes on the web
- Add an
InputFilecomponent to accept image uploads from the browser - Stream the uploaded file to a temporary path on the server
- Load the image and wrap it in a
QrImageInput - Call
Readand display the decoded value in the Blazor component
Prerequisites
- Visual Studio 2022 with the ASP.NET and web development workload installed
- 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:
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:
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
Private qrImageSrc As String
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 FunctionInputFile.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.
Frequently Asked Questions
What is the IronQR library?
IronQR is a library used to integrate QR code scanning capabilities into applications, such as a Blazor Server app, by handling server-side QR code decoding from images uploaded via the browser.
How do I integrate IronQR into a Blazor Server application?
To integrate IronQR into a Blazor Server app, you need to install the IronQR library through NuGet, use the InputFile component to handle image uploads, and use QrReader.Read() to decode QR codes server-side.
What prerequisites are required to build a QR code scanner with Blazor?
You need Visual Studio 2022 with the ASP.NET and web development workload, and a Blazor Server project targeting .NET 8 or later to build a QR code scanner.
Can I use IronQR without JavaScript in Blazor?
Yes, IronQR allows QR code scanning within a Blazor Server application without requiring JavaScript, as all decoding is handled server-side.
How does IronQR handle image uploads in Blazor?
IronQR processes image uploads by using the InputFile component to stream the file to a server-side temporary path, where it can be decoded.
How do you display the QR code result in Blazor?
Using IronQR in Blazor, the QR code result is displayed in the Blazor component's UI after decoding, by setting the result text fetched from QrReader.Read() to a property that is rendered in the UI.
Can IronQR decode multiple QR codes in a single image?
Yes, IronQR can decode multiple QR codes in a single image by iterating over the results collection instead of using FirstOrDefault().
Where can I download the complete Blazor QR Scanner project?
You can download the complete Blazor QR Scanner project from the link provided in the guide on the Iron Software website.
What does the QrReader.Read method return when decoding QR codes?
The QrReader.Read method returns an IEnumerable
Is the IronQR library available on NuGet?
Yes, the IronQR library is available on NuGet, and you can install it via the NuGet Package Manager Console in Visual Studio.
Curtis Chau holds a Bachelor’s degree in Computer Science (Carleton University) and specializes in front-end development with expertise in Node.js, TypeScript, JavaScript, and React. Passionate about crafting intuitive and aesthetically pleasing user interfaces, Curtis enjoys working with modern frameworks and creating well-structured, visually appealing manuals.
