Upload and resize an image natively with ASP.NET Core 🖼️

I have blogged about upload and resizing with ASP.NET Core already: Upload and resize an image with ASP.NET Core and ImageSharp. With this post, I want to show a simple approach for uploading and resizing images with ASP.NET Core that doesn't require any external libraries. The solution may not be so configurable as when using ImageSharp, but sufficient for simple scenarios.

ASP.NET (classic) developers may remember the WebImage class. It was a great helper when dealing with uploaded images on a website. The WebImage class was never ported to ASP.NET Core, but there's still all of the graphics stuff in the System.Drawing namespace.

Let's start by including an upload form on an ASP.NET Core Razor Page. For this example I simply created a new ASP.NET Core MVC website from the default template. The process has been documented multiple times on this blog already and Microsoft has a lot of examples too, why I don't want to repeat it here. Include a form on the frontpage (index.cshtml):

<form method="post" enctype="multipart/form-data">
    <input type="file" name="file" accept=".png, .jpg, .jpeg, .gif" />
    <input type="submit" />
</form>

The form includes a file picker and a submit button. The enctype attribute needs to be set to multipart/form-data for the browser to include the file in the request. By specifying file extensions in the accept attribute, I make sure that the user picks only image files.

Next, include a new endpoint in the HomeController class accepting the file post:

[HttpPost]
public IActionResult Index(IFormFile file)
{
    var image = Image.FromStream(file.OpenReadStream());
    var resized = new Bitmap(image, new Size(256, 256));
    using var imageStream = new MemoryStream();
    resized.Save(imageStream, ImageFormat.Jpeg);
    var imageBytes = imageStream.ToArray();

    // Store imageBytes somewhere

    return Redirect("/");
}

The method accepts the posted file through the IFormFile interface. Notice the parameter name file which needs to match the name attribute in the HTML form.

Several classes from the System.Drawing and System.Drawing.Imaging namespaces are used to load the file into memory and resize it. You will need to install the System.Drawing.Common NuGet package if not already included in your project.

Let's go through the code line by line. The image is loaded into memory using the Image.FromStream method. Resizing an Image can be done in a range of ways. The easiest method is to create a new Bitmap object from the in-memory image. When creating the Bitmap object, you assign the new dimension in the Size parameter. Finally, the resized Bitmap is written to a byte array.

Before redirecting to the front page, I have added a comment (// Store imageBytes somewhere). Here you need to decide how and where the uploaded and resized image should be stored. This will depend on your system and available services but could be Azure Blob Storage, AWS S3, or similar. Here's a simple example of storing files on disk:

using (var stream = new FileStream(
    "profile.jpg", FileMode.Create, FileAccess.Write, FileShare.Write, 4096))
{
    stream.Write(imageBytes, 0, imageBytes.Length);
}

(For more examples of how to write files check out the post: How to write to a file with C# - StackOverflow doesn't get it right)

That's it. As shown in the post, uploading and resizing images in ASP.NET Core can be achieved with just a few lines of code. This will cover basic scenarios. When needing more complex features like controlling the quality, rotating images, and more, check out the amazing ImageSharp package.

elmah.io: Error logging and Uptime Monitoring for your web apps

This blog post is brought to you by elmah.io. elmah.io is error logging, uptime monitoring, deployment tracking, and service heartbeats for your .NET and JavaScript applications. Stop relying on your users to notify you when something is wrong or dig through hundreds of megabytes of log files spread across servers. With elmah.io, we store all of your log messages, notify you through popular channels like email, Slack, and Microsoft Teams, and help you fix errors fast.

See how we can help you monitor your website for crashes Monitor your website