File Upload Property in Blazor for Kids
When you want users to upload files — such as documents, images, or PDFs — you can use a FileProperty. This property type allows users to select a file from their device, and the framework takes care of the upload process for you. It's useful for scenarios like attaching resumes, uploading reports, or saving any kind of document. The only thing stored in your property is the file reference, like a filename or a relative path, not the file content itself.
For example, the Document property can be created using AddFileProperty. Once set up, it shows a file upload input in the UI. The framework handles the file upload behind the scenes, and your app just saves the reference. You can configure this property using general options like labels, tooltips, visibility, or validation rules. It also supports file-specific settings — such as restricting file types (e.g., only PDFs), setting a maximum file size, or choosing where uploaded files are stored. This gives you full control while keeping the user experience smooth and simple.
publicpartialclassEmployee:IBkEntity<Employee,ApplicationDbContext>
{
publicvoidBkConfiguration(IBkEntityDesigner<Employee,ApplicationDbContext>designer)
{
// Note: The AddFileProperty method defines a file input.// The framework handles file selection and upload automatically.// The property stores only the file path or name, not the file content. designer.Properties.AddFileProperty("Document",c=>
{
// Sets the label displayed next to the file input. c.Label("Document");
// Adds a tooltip that appears when hovering over the file input. c.ToolTip("Upload a document");
// Restricts the allowed file types using MIME extensions or file extensions.// Multiple types can be separated by commas. c.FileTypes(".pdf, .xls, .xlsx");
// Sets the maximum file size allowed for upload in bytes.// Example: 2MB = 1024 * 1024 * 2 c.MaxFileSize(1024*1024*2);
// Specifies the relative path to the folder where uploaded files will be stored. c.PathToFolder("/uploads");
// Sets the placeholder text inside the file input (note: mostly cosmetic for file pickers). c.PlaceHolder("Choose a file");
// Applies a custom CSS class to the file input for styling purposes. c.CssClass("file-upload-control");
// Hides the file input from the form by default. c.HideEditor();
// Hides the file column in the grid view by default. c.HideGridViewColumn();
// Sets the tab order for the editor in the form. c.TabIndex(6);
// Adds a validation rule based on the value (e.g. file name or path). c.ValidationRuleValue(value=>!string.IsNullOrWhiteSpace(value),"A document must be selected","ValidateFileNotEmpty");
// Adds a model-based validation rule.// Example: file is required only if a checkbox is true. c.ValidationRuleModel(model=>!model.RequiresDocument||!string.IsNullOrWhiteSpace(model.Document),"Document is required when 'Requires Document' is checked","ValidateFileConditionally");
// Adds a custom validation rule that uses the database context.// Example: prevent duplicate file names for the same user. c.ValidationRuleUsingDbContext((dbContext,model)=>
{
return!dbContext.Uploads.Where(x=>x.UserId==model.UserId&&x.Id!=model.Id).Any(x=>x.Document==model.Document);
},"A file with the same name already exists","ValidateUniqueDocument");
// Applies a built-in validation attribute (e.g., RequiredAttribute). c.ValidationRuleUsingExistingAttribute(newRequiredAttribute());
});
}
}
⚠️ Important: Be Careful When Allowing File Uploads
Enabling file uploads in your application introduces serious responsibilities, especially regarding security, storage, and application structure:
- Security Risk: Uploaded files can be dangerous if not handled properly. Malicious users may try to upload executable files, scripts, or disguised viruses. Even if you restrict file types using extensions (e.g., .pdf), that’s not always enough — file content should be validated on the server, and files should never be executed or opened automatically.
- Upload Location: If possible, avoid saving uploaded files inside the application’s root folder (the same folder where your Blazor or ASP.NET app runs). Instead, store them in a folder outside the wwwroot or host them on a separate file server or storage service. This reduces the risk that someone can directly access or execute uploaded files by guessing their URLs.
- Storage Space: File uploads can consume disk space very quickly, especially in long-running applications or multi-user systems. Make sure to set a maximum file size (e.g., 2 MB) and monitor disk usage over time. Consider strategies like auto-deletion, archival, or offloading older files to cloud storage.
- Scalability & Backups: Files stored on disk must be included in your backup plan and may cause complications when scaling the app to multiple servers. If file uploads are a core part of your app, plan from the beginning how to store and serve them safely and efficiently.
📌 If you're just starting out: Keep file uploads simple and well-controlled. Always restrict file types and sizes, sanitize file names, and avoid exposing uploaded files directly to users without validation.
Configuration Options for AddFileProperty
| Method | Description | Parameters |
|---|---|---|
FileTypes |
Defines the allowed file extensions or MIME types for upload.
Multiple values can be separated by commas (e.g., .pdf, .xlsx).
|
string types |
MaxFileSize |
Sets the maximum file size allowed for upload, in bytes.
For example, 1024 * 1024 * 2 equals 2 MB.
|
int maxSizeInBytes |
PathToFolder |
Specifies the relative path where uploaded files should be stored. | string folderPath |
Label |
Sets the label text that appears next to the file input. | string label |
PlaceHolder |
Sets the placeholder text shown in the file input field (cosmetic only). | string placeholder |
ToolTip |
Adds a tooltip shown when hovering over the file input. | string tooltip |
CssClass |
Applies a custom CSS class to the file input field for styling. | string className |
HideEditor |
Hides the file input field from the form by default. | None |
HideGridViewColumn |
Hides the file column from the grid view by default. | None |
TabIndex |
Sets the tab navigation order for the file input. | int tabIndex |
ValidationRuleValue |
Adds a custom validation rule based on the property's value (e.g., file name). | Func<string, bool> rule,string errorMessage,string attributeName |
ValidationRuleModel |
Adds a validation rule using the full model (e.g., conditionally required). | Func<TModel, bool> rule,string errorMessage,string attributeName |
ValidationRuleUsingDbContext |
Defines a custom validation rule using the database context and the model. Useful for enforcing uniqueness or business rules. | Func<DbContext, TModel, bool> rule,string errorMessage,string attributeName |
ValidationRuleUsingExistingAttribute |
Applies an existing .NET validation attribute such as RequiredAttribute. |
ValidationAttribute attribute |