The Syncfusion Blazor File Upload is a component for uploading files, images, documents, audio files, and video files to a server. It works in both WebAssembly and server-side Blazor apps. It simplifies the file-uploading process and enhances productivity with bulk upload, image preview, customizable file size and type restrictions, progress indicators, confirmation messages, and other user-friendly features.
In this blog, we’ll see how to create thumbnail images using the Blazor File Upload component to enhance your user experience and optimize your app’s performance.
A thumbnail image is a miniature version of a larger image. It serves as a preview or a visual summary of the larger image. Thumbnail images:
Overall, thumbnail images help display and organize images in a format that’s easy to store and download.
Before getting started, we need to install the following prerequisites in our system:
Let’s see the steps to create thumbnail images using the Blazor File Upload component.
First, create a Blazor server-side app.
Open Visual Studio and select NuGet Package Manager from the Tools tab. Search for the Syncfusion.Blazor and System.Drawing NuGet packages and then install them.
Now, import the following namespaces in your Blazor project:
Refer to the following code example.
@using Syncfusion.Blazor.Inputs; @using System.Drawing; @using System.IO;
Refer to the following code example to add the Blazor File Upload component to the project.
<SfUploader AutoUpload="false" AllowedExtensions=".png, .jpg, .jpeg" MaxFileSize="2000000"> <UploaderEvents ValueChange="OnChange"></UploaderEvents> </SfUploader>
In this code, we have set a false value to the AutoUpload property to handle the file-uploading process manually. The AllowedExtensions property is set to a list of file extensions separated by commas: .png, .jpeg, and .jpg. Then, we added the ValueChange event to the uploader and specified the OnChange method as the event handler.
Define the OnChange event handler method for the ValueChange event of the File Upload component. This method will be called when the user selects one or more files to upload. We can get the uploaded files inside the ValueChange event handler method as arguments.
Refer to the following code example.
private async void OnChange(UploadChangeEventArgs args)
{
foreach (var file in args.Files)
{
// This line creates a file path using the name of the file.
var path = Path.Combine(
Directory.GetCurrentDirectory(),
"wwwroot", file.FileInfo.Name);
// Create a MemoryStream to write the file to memory.
MemoryStream memoryStream = new MemoryStream();
// Reset the position of the memory stream to the beginning.
memoryStream.Position = 0;
// Calls the OpenReadStream method on the uploaded file to get a read stream.
await file.File.OpenReadStream(long.MaxValue).CopyToAsync(memoryStream);
var image = Image.FromStream(memoryStream);
// Calculate the new width and height of the thumbnail.
int thumbnailWidth = 100;
int thumbnailHeight = 100;
var thumbnail = image.GetThumbnailImage(thumbnailWidth, thumbnailHeight, null, IntPtr.Zero);
thumbnail.Save(path, image.RawFormat);
}
} Here, in the OnChange event handler method, we’ve created a file path (saving path) using the file name and app in the wwwroot directory. Then, we iterated through each file in the Files collection of the UploadChangeEventArgs object.
The OpenReadStream method will be called for each file to get a read stream. The Image object is created from the file data using the MemoryStream value of the uploaded file.
Then, we set the new width and height to control the size of the thumbnail image.
The Image.GetThumbnailImage method is used to create a thumbnail version of the uploaded image, and the Save method is used to save the thumbnail to the specified file path. The second argument in the Save method specifies the format of the image, which should be the same as in the original image.
Refer to the following images.
From the above images, it is evident that by using thumbnails, we can optimize memory consumption and enhance the performance of our Blazor app with ease.
For more details, refer to the code example in the GitHub repository.
Thanks for reading! In this blog, we’ve seen how to create thumbnail images using the Syncfusion Blazor File Upload component. Try out the steps in this blog post and leave your feedback in the comments section below!
For existing customers, the new version of Essential Studio® is now available on the License and Downloads page. If you’re not a Syncfusion customer, we invite you to take advantage of our 30-day free trial and explore our range of features.
For questions, you can contact us via our support forum, support portal, or feedback portal. We are always happy to assist you!