# Image Upload

**Path:** Components/Form Inputs

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Image Upload

 RbImageUpload is a specialized image uploader with built-in preview support.
 It is ideal for profile photos, covers, product images, and other image-first upload flows.

 Basic Usage

 Default image upload with immediate `OnUpload` callback.

 Show code

 Immediate Commit

 Select an image and it is returned immediately.
 Clicking the existing image opens the preview dialog.

 Preview Modes

 Compare `NoPreview`, `Preview`, and `PreviewWithEdit`.

 Show code

 NoPreview

 Preview

 PreviewWithEdit

 Actions

 Open the current image preview and use clear, download, and edit actions.

 Show code

 Preview Actions

 Upload once, then click the current image to open preview.
 Clear, download, and edit actions are shown inside the dialog.

 Clear Event

 Intercept clear requests and cancel them before the parent value is removed.

 Show code

 Clear Event

 Clear is intercepted before the parent state is removed.
 A confirmation dialog decides whether the current image is kept or cleared.

 Last action: No clear request yet.

 Last dialog result: -

 Validation Messages

 Handle upload validation and user-facing messages in the parent screen.

 Show code

 Parent Validation And Messages

 This example keeps framework upload generic and applies business validation in the parent component.
 Only PNG images under 300 KB are accepted into the final state.

 Custom Content

 Replace the empty-state content with your own branded prompt.

 Show code

 Custom Empty Content

 Upload photo 

 Useful when you want a custom empty-state invitation instead of the default shell.

 Sizes

 Use different sizes for avatar, card, and larger preview scenarios.

 Show code

 Multiple Sizes

 Small

 Medium

 Large

 RTL Support

 Use image upload flows inside a local RTL container while keeping preview actions usable.

 Show code

 صورة الملف الشخصي

 النصوص والملاحظات تتبع RTL، بينما المعاينة وأزرار الصورة تبقى عملية داخل نفس السياق.

 ارفع صورة، ثم افتح المعاينة لاختبار أزرار العرض والتنزيل والمسح داخل واجهة RTL.

 ✕

 Contents