Default Binary Image
The Binary Image control is used to display images obtained from a binary stream with the capability to upload images to the server. To specify a display image, assign a byte array containing image data to the control's ContentBytes property.
To allow file uploading, set the EditingSettings.Enabled property to true. After an end-user uploads an image, a byte array containing the new image data is accessible through the ContentBytes property.
<dx:BootstrapBinaryImage runat="server">
<EditingSettings Enabled="true" />
</dx:BootstrapBinaryImage>
Drag and Drop Support
The drag-and-drop feature allows an end-user to upload an image file by dragging it onto the Binary Image control's drop zone. Set the EditingSettings.AllowDropOnPreview property to true to enable the drag and drop functionality.
<dx:BootstrapBinaryImage runat="server">
<EditingSettings Enabled="true" AllowDropOnPreview="true" EmptyValueText="Drop image here" />
</dx:BootstrapBinaryImage>
The EditingSettings.ButtonPanelSettings.Position property allows you to specify the button panel's position relative to the image.
<dx:BootstrapBinaryImage runat="server">
<EditingSettings Enabled="true">
<ButtonPanelSettings Position="Top" />
</EditingSettings>
</dx:BootstrapBinaryImage>
The EditingSettings.ButtonPanelSettings.Visibility property allows you to specify when the button panel is displayed. The following property values are supported:
- Always - The panel is always displayed.
- Faded - The panel is always visible. The panel is faded when the mouse pointer is not hovering over the image.
- None - The panel is never displayed.
- OnMouseOver - The panel is displayed when the mouse pointer is hovering over the image. On touch devices, the "mouse over" behavior can be simulated by tapping on the image.
<dx:BootstrapBinaryImage runat="server">
<EditingSettings Enabled="true">
<ButtonPanelSettings Visibility="OnMouseOver" />
</EditingSettings>
</dx:BootstrapBinaryImage>