ImageEdit

The ImageEdit component provides image upload capabilities for Dataverse image columns. It can display a preview of the current image and supports drag-and-drop file selection.

React Blazor

Displaying the Image

Set DisplayImage="true" to show a preview of the uploaded image. When disabled, only the file name and upload control are displayed.

React Blazor

Max File Size

Use MaxFileSize to set the maximum allowed file size in bytes.

React Blazor

Example

A basic ImageEdit bound to an image column.

React example Blazor example React TypeScript Razor
Drop an image here, or click to browse

Configuration Options

Use the controls below to explore the available properties.

React example Blazor example React TypeScript Razor
Drop an image here, or click to browse

File Upload Pre-Processing

If you need to pre-process files before they are saved to Dataverse, use the OnFileUploaded callback to hook into the upload process and apply custom handling to the file.

FileSaveOptions Class

Properties

Name
Type
Default
Description
OnFileUploadedFunc<ColumnFileInfo, Task<FileInfo>>?
An optional callback invoked after a file is uploaded and before it is saved to Dataverse. Receives a Models.ColumnFileInfo containing the file data and the target table/column, and returns a Models.FileInfo with the (potentially modified) file to save. Use this to resize images, convert file formats, scan for viruses, or apply other transformations.
SaveModeFileSaveMode
SaveToTemporaryFolder
The mode used for temporarily storing the file during upload. FileSaveMode.SaveToTemporaryFolder writes the file to a temporary folder on the server before saving to Dataverse. FileSaveMode.Stream streams the file directly to Dataverse without intermediate storage. Defaults to FileSaveMode.SaveToTemporaryFolder.
Name: OnFileUploaded
Type: Func<ColumnFileInfo, Task<FileInfo>>?
Description: An optional callback invoked after a file is uploaded and before it is saved to Dataverse. Receives a Models.ColumnFileInfo containing the file data and the target table/column, and returns a Models.FileInfo with the (potentially modified) file to save. Use this to resize images, convert file formats, scan for viruses, or apply other transformations.
Name: SaveMode
Type: FileSaveMode
Default: SaveToTemporaryFolder
Description: The mode used for temporarily storing the file during upload. FileSaveMode.SaveToTemporaryFolder writes the file to a temporary folder on the server before saving to Dataverse. FileSaveMode.Stream streams the file directly to Dataverse without intermediate storage. Defaults to FileSaveMode.SaveToTemporaryFolder.

ColumnFileInfo Class

Properties

Name
Type
Default
Description
ColumnNamestring
The logical name of the file or image column the file is being uploaded to.
FileInfoFileInfo
The uploaded file information including file name, size, and binary content.
TableNamestring
The logical name of the Dataverse table the file is being uploaded to.
Name: ColumnName
Type: string
Description: The logical name of the file or image column the file is being uploaded to.
Name: FileInfo
Type: FileInfo
Description: The uploaded file information including file name, size, and binary content.
Name: TableName
Type: string
Description: The logical name of the Dataverse table the file is being uploaded to.

FileInfo Class

Properties

Name
Type
Default
Description
FileDatabyte[]?
The raw binary content of the file. May be null if the file has not yet been read into memory.
FileNamestring
The original file name including the extension (e.g. 'document.pdf').
FileSizeInByteslong
0
The size of the file in bytes.
Name: FileData
Type: byte[]?
Description: The raw binary content of the file. May be null if the file has not yet been read into memory.
Name: FileName
Type: string
Description: The original file name including the extension (e.g. 'document.pdf').
Name: FileSizeInBytes
Type: long
Default: 0
Description: The size of the file in bytes.
React Blazor

ImageEdit Class

Parameters

Name
Type
Default
Description
ChildContentRenderFragment?
Child content of the component
ColumnName*string
Column logical name to bind the editor to from the table record.
Descriptionstring?
Description to be displayed in the tooltip.
Disabledbool?
Should the editor be disabled.
DisplayImagebool
False
When true, the image binary is downloaded from Dataverse and rendered inline.
DisplayLabelWhenAvailablebool
True
Specifies whether to display a lable if available.
DisplayTooltipWhenAvailablebool
True
Specifies whether to display a tooltip if available.
DisplayValidationErrorMessagebool
True
Should a validation error message be displayed when the component fails validation?
IsVisiblebool
True
Is the editor visible.
Labelstring?
Text to be displayed as a label for the editor.
MaxFileSizeInByteslong?
Gets or sets the maximum size of a file to be uploaded (in bytes). Default value is 10 MB or the value specified by the column metadata.
OutputFormatImageOutputFormat
Auto
Output format used when committing edits back to the bound column. Defaults to ImageOutputFormat.Auto — JPEG inputs stay JPEG, everything else emits PNG. Pin to ImageOutputFormat.Png for lossless writes regardless of source, or ImageOutputFormat.Jpeg for size- sensitive photo columns. Forwarded to the embedded ImageViewer.OutputFormat.
OutputQualitydouble
0.9
JPEG quality in [0, 1]. Ignored when ImageEdit.OutputFormat resolves to PNG. Defaults to 0.9. Forwarded to ImageViewer.OutputQuality.
ReadOnlybool?
Should the editor be read-only.
Requiredbool?
Should the value be required.
ValueFileValue?
Value of the column.
Name: ChildContent
Type: RenderFragment?
Description: Child content of the component
Name: ColumnName*
Type: string
Description: Column logical name to bind the editor to from the table record.
Name: Description
Type: string?
Description: Description to be displayed in the tooltip.
Name: Disabled
Type: bool?
Description: Should the editor be disabled.
Name: DisplayImage
Type: bool
Default: False
Description: When true, the image binary is downloaded from Dataverse and rendered inline.
Name: DisplayLabelWhenAvailable
Type: bool
Default: True
Description: Specifies whether to display a lable if available.
Name: DisplayTooltipWhenAvailable
Type: bool
Default: True
Description: Specifies whether to display a tooltip if available.
Name: DisplayValidationErrorMessage
Type: bool
Default: True
Description: Should a validation error message be displayed when the component fails validation?
Name: IsVisible
Type: bool
Default: True
Description: Is the editor visible.
Name: Label
Type: string?
Description: Text to be displayed as a label for the editor.
Name: MaxFileSizeInBytes
Type: long?
Description: Gets or sets the maximum size of a file to be uploaded (in bytes). Default value is 10 MB or the value specified by the column metadata.
Name: OutputFormat
Type: ImageOutputFormat
Default: Auto
Description: Output format used when committing edits back to the bound column. Defaults to ImageOutputFormat.Auto — JPEG inputs stay JPEG, everything else emits PNG. Pin to ImageOutputFormat.Png for lossless writes regardless of source, or ImageOutputFormat.Jpeg for size- sensitive photo columns. Forwarded to the embedded ImageViewer.OutputFormat.
Name: OutputQuality
Type: double
Default: 0.9
Description: JPEG quality in [0, 1]. Ignored when ImageEdit.OutputFormat resolves to PNG. Defaults to 0.9. Forwarded to ImageViewer.OutputQuality.
Name: ReadOnly
Type: bool?
Description: Should the editor be read-only.
Name: Required
Type: bool?
Description: Should the value be required.
Name: Value
Type: FileValue?
Description: Value of the column.

Events

Name
Type
Description
ValueChangedEventCallback<ColumnValueBase>
Gets or sets a callback that updates the bound value.
Name: ValueChanged
Type: EventCallback<ColumnValueBase>
Description: Gets or sets a callback that updates the bound value.

Methods

Name
Parameters
Type
Description
GetValidationErrorsList<string>
Returns a collection of the current validation errors.
Name: GetValidationErrors
Type: List<string>
Description: Returns a collection of the current validation errors.