syncfusion-blazor-inputs

# Implementing Syncfusion Blazor FileUpload This skill covers the Syncfusion Blazor FileUpload component, a robust solution for file handling in Blazor applications. Learn to implement single and multiple file uploads, configure validation rules, enable drag-drop interactions, handle large files with chunked uploads, and leverage comprehensive events for complete upload control and user feedback. --- ## FileUpload Learn to implement Syncfusion Blazor File Upload component with async/sync uploads, validation, events, customization, and always get immediate file handling with drag-drop or form integration for web and server applications. ### Documentation #### Getting Started 📄 **Read:** [references/file-upload-getting-started.md](references/file-upload-getting-started.md) - Installation and NuGet package setup - Visual Studio/Visual Studio Code setup steps - Blazor WebAssembly vs Server configuration - Basic SfUploader component rendering - CSS and script imports - Minimal working example #### Core Configuration 📄 **Read:** [references/file-upload-configuration.md](references/file-upload-configuration.md) - ID property for component identification - AllowedExtensions for file type restriction - AllowMultiple vs single file uploads - AutoUpload behavior configuration - SequentialUpload for ordered processing - DirectoryUpload capability - Enabled state and component control #### Upload Methods & Behavior 📄 **Read:** [references/file-upload-file-upload-methods.md](references/file-upload-file-upload-methods.md) - Synchronous vs asynchronous uploads - Save URL and Remove URL configuration - Upload button click handlers - Automatic vs manual upload triggering - Upload progress tracking mechanisms - Backend API requirements #### Events & Handlers 📄 **Read:** [references/file-upload-events-and-handlers.md](references/file-upload-events-and-handlers.md) - ValueChange event for direct file access (Blazor Server only, without AsyncSettings) - FileSelected event for pre-validation - Created event for initialization logic - OnFileListRender for custom file display - OnUploadStart, Success, OnFailure events (use with AsyncSettings) - Event handler patterns and best practices - **Important:** ValueChange and UploaderAsyncSettings are mutually exclusive #### File Validation 📄 **Read:** [references/file-upload-validation.md](references/file-upload-validation.md) - File type validation strategies - File size constraints (MinFileSize, MaxFileSize) - Custom validation functions - Preventing invalid file uploads - Error messages and user feedback - Validation within EditForm #### Advanced Features 📄 **Read:** [references/file-upload-advanced-features.md](references/file-upload-advanced-features.md) - Chunked upload for large files - Pause and resume functionality - Async/await patterns in event handlers - MemoryStream processing without disk I/O - Batch upload operations - Retry and recovery mechanisms #### Customization & Styling 📄 **Read:** [references/file-upload-customization.md](references/file-upload-customization.md) - Custom file list templates - CSS class customization - Theme Studio integration - Custom button styling - Dark mode support - Responsive design patterns #### File Source Options 📄 **Read:** [references/file-upload-file-source-options.md](references/file-upload-file-source-options.md) - Drag-and-drop upload implementation - Form integration patterns - Direct file picker interaction - Browser file dialog usage - Directory selection and upload - Multiple input method combinations - Accessibility best practices #### Localization & Accessibility 📄 **Read:** [references/file-upload-localization-accessibility.md](references/file-upload-localization-accessibility.md) - Multi-language UI support - Locale configuration options - Custom text labels - WCAG 2.1 compliance - Keyboard navigation implementation - Screen reader support - ARIA attributes #### Platform-Specific Setup 📄 **Read:** [references/file-upload-platform-specific-setup.md](references/file-upload-platform-specific-setup.md) - Blazor WebAssembly app setup - Blazor Server app setup - Blazor Web App (.NET 8+) setup - MAUI integration - Different render modes - Platform-specific considerations ### Quick Start Example ```razor @using Syncfusion.Blazor.Inputs <SfUploader AutoUpload="true" AllowedExtensions=".jpg,.jpeg,.png,.pdf"> <UploaderAsyncSettings SaveUrl="api/upload/save" RemoveUrl="api/upload/remove"> </UploaderAsyncSettings> </SfUploader> ``` ### Common Patterns #### Pattern 1: Basic File Upload with Validation (Server Upload) - Use `AutoUpload="true"` for instant uploads - Configure `UploaderAsyncSettings` with SaveUrl/RemoveUrl - Set `AllowedExtensions` to restrict file types - Listen to `FileSelected` event for pre-validation - Use `Success`/`OnFailure` events for upload feedback #### Pattern 2: Direct File Access (Blazor Server Only) - Use `ValueChange` event to access file content directly - **Do NOT use** `UploaderAsyncSettings` with ValueChange - Process files in memory or save to directory - Best for file preview, Base64 conversion, or direct storage #### Pattern 3: Multiple File Handling - Set `AllowMultiple="true"` to allow batch uploads - Use `SequentialUpload` for ordered processing - Track progress with upload events - Display file list with individual progress indicators #### Pattern 4: Large File Upload with Chunking - Configure `ChunkSize` in `UploaderAsyncSettings` - Enable pause/resume with chunk upload - Implement retry logic for failed chunks - Show chunk-level progress to user ### Key Props | Property | Default | Use When | |----------|---------|----------| | AutoUpload | true | Upload files immediately after selection | | AllowMultiple | true | User needs to upload multiple files | | SequentialUpload | false | Files must upload one at a time | | AllowedExtensions | "" | Only specific file types allowed | | DirectoryUpload | false | User can select entire folders | | MaxFileSize | 28.4 MB | Limiting maximum upload file size | | MinFileSize | 0 | Setting minimum file size requirement | | ChunkSize | 0 (disabled) | Enable chunked upload for large files | | ShowFileList | true | Control visibility of uploaded file list | | ShowProgressBar | true | Display upload progress indicator | | Enabled | true | Enable or disable the uploader | | DropArea | null | Specify custom drop zone CSS selector | | CssClass | "" | Apply custom CSS classes | | TabIndex | 0 | Set tab navigation order | | EnablePersistence | false | Maintain state across page reloads | | EnableRtl | false | Enable right-to-left layout | ### Common Use Cases 1. **Document Upload**: Resume, PDF, certification file uploads 2. **Image Gallery**: User profile pictures, photo collections 3. **Data Import**: CSV/Excel file imports for data processing 4. **Media Library**: Video, audio file uploads and management 5. **Backup Uploads**: Database backups, configuration files 6. **Report Generation**: Monthly reports, analytics data 7. **Invoice Processing**: Financial document uploads 8. **User Attachments**: Email attachments, message files ### Quick Decision Tree **User needs file upload functionality** ├─ Single file only? → Set `AllowMultiple="false"` + use basic setup ├─ Multiple files? │ ├─ All at once? → `AllowMultiple="true"` + `SequentialUpload="false"` │ └─ One at a time? → `AllowMultiple="true"` + `SequentialUpload="true"` └─ Large files (>100MB)? ├─ Enable chunking → Set `ChunkSize` property └─ Add pause/resume → Listen to `Paused` and `OnResume` events --- ## TextArea Learn to implement Syncfusion Blazor TextArea component for multi-line text input with configurable resize modes, row/column sizing, character limits, floating labels, and comprehensive validation. Perfect for comments, descriptions, messages, and any scenario requiring extended text entry with real-time feedback and form integration. ### Documentation #### Getting Started 📄 **Read:** [references/textarea-getting-started.md](references/textarea-getting-started.md) - Installation and NuGet package setup - Basic SfTextArea component setup - Namespace imports and service registration - CSS theme configuration - Minimal working example - Initial component rendering #### Configuration Options 📄 **Read:** [references/textarea-configuration.md](references/textarea-configuration.md) - RowCount and ColumnCount for sizing - ResizeMode (Vertical, Horizontal, Both, None) - MaxLength property for character limits - Placeholder text configuration - FloatLabelType (Auto, Always, Never) - ReadOnly and Disabled states - Width property and responsive sizing - HTML attributes customization #### Events and Data Binding 📄 **Read:** [references/textarea-events-binding.md](references/textarea-events-binding.md) - Value property and two-way binding (@bind-Value) - ValueChange event for real-time updates - Focus and Blur events (TextAreaFocusInEventArgs, TextAreaFocusOutEventArgs) - Input event for keystroke tracking - Created and Destroyed lifecycle events - Form validation integration with EditForm - ValueExpression for validation binding #### Customization and Styling 📄 **Read:** [references/textarea-customization.md](references/textarea-customization.md) - CssClass for custom styling - ShowClearButton for quick text removal - InputAttributes and HtmlAttributes - Theme customization with Theme Studio - Responsive design patterns - Accessibility features (ARIA, keyboard navigation) - RTL (Right-to-Left) support with EnableRtl ### Quick Start Example ```razor @using Syncfusion.Blazor.Inputs <SfTextArea @bind-Value="@description" Placeholder="Enter description..." RowCount="5" ColumnCount="50" MaxLength="500" FloatLabelType="FloatLabelType.Auto"> </SfTextArea> @code { private string description = ""; } ``` ### Common Patterns #### Pattern 1: Basic Multi-Line Input - Use `RowCount` to set visible lines (default: 2) - Set `Placeholder` for user guidance - Enable `@bind-Value` for two-way binding - Apply `MaxLength` for character constraints #### Pattern 2: Resizable TextArea with Limits - Set `ResizeMode="Resize.Both"` for user resizing - Configure `RowCount` and `ColumnCount` for initial size - Use `MaxLength` to prevent excessive input - Listen to `ValueChange` for live character counting #### Pattern 3: Form Integration with Validation - Wrap in `<EditForm>` with model binding - Use `@bind-Value` with `ValueExpression` - Apply `[Required]` or `[StringLength]` attributes - Display validation messages with `<ValidationMessage>` - Style invalid state with CSS #### Pattern 4: Auto-Growing TextArea - Set `ResizeMode="Resize.Vertical"` for vertical expansion - Start with minimal `RowCount` (e.g., 3) - Allow user to expand as needed - Combine with `MaxLength` for upper bounds ### Key Props | Property | Default | Use When | |----------|---------|----------| | Value | "" | Binding textarea content | | RowCount | 2 | Setting visible number of rows | | ColumnCount | 20 | Setting visible number of columns | | MaxLength | null | Limiting maximum characters | | ResizeMode | Resize.Both | Controlling user resize behavior | | Placeholder | "" | Showing hint text when empty | | FloatLabelType | FloatLabelType.Never | Enabling floating label animation | | ShowClearButton | false | Adding quick clear functionality | | ReadOnly | false | Preventing user edits while showing content | | Disabled | false | Disabling the component entirely | | Width | "100%" | Setting component width | | CssClass | "" | Applying custom CSS classes | | EnableRtl | false | Enabling right-to-left text direction | ### Common Use Cases 1. **Comment Sections**: User feedback, review comments, discussion threads 2. **Form Descriptions**: Product descriptions, bio sections, about fields 3. **Message Composition**: Email bodies, chat messages, note-taking 4. **Code/JSON Input**: Configuration files, script input, data entry 5. **Address Fields**: Multi-line address entry with street, city, etc. 6. **Search Queries**: Complex search inputs with multiple criteria 7. **Customer Support**: Ticket descriptions, issue reporting, help requests 8. **Content Management**: Article drafts, blog post editing, documentation ### Quick Decision Tree **User needs multi-line text input** ├─ Fixed size? → Set `ResizeMode="Resize.None"` + specific `RowCount` ├─ User-resizable? │ ├─ Vertical only? → `ResizeMode="Resize.Vertical"` │ ├─ Horizontal only? → `ResizeMode="Resize.Horizontal"` │ └─ Both directions? → `ResizeMode="Resize.Both"` ├─ Character limit needed? → Set `MaxLength` property └─ Form validation? ├─ Use within `<EditForm>` └─ Add `ValueExpression` for validation binding --- ## Signature Learn to implement Syncfusion Blazor Signature component for capturing digital signatures with configurable stroke width, colors, background images, save/load functionality in multiple formats (PNG, JPEG, SVG), and comprehensive event handling. Perfect for e-signatures, document approval workflows, digital consent forms, and any scenario requiring handwritten signature capture with touch and mouse support. ### Documentation #### Getting Started 📄 **Read:** [references/signature-getting-started.md](references/signature-getting-started.md) - Installation and NuGet package setup - Basic SfSignature component setup - Namespace imports and service registration - CSS theme configuration - Canvas rendering and initialization - Touch and mouse input support - Minimal working example #### Drawing Configuration 📄 **Read:** [references/signature-drawing-configuration.md](references/signature-drawing-configuration.md) - MinStrokeWidth and MaxStrokeWidth for pen thickness - StrokeColor for ink color customization - BackgroundColor for canvas background - BackgroundImage for letterhead/watermark - Velocity property for stroke smoothness - Drawing behavior and responsiveness - Pressure sensitivity simulation #### Save and Load Signatures 📄 **Read:** [references/signature-save-load.md](references/signature-save-load.md) - Save() method with format options (PNG, JPEG, SVG) - SaveWithBackground property configuration - GetSignature() for Base64 string retrieval - Load() method for existing signatures - Clear() method for signature removal - File format selection and quality settings - Server integration patterns - Database storage strategies #### Event Handling 📄 **Read:** [references/signature-events.md](references/signature-events.md) - Changed event for stroke tracking - OnSave event for save operations - Created event for initialization - Event argument structure - Real-time signature validation - Detecting empty vs filled signatures - Event-driven workflows #### Customization and Styling 📄 **Read:** [references/signature-customization.md](references/signature-customization.md) - Disabled and IsReadOnly states - HtmlAttributes for custom styling - Canvas size customization - Theme integration - Mobile and touch device optimization - Accessibility considerations - Responsive design patterns ### Quick Start Example ```razor @using Syncfusion.Blazor.Inputs <div class="signature-container"> <label>Sign below:</label> <SfSignature @ref="signatureRef" StrokeColor="#000000" BackgroundColor="#FFFFFF" MaxStrokeWidth="2.0" MinStrokeWidth="0.5"> </SfSignature> <div class="signature-actions"> <button @onclick="SaveSignature">Save</button> <button @onclick="ClearSignature">Clear</button> </div> </div> @code { private SfSignature signatureRef; private async Task SaveSignature() { await signatureRef.SaveAsync(SignatureFileType.Png, "signature.png"); } private async Task ClearSignature() { await signatureRef.ClearAsync(); } } ``` ### Common Patterns #### Pattern 1: Basic Signature Capture - Use default stroke settings for natural handwriting feel - Set `BackgroundColor="#FFFFFF"` for clear canvas - Provide Clear button for user corrections - Save as PNG for universal compatibility - Validate signature is not empty before submission #### Pattern 2: Document Signing with Letterhead - Use `BackgroundImage` for company letterhead or form template - Set `SaveWithBackground="true"` to include background in saved file - Configure `StrokeColor` to contrast with background - Save as PNG or JPEG with background embedded - Ideal for contracts, agreements, official documents #### Pattern 3: Mobile-Optimized Signature