CSV/xlsx File Importer

Radzen Blazor Studio
1

This is an improved version of my File Importer component that makes importing CSV and Excel files into your database more efficient. This update builds on my previous implementation with several enhanced features and better usability.

Key Improvements:

  • Field Mapping Persistence: Save and load your field mapping configurations
  • Exclude Fields Support: Easily exclude specific fields from import (like IDs, timestamps)
  • Better Connection Handling: Improved database connection monitoring and error handling
  • Progress Tracking: Visual progress bar during import operations
  • Enhanced UI: Better organization of mapping tools and import controls

How to Use:

  1. Add the following component to your Radzen Blazor application by copying the following code into a new .razor file (e.g., FileImporter.razor). FileImporter.razor

  2. Use it in a parent page/component that injects the service and passes it down:

In your parent page (e.g., ImportProducts.razor):

@page "/import-products"
@inject MyDataService MyDataService

<PageTitle>Import Products</PageTitle>

<h1>Import Product Data</h1>

<FileImporter
              ServiceInstance="@MyDataService"
              TableName="MyProject.Models.Product"
              CreateMethod="CreateProduct"
              Page="/products" />

Parameter Breakdown:

Parameter Required? Description Example
ServiceInstance Yes The injected instance of your service from the parent component. ServiceInstance="@MyDataService"
TableName Yes The full namespace path to your entity class. TableName="MyProject.Models.Product"
CreateMethod Yes The name of the method on your service that creates entities. CreateMethod="CreateProduct"
ExcludeFields No A list of field names to exclude from the mapping UI and import process. ExcludeFields="@(new List<string> { "Id", "CreatedDate" })"
Page No The URL to navigate to after a successful import. Page="/products"
PageTitle No The title displayed at the top of the import component. PageTitle="Import Product Catalog"
CsvDelimiter No The character used to delimit CSV files (e.g., , or ;). CsvDelimiter=','
ShowDebug No Shows the database connection status panel. Useful for debugging. ShowDebug="true"
StoredProcedure No The name of a stored procedure to execute after a successful import. StoredProcedure="usp_PostImportProcessing"

Implementation Note:

The parent page or component must:

Inject the data service using @inject MyDataService MyDataService

Pass this injected instance to the FileImporter component via the ServiceInstance parameter

The FileImporter component itself does not handle the dependency injection for your data service - it expects to receive an already-initialized instance from its parent.

The component handles all the file parsing, mapping, and error handling for you. It's been tested with various file formats and includes retry logic for database connection issues.

Feedback and suggestions for further improvements are welcome.

2 Likes