Drop an image here, or click to browse
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.
<ImageEdit columnName="ppp_profileimage" /><ImageEdit ColumnName="ppp_profileimage" />Set DisplayImage="true" to show a preview of the uploaded image. When disabled, only the file name and upload control are displayed.
<ImageEdit columnName="ppp_profileimage" displayImage={true} /><ImageEdit ColumnName="ppp_profileimage" DisplayImage="true" />Use MaxFileSize to set the maximum allowed file size in bytes.
<ImageEdit columnName="ppp_profileimage" maxFileSizeBytes={2097152} /><ImageEdit ColumnName="ppp_profileimage" MaxFileSize="2097152" />A basic ImageEdit bound to an image column.
Drop an image here, or click to browse
Use the controls below to explore the available properties.
Drop an image here, or click to browse
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.
// In your startup class call the following:
services.Configure<FileSaveOptions>(options => {
// Files can be saved to a temporary folder on the server or to an in-memory stream.
options.SaveMode = FileSaveMode.SaveToTemporaryFolder;
// Specify your pre-process handler
options.OnFileUploaded = async (columnFileInfo) => {
// Perform your processing here
var mutatedFileData = SomeMethodToManipulateTheByteArray(columnFileInfo.FileInfo.FileData);
return new FileInfo { FileName = "New File Name", FileData = mutatedFileData };
};
});
Name | Type | Default | Description |
|---|---|---|---|
OnFileUploaded | Func<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. | |
SaveMode | FileSaveMode | 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. |
OnFileUploadedModels.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 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 | Type | Default | Description |
|---|---|---|---|
ColumnName | string | The logical name of the file or image column the file is being uploaded to. | |
FileInfo | FileInfo | The uploaded file information including file name, size, and binary content. | |
TableName | string | The logical name of the Dataverse table the file is being uploaded to. |
ColumnNameFileInfoTableNameName | Type | Default | Description |
|---|---|---|---|
FileData | byte[]? | The raw binary content of the file. May be null if the file has not yet been read into memory. | |
FileName | string | The original file name including the extension (e.g. 'document.pdf'). | |
FileSizeInBytes | long | 0 | The size of the file in bytes. |
FileDataFileNameFileSizeInBytesName | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | Child content of the component | |
ColumnName* | string | Column logical name to bind the editor to from the table record. | |
Description | string? | Description to be displayed in the tooltip. | |
Disabled | bool? | Should the editor be disabled. | |
DisplayImage | bool | False | When |
DisplayLabelWhenAvailable | bool | True | Specifies whether to display a lable if available. |
DisplayTooltipWhenAvailable | bool | True | Specifies whether to display a tooltip if available. |
DisplayValidationErrorMessage | bool | True | Should a validation error message be displayed when the component fails validation? |
IsVisible | bool | True | Is the editor visible. |
Label | string? | Text to be displayed as a label for the editor. | |
MaxFileSizeInBytes | long? | 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. | |
OutputFormat | ImageOutputFormat | 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. |
OutputQuality | double | 0.9 | JPEG quality in ImageEdit.OutputFormat resolves to PNG. Defaults to ImageViewer.OutputQuality. |
ReadOnly | bool? | Should the editor be read-only. | |
Required | bool? | Should the value be required. | |
Value | FileValue? | Value of the column. |
ChildContentColumnName*DescriptionDisabledDisplayImageDisplayLabelWhenAvailableDisplayTooltipWhenAvailableDisplayValidationErrorMessageIsVisibleLabelMaxFileSizeInBytesOutputFormatImageOutputFormat.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.OutputQualityImageEdit.OutputFormat resolves to PNG. Defaults to ImageViewer.OutputQuality.ReadOnlyRequiredValueName | Type | Description |
|---|---|---|
ValueChanged | EventCallback<ColumnValueBase> | Gets or sets a callback that updates the bound value. |
ValueChangedName | Parameters | Type | Description |
|---|---|---|---|
GetValidationErrors | List<string> | Returns a collection of the current validation errors. |
GetValidationErrors