--- title: "Simple Steps to Create Thumbnail Images Using the Blazor File Upload Component" published_at: "2023-06-21T11:36:26+00:00" modified_at: "2026-01-14T12:54:59+00:00" url: "https://www.syncfusion.com/blogs/post/create-thumbnail-images-blazor" excerpt: "This blog explains how to create thumbnail images using the Syncfusion Blazor File Upload component, with code examples." taxonomy_category: - "Blazor" - "Development" - "Web" taxonomy_post_tag: - "Blazor" - "development" - "file upload" - "Web" --- # Simple Steps to Create Thumbnail Images Using the Blazor File Upload Component [Suresh Kumar Palanisamy](https://www.syncfusion.com/blogs/author/suresh-kumar-palanisamy) ![Simple Steps to Create Thumbnail Images Using the Blazor File Upload Component](https://www.syncfusion.com/blogs/wp-content/uploads/2023/06/Simple-Steps-to-Create-Thumbnail-Images-Using-the-Blazor-File-Upload-Component-1.png) The Syncfusion [Blazor File Upload](https://www.syncfusion.com/blazor-components/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. ## Advantages of using thumbnail images 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: - Occupy less space, require less bandwidth, and can be displayed faster than the original full-size images. - Preview images to give users an overview of the media content. - Save storage space and store many images in space-constrained scenarios. Overall, thumbnail images help display and organize images in a format that’s easy to store and download. ## Prerequisites Before getting started, we need to install the following prerequisites in our system: - [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) - [.NET 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) and above - [Blazor templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-6.0&pivots=windows) Let’s see the steps to create thumbnail images using the Blazor File Upload component. ## Step 1: Create a Blazor server-side app First, create a [Blazor server-side app](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) . ## Step 2: Install the required NuGet packages Open [Visual Studio](https://visualstudio.microsoft.com/downloads/) and select **NuGet Package Manager** from the ** Tools** tab. Search for the [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor/) and [System.Drawing](https://learn.microsoft.com/en-us/dotnet/api/system.drawing?view=net-7.0) NuGet packages and then install them. ![Install Syncfusion.Blazor and System.Drawing NuGet packages](https://www.syncfusion.com/blogs/wp-content/uploads/2023/06/Syncfusion.Blazor-and-System.Drawing-NuGet-packages.png) ## Step 3: Import the installed namespaces Now, import the following namespaces in your Blazor project: - [Syncfusion.Blazor.Inputs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.html) including the Blazor File Upload component. - [System.Drawing](https://learn.microsoft.com/en-us/dotnet/api/system.drawing?view=net-7.0) to work with images. - [System.IO](https://learn.microsoft.com/en-us/dotnet/api/system.io?view=net-8.0) to work with file paths. Refer to the following code example. ``` @using Syncfusion.Blazor.Inputs; @using System.Drawing; @using System.IO; ``` ## Step 4: Add the Blazor File Upload component Refer to the following code example to add the Blazor File Upload component to the project. ``` ``` In this code, we have set a **false** value to the [AutoUpload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) property to handle the file-uploading process manually. The [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowedExtensions) property is set to a list of file extensions separated by commas: **.png**, **.jpeg**, and **.jpg**. Then, we added the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event to the uploader and specified the **OnChange** method as the event handler. ## Step 5: Create and save the thumbnails 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploadChangeEventArgs.html) 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](https://learn.microsoft.com/en-us/dotnet/api/system.io.memorystream?view=net-7.0) value of the uploaded file. Then, we set the new width and height to control the size of the thumbnail image. The [Image.GetThumbnailImage](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.image.getthumbnailimage?view=netframework-4.8) 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. ![Selected image with file size 1.3MB](https://www.syncfusion.com/blogs/wp-content/uploads/2023/06/Selected-image-with-file-size-1.3MB.png) Selected image with file size 1.3MB ![Thumbnail image of the selected image with a file size of 12KB](https://www.syncfusion.com/blogs/wp-content/uploads/2023/06/Thumbnail-image-of-the-selected-image-with-a-file-size-of-12KB.png) Thumbnail image of the selected image with a file size of 12KB 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. ## GitHub references For more details, refer to the code example in [the GitHub repository](https://github.com/SyncfusionExamples/creating-thumbnail-image-using-blazor-file-upload) . ## Conclusion 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](https://www.syncfusion.com/account/downloads) page. If you’re not a Syncfusion customer, we invite you to take advantage of our 30-day [free trial](https://www.syncfusion.com/downloads) and explore our range of features. For questions, you can contact us via our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/support/tickets) , or [feedback portal](https://www.syncfusion.com/feedback/) . We are always happy to assist you! ## Related blogs - [Seamlessly Save and Load Reports from SQL Server Database to Blazor Pivot Table](https://www.syncfusion.com/blogs/post/save-load-report-sql-server-to-blazor-pivot-table.aspx) - [Effortlessly Populate Blazor Pivot Table with MongoDB Server Data: A Comprehensive Guide](https://www.syncfusion.com/blogs/post/blazor-pivot-table-with-mongodb.aspx) - [Simple Steps to Integrate OpenAI (ChatGPT) with Syncfusion’s Blazor Rich Text Editor](https://www.syncfusion.com/blogs/post/integrate-chatgpt-blazor-rich-text-editor.aspx) - [Role-Based Authorization in Blazor File Manager: An Overview](https://www.syncfusion.com/blogs/post/role-based-authorization-blazor-file-manager.aspx)