Property Image
The ImageProperty is designed for uploading and displaying images directly within your application — such as user profile photos or small visual elements. Unlike FileProperty, which stores only the file path, the ImageProperty saves the actual image content as a byte[] in the database. Because of this, it’s important to be careful with the size of the images you allow users to upload. Storing large images in the database can negatively impact performance over time, especially as your app and user base grow.
We recommend using ImageProperty only for small images like avatars or icons. If your application needs to handle larger images or many images per user — such as photo galleries or product images — it’s better to use FileProperty instead. With FileProperty, the files are stored on disk, and only the reference (like a file name or relative path) is saved in the database. This approach is much more efficient and scalable for handling larger image content.
publicpartialclassEmployee:IBkEntity<Employee,ApplicationDbContext>
{
publicvoidBkConfiguration(IBkEntityDesigner<Employee,ApplicationDbContext>designer)
{
// Note: The AddImageProperty method defines an image upload input.// It uploads the image and stores the file path in the property.// The image is displayed visually after upload. designer.Properties.AddImageProperty("Photo",c=>
{
// Sets the label text that appears next to the image input. c.Label("Photo");
// Adds a tooltip that appears when hovering over the image input. c.ToolTip("Employee Photo");
// Restricts the allowed image file types (file extensions). c.FileTypes(".png, .jpg, .jpeg");
// Sets the maximum allowed file size for the image upload (in bytes).// In this example: 1MB = 1024 * 1024 * 1 c.MaxFileSize(1024*1024*1);
// Defines the recommended image dimensions (width x height in pixels).// The framework may use this for preview sizing or validation hints. c.Dimensions(150,150);
// Marks the image as optional — the user is not required to upload one. c.IsOptional();
// Sets a placeholder or hint (cosmetic only, may show when no image is uploaded). c.PlaceHolder("Upload employee photo");
// Applies a custom CSS class to the image upload editor. c.CssClass("employee-photo");
// Hides the image input from the form by default. c.HideEditor();
// Hides the image column from the grid view by default. c.HideGridViewColumn();
// Sets the tab order for the editor in the form. c.TabIndex(7);
// Adds a custom validation rule based on the property value (e.g., not empty if required). c.ValidationRuleValue(value=>string.IsNullOrWhiteSpace(value)==false,"Photo is required","ValidatePhotoRequired");
// Adds a model-based validation rule.// For example: photo is required only for active employees. c.ValidationRuleModel(model=>!model.IsActive||!string.IsNullOrWhiteSpace(model.Photo),"Photo is required for active employees","ValidatePhotoForActive");
// Adds a validation rule using the database context.// For example: enforce unique image file names per department. c.ValidationRuleUsingDbContext((dbContext,model)=>
{
return!dbContext.Employees.Where(e=>e.DepartmentId==model.DepartmentId&&e.Id!=model.Id).Any(e=>e.Photo==model.Photo);
},"An employee with the same photo already exists in this department","ValidateUniquePhotoInDepartment");
// Applies a built-in .NET validation attribute, such as Required. c.ValidationRuleUsingExistingAttribute(newRequiredAttribute());
});
}
}
Configuration Options for AddImageProperty
| Method | Description | Parameters |
|---|---|---|
FileTypes |
Defines the allowed file extensions for image upload (e.g., .jpg, .png).
|
string extensions |
MaxFileSize |
Sets the maximum image file size in bytes (e.g., 1 MB = 1024 * 1024).
|
int sizeInBytes |
Dimensions |
Specifies the expected width and height (in pixels) of the image. This can be used for previews or validation hints. | int width, int height |
IsOptional |
Marks the image property as optional. If not called, the field may be treated as required by default. | None |
Label |
Sets the label displayed next to the image upload field. | string label |
PlaceHolder |
Sets a placeholder or hint text when no image is uploaded. | string placeholder |
ToolTip |
Adds a tooltip that appears when hovering over the image input. | string tooltip |
CssClass |
Applies a custom CSS class to the image input field for styling. | string className |
HideEditor |
Hides the image editor in the form by default. | None |
HideGridViewColumn |
Hides the image column from the grid view by default. | None |
TabIndex |
Sets the tab order of the image input in the form. | int tabIndex |
ValidationRuleValue |
Adds a custom validation rule based on the image path or value. | Func<string, bool> rule,string errorMessage,string attributeName |
ValidationRuleModel |
Adds a model-level validation rule (e.g., conditional image requirement). | Func<TModel, bool> rule,string errorMessage,string attributeName |
ValidationRuleUsingDbContext |
Adds a validation rule using the database context and model, such as checking uniqueness across records. | Func<DbContext, TModel, bool> rule,string errorMessage,string attributeName |
ValidationRuleUsingExistingAttribute |
Applies a built-in .NET validation attribute, such as RequiredAttribute. |
ValidationAttribute attribute |