syncfusion-react-inputs

# Implementing Syncfusion React Inputs ## Uploader The Syncfusion React **UploaderComponent** provides a rich file upload control with async upload, drag-and-drop, chunk upload with pause/resume/cancel, validation, templates, form integration, and accessibility support. ### Navigation Guide > 🛑 **Agentic use:** Do not execute multiple steps autonomously. Confirm with the user before each action (install, run, file creation). #### Getting Started 📄 **Read:** [references/getting-started.md](references/uploader-getting-started.md) - Installing `@syncfusion/ej2-react-inputs` 🛑 *STOP — Do not install packages autonomously. Ask the user to run: `npm install @syncfusion/ej2-react-inputs`. Verify with `npm audit`* - License registration - Basic `UploaderComponent` usage in JSX/TSX - CSS theme imports - Drop area configuration - Success and failure event handling #### Asynchronous Upload 📄 **Read:** [references/async-upload.md](references/uploader-async-upload.md) - `asyncSettings` with `saveUrl` and `removeUrl` - Multiple vs. single file upload (`multiple`) - Auto upload vs. manual upload (`autoUpload`) - Sequential upload (`sequentialUpload`) - Preloaded files (`files` property) - Adding custom HTTP headers via `uploading`/`removing` events - Server-side save/remove action examples #### Chunk Upload 📄 **Read:** [references/chunk-upload.md](references/uploader-chunk-upload.md) - Enabling chunk upload with `asyncSettings.chunkSize` - Retry configuration (`retryCount`, `retryAfterDelay`) - Pause and resume chunked uploads (`pause`, `resume` methods) - Cancel uploads (`cancel` method) - `chunkSuccess` and `chunkFailure` events - Server-side chunk handling (C#) #### Validation 📄 **Read:** [references/validation.md](references/uploader-validation.md) - Allowed file extensions (`allowedExtensions`) - File size limits (`minFileSize`, `maxFileSize`) - Maximum file count using `selected` event - Duplicate file prevention - Drag-and-drop image validation #### File Sources 📄 **Read:** [references/file-source.md](references/uploader-file-source.md) - Clipboard paste upload - Directory/folder upload (`directoryUpload`) - Drag-and-drop with custom drop area (`dropArea`) - Customizing drop area appearance #### Templates and Customization 📄 **Read:** [references/template-customization.md](references/uploader-template-customization.md) - File list `template` property - Custom upload UI with `showFileList: false` - Customizing action buttons (`buttons` property) - Progress bar customization - Hiding the default drop area - Style and appearance overrides #### Advanced How-To Scenarios 📄 **Read:** [references/advanced-how-to.md](references/uploader-advanced-how-to.md) - Programmatic file upload (`upload` method, `getFilesData`) - Invisible/background upload - Image preview before uploading - Resize images before upload - Sort selected files - Check file size / MIME type before upload - Confirm dialog before file removal - Open/edit uploaded files - Trigger file browser from external button - Convert uploaded image to binary - JWT authentication for secure upload ⚠️ *Never hardcode tokens. Retrieve from a secure session store at runtime. Do not log request headers or token values.* - Form support (HTML form, template-driven, reactive) - Localization (custom locale strings) - Accessibility and keyboard navigation #### API Reference 📄 **Read:** [references/api.md](references/uploader-api.md) - All properties (`allowedExtensions`, `asyncSettings`, `autoUpload`, `buttons`, `cssClass`, `directoryUpload`, `dropArea`, `dropEffect`, `enabled`, `files`, `htmlAttributes`, `locale`, `maxFileSize`, `minFileSize`, `multiple`, `sequentialUpload`, `showFileList`, `template`, and more) - All methods (`upload`, `remove`, `cancel`, `pause`, `resume`, `retry`, `clearAll`, `getFilesData`, `bytesToSize`, `createFileList`, `sortFileList`) - All events (`uploading`, `success`, `failure`, `selected`, `removing`, `change`, `progress`, `chunkSuccess`, `chunkFailure`, `chunkUploading`, `actionComplete`, `beforeRemove`, `beforeUpload`, `canceling`, `clearing`, `fileListRendering`, `pausing`, `resuming`, `created`) ### Quick Start Example ```tsx import { UploaderComponent } from '@syncfusion/ej2-react-inputs'; import '@syncfusion/ej2-base/styles/material.css'; import '@syncfusion/ej2-buttons/styles/material.css'; import '@syncfusion/ej2-inputs/styles/material.css'; import '@syncfusion/ej2-popups/styles/material.css'; import '@syncfusion/ej2-react-inputs/styles/material.css'; function App() { // ⚠️ Replace with your own server-side endpoints. // Never use third-party demo URLs in production — files will be sent to that external server. const asyncSettings = { saveUrl: '/api/upload/save', removeUrl: '/api/upload/remove' }; const onSuccess = (args: any) => { console.log('Upload operation:', args.operation, 'File:', args.file.name); }; const onFailure = (args: any) => { console.error('Upload failed:', args.file.name); }; return ( <UploaderComponent asyncSettings={asyncSettings} autoUpload={false} success={onSuccess} failure={onFailure} /> ); } ``` ### Common Patterns #### Auto Upload with Validation ```tsx <UploaderComponent asyncSettings={{ saveUrl: '/api/upload/save', removeUrl: '/api/upload/remove' }} allowedExtensions=".pdf,.doc,.docx" maxFileSize={5000000} multiple={true} /> ``` #### Manual Upload with Custom Buttons ```tsx <UploaderComponent asyncSettings={{ saveUrl: '/api/upload/save', removeUrl: '/api/upload/remove' }} autoUpload={false} buttons={{ browse: 'Choose File', clear: 'Clear All', upload: 'Upload All' }} /> ``` #### Chunk Upload for Large Files ```tsx <UploaderComponent asyncSettings={{ saveUrl: '/api/upload/save', removeUrl: '/api/upload/remove', chunkSize: 500000 // 500 KB chunks }} /> ``` ### Key Decision Guide | Need | Property/Event | |---|---| | Server URLs | `asyncSettings.saveUrl` + `asyncSettings.removeUrl` | | Auto vs manual upload | `autoUpload` (default: `true`) | | Large file upload | `asyncSettings.chunkSize` | | Restrict file types | `allowedExtensions` | | Limit file size | `maxFileSize` / `minFileSize` | | Preload files from server | `files` prop | | Upload one at a time | `sequentialUpload: true` | | Entire folder upload | `directoryUpload: true` | | Custom drop target | `dropArea` | | Custom file list UI | `template` or `showFileList: false` | | Add auth headers | `uploading` event → `args.currentRequest.setRequestHeader()` | | Send extra form data | `uploading` event → `args.customFormData` | ## NumericTextBox The Syncfusion React **NumericTextBoxComponent** is a specialized input control for numeric data entry with support for number formatting (currency, percentage, scientific notation), min/max range validation, spin buttons, decimal precision control, internationalization, RTL languages, and full WCAG 2.2 accessibility compliance. ### Documentation & Navigation Guide > 🛑 **Agentic use:** Do not execute multiple steps autonomously. Confirm with the user before each action (install, run, file creation). When the user needs help with NumericTextBox, guide them to the appropriate reference: #### Getting Started 📄 **Read:** [references/getting-started.md](references/numerictextbox-getting-started.md) - Installation and package setup - CSS imports and themes - React component import and basic JSX - Creating your first NumericTextBox - Running the application #### Formats & Validation 📄 **Read:** [references/formats-and-validation.md](references/numerictextbox-formats-and-validation.md) - Standard format specifiers (currency, percentage, number, scientific) - Custom number formats with # and 0 patterns - Range validation with min and max properties - strictMode for enforcing valid ranges - Real-world formatting examples #### Spin Buttons & Step Control 📄 **Read:** [references/spin-buttons-and-step.md](references/numerictextbox-spin-buttons-and-step.md) - Enabling/disabling spin button arrows - Step property for increment values - Customizing spin button appearance and behavior - Precision with step increments - Keyboard shortcuts (Arrow Up/Down) #### Adornments & Styling 📄 **Read:** [references/adornments-and-styling.md](references/numerictextbox-adornments-and-styling.md) - Prefix and suffix text (units, currency symbols) - CSS classes and custom styling - Placeholder, disabled, and readonly states - Focus and blur event handling - Theme customization and appearance options #### Precision & Decimals 📄 **Read:** [references/precision-decimals.md](references/numerictextbox-precision-decimals.md) - decimals property for controlling decimal places - validateDecimalOnType for real-time precision validation - Maintaining trailing zeros in display - Rounding behavior and edge cases - Precision during input vs display #### Two-Way Binding & Forms 📄 **Read:** [references/two-way-binding-forms.md](references/numerictextbox-two-way-binding-forms.md) - Two-way value binding in React (value prop + onChange) - Controlled component patterns - React state management - React Hook Form integration - Form validation with NumericTextBox #### Globalization & Accessibility 📄 **Read:** [references/globalization-accessibility.md](references/numerictextbox-globalization-accessibility.md) - Internationalization and locale support - Right-to-Left (RTL) language support - WCAG 2.2 accessibility compliance - Keyboard navigation and shortcuts - Screen reader support with ARIA attributes - Focus management and color contrast #### API Reference 📄 **Read:** [references/api.md](references/numerictextbox-api.md) - Complete properties reference (value, min, max, step, format, decimals, etc.) - Methods reference (increment, decrement, getText, focusIn, focusOut, destroy, etc.) - Events reference with full argument types (change, blur, focus, created, destroyed) ### Quick Start Example Here's a minimal working example to get started: ```jsx import React, { useState } from 'react'; import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs'; import '@syncfusion/ej2-base/styles/material3.css'; import '@syncfusion/ej2-buttons/styles/material3.css'; import '@syncfusion/ej2-inputs/styles/material3.css'; export default function App() { const [value, setValue] = useState(10); return ( <div style={{ padding: '20px' }}> <h3>Enter a Number</h3> <NumericTextBoxComponent value={value} onChange={(e) => setValue(e.value)} min={0} max={100} step={1} /> <p>Current Value: {value}</p> </div> ); } ``` **Key points:** - Import `NumericTextBoxComponent` from `@syncfusion/ej2-react-inputs` - Import required CSS themes (material3 in this example) - Use `value` prop for the current numeric value - Use `onChange` event to update React state - Add `min`, `max`, `step` for validation and controls ### Common Patterns #### 1. Currency Input ```jsx <NumericTextBoxComponent value={99.99} format="c2" min={0} placeholder="Enter amount" /> ``` #### 2. Percentage Input ```jsx <NumericTextBoxComponent value={50} format="p" min={0} max={100} /> ``` #### 3. Integer-Only Input ```jsx <NumericTextBoxComponent value={10} decimals={0} step={1} min={0} /> ``` #### 4. Bounded Range with Validation ```jsx <NumericTextBoxComponent value={25} min={0} max={100} strictMode={true} placeholder="0-100" /> ``` #### 5. Form Field with Label ```jsx <div> <label>Product Quantity:</label> <NumericTextBoxComponent value={qty} onChange={(e) => setQty(e.value)} min={1} step={1} prefix="Units: " /> </div> ``` ### Key Properties Reference | Property | Type | Purpose | |----------|------|---------| | `value` | number | Current numeric value | | `min` | number | Minimum allowed value | | `max` | number | Maximum allowed value | | `step` | number | Increment/decrement step (default: 1) | | `decimals` | number | Number of decimal places when focused | | `format` | string | Number format (n2, c2, p2, e2, etc.) | | `currency` | string | ISO 4217 currency code (e.g., 'USD', 'EUR') | | `placeholder` | string | Placeholder text when empty |