How to Load and Save Images in Blazor Image Editor with SQL Server

Many Blazor apps need to store and manage user-uploaded images such as profile photos, documents, gallery items, product images, and more. Developers often struggle with:

• Convert images to database friendly formats.
• Move image bytes between Web API and UI.
• The edited image remains.
• Reopens the image in the client-side editor.
• Handles base64, byte arrays, and stream conversion.

This article shows how to save images as binary data in SQL Server LocalDB, retrieve them with C# and EF Core, and load them into Syncfusion^® Blazor Image Editor for editing. Syncfusion Blazor Image Editor provides built-in tools to rotate, flip, zoom, crop, and annotate images with text, images, and shapes. It also includes filters, adjustment controls, keyboard shortcuts, and touch-optimized interactions, making it a complete image editing component for Blazor.

For storage, SQL Server supports BLOB data via types such as VARBINARY(MAX), a recommended option because the older IMAGE type is deprecated.

Let’s start!

Create a Blazor application

First, create a Blazor WebApp project and install the following NuGet packages in the project, as these packages are a prerequisite for connecting to the database:

• Entity Framework
• Microsoft.EntityFrameworkCore
• Microsoft.EntityFrameworkCore.SqlServer

Create a database in SQL LocalDB

To create an application database, follow these steps:

1. Open SQL Server Object Explorer: In Visual Studio, open View menu and select SQL Server Object Explorer.
2. Create a new database: In the SQL Server Object Explorerfind LocalDB server (you may need to expand the node). Right click on Databases and select Add New Database. Give the new database a name ImageDB and click OK.
3. Create a new table in ImageDB: Expand ImageDB database. Right click on Tables and select Add New Table.
4. Define the table schema: Add a new table named ImageCollections with:
   

   Column	Type	Notes
   Identifier	NVARCHAR(50)	Primary identifier
   Name	NVARCHAR(50)	Original file name
   Image Data	VARBINER (max)	Image bytes

5. Save the table using Renew knob. This structure stores metadata and complete image content.

Connecting the database to the application

That ImageCollections table in ImageDB The database keeps a record of our images. To connect a Blazor app to this database, copy the connection string from ImageDB database properties and add them to appsettings.json submit.

Here’s how you do it in code:

{
    "AllowedHosts": "*",
    "ConnectionStrings": {
        "ImageDbContext": "Data Source=(localdb)\\MSSQLLocalDB;Initial Catalog=ImageDB;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False"
    }
}

Next, create a named model class CustomImageData in a Shared project to represent image data. The class should include properties like Id for unique identifiers, Name for the image name, Description for a brief explanation, and ImageData as a byte array to store image data.

Add this class definition to your project:

public class CustomImageData
{
    public string Id { get; set; }
    public string Name { get; set; }
    public byte[] ImageData { get; set; }
}

Create one DbContext named class ImageDbContext in the Server project Data folder. This class should include a DbSet named property ImageCollections which corresponds to the table name in the database, as seen in the code example below.

public class ImageDbContext : DbContext
{
    public ImageDbContext(DbContextOptions<ImageDbContext> options)
        : base(options)
    {
    }

    public DbSet<CustomImageData> ImageCollections { get; set; }
}

Lastly, register ImageDbContext in Program.cs Server project files.

// ….
builder.Services.AddControllersWithViews();
builder.Services.AddDbContext<ImageDbContext>(options =>
    options.UseSqlServer(
        builder.Configuration.GetConnectionString("DefaultConnection")
    )
);

// ….

Create an API Controller

To access and update image data in the database, create an API controller in Controllers Server project folder. Add a new controller class named ImagesController.

This controller exposes two endpoints for managing image data.

• That GET endpoint (api/Images/{id}) take a picture of ImageCollections table uses its unique identifier and returns a NotFound response if the record does not exist.
• That PUT the endpoint uses the same route to update an existing image with the data provided in the request body. If a matching record is found and the ID matches, the image data is updated and saved; otherwise, new records will be added to the database.

Try this in your project:

using Microsoft.AspNetCore.Mvc;
using BlazorAppDB.Data;
namespace BlazorAppDB.Controller;
{
    [Route("api/[controller]")]
    [ApiController]
    public class ImageController : ControllerBase
    {
        private readonly ImageDbContext _dbContext;

        public ImageController(ImageDbContext dbContext)
        {
            _dbContext = dbContext;
        }

        [HttpPost]
        public IActionResult SaveImage([FromForm] string id, [FromForm] IFormFile imageFile)
        {
            if (string.IsNullOrEmpty(id) || imageFile == null || imageFile.Length == 0)
            {
                return BadRequest("Invalid input");
            }

            using (var memoryStream = new MemoryStream())
            {
                // Copy the uploaded file's content into the memory stream
                imageFile.CopyTo(memoryStream);

                // Convert the memory stream into a byte array
                byte[] imageBytes = memoryStream.ToArray();

                // Check if the image already exists
                var existingImage = _dbContext.ImageCollections.FirstOrDefault(i => i.Id == id);
                if (existingImage != null)
                {
                    // Update existing image
                    existingImage.Name = imageFile.FileName;
                    existingImage.ImageData = imageBytes;
                }
                else
                {
                    // Add new image
                    var imageRecord = new CustomImageData
                    {
                        Id = id,
                        Name = imageFile.FileName,
                        ImageData = imageBytes
                    };
                    _dbContext.ImageCollections.Add(imageRecord);
                }

                _dbContext.SaveChanges();
                return Ok("Image saved successfully");
            }
        }

        [HttpGet("{id}")]
        public IActionResult LoadImage(string id)
        {
            var image = _dbContext.ImageCollections.FirstOrDefault(i => i.Id == id);
            if (image == null)
            {
                return NotFound("Image not found");
            }

            // Convert the byte array to a Base64 string
            var base64Image = Convert.ToBase64String(image.ImageData);
            return Ok(base64Image);
        }
    }
}

To work with the API controller, set up the configuration below Program.cs submit.

// ……
builder.Services.AddControllers();
builder.Services.AddControllersWithViews();
builder.Services.AddServerSideBlazor()
    .AddHubOptions(o =>
    {
        o.MaximumReceiveMessageSize = 102400000;
    });


// …..

app.UseRouting();
app.UseAntiforgery();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});

Designing user interfaces

After setting up the backend, configure the user interface to load and save images using Image Editor and SQL Server LocalDB. Make sure the port number is correct from launchSettings.json in Client projects used in GetAsync And PutAsync method.

You can now render Image Editor components on the page and enable loading and saving of images to the database. For detailed information about the Image Editor components, you can refer to the getting started page. Once the Image Editor is rendered, define two async methods, LoadImageFromDB And SaveImageToDBto manage image data with web API.

• That LoadImageFromDB method retrieves image data from an API endpoint using an HTTP GET request, deserializing the response into a CustomImageData object, and opens the image in the Image Editor component using a base64 string if image data exists.
• That SaveImageToDB method retrieves image data from the Image Editor via the GetImageDataAsync method, which returns a byte array. This byte array is then used to create a CustomImageData object. Objects are serialized to JSON and sent to the API using HTTP PUT requests to update image data in the database. This setting allows to load images from the database and save the edited image data back to the database.

You can now load any image into the image editor, make modifications, and click away Save Image to DB button to save the edited image to the database. The saved and modified image can then be reloaded into the image editor by clicking the “Load Image from DB” button.

Below is the code you need:

@page "/"
@using Newtonsoft.Json
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.ImageEditor
@using System.Text;
@using System.Net.Http
@using System.Net.Http.Headers
@using System.Threading.Tasks
@inject HttpClient HttpClient

<SfImageEditor @ref="imageEditor" Height="550px" />
<SfButton @onclick="SaveImageToDB">Save Image to DB</SfButton>
<SfButton @onclick="LoadImageFromDB">Load Image from DB</SfButton>

@code {
    private SfImageEditor imageEditor;

    // Method to load image from the database
    public async Task LoadImageFromDB()
    {
        var response = await HttpClient.GetAsync("
        if (response.IsSuccessStatusCode)
        {
            var base64Image = await response.Content.ReadAsStringAsync();
            if (!string.IsNullOrEmpty(base64Image))
            {
                await imageEditor.OpenAsync($"data:image/png;base64,{base64Image}");
            }
        }
    }

    // Method to save the image to the database
    public async Task SaveImageToDB()
    {
        if (imageEditor != null)
        {
            var imageBytes = await imageEditor.GetImageDataAsync();
            if (imageBytes != null)
            {
                var formData = new MultipartFormDataContent();
                var imageContent = new ByteArrayContent(imageBytes);
                imageContent.Headers.ContentType = MediaTypeHeaderValue.Parse("image/png");
                formData.Add(imageContent, "imageFile", "image.png");
                formData.Add(new StringContent("1"), "id"); // ID for the image

                var response = await HttpClient.PostAsync(" formData);
                if (response.IsSuccessStatusCode)
                {
                    Console.WriteLine("Image saved successfully");
                }
                else
                {
                    Console.WriteLine($"Error saving image: {response.ReasonPhrase}");
                }
            }
        }
    }
}

To work with the Syncfusion Blazor component, set the configuration in Program.cs file as shown below,

using Syncfusion.Blazor
// ……

builder.Services.AddSyncfusionBlazor();

// ……

The GIF below shows image editing, saving, and loading from the database.

GitHub Reference

For further insight, see the Loading and Saving Images in Blazor Image Editor from a Database example on GitHub.

Blazor’s Syncfusion components can be turned into stunning and efficient web applications.

Try it Free

Conclusion

Thanks for reading! The complete image editing workflow in Blazor becomes much simpler with Syncfusion Blazor Image Editor. With SQL Server as the backend and a clean Web API layer, you can load, edit, and save images reliably, without manually coding complex UI behavior.

This approach increases maintainability, reduces UI bugs, and gives developers a production-grade workflow for handling image content in modern Blazor apps. If you’re exploring powerful UI components for a Blazor project, Image Editor is a powerful option worth evaluating.

If you are a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us via the support forum, support portal, or feedback portal for questions. We are always happy to help you!