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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

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

<UploaderComponent
  asyncSettings={{ saveUrl: '/api/upload/save', removeUrl: '/api/upload/remove' }}
  allowedExtensions=".pdf,.doc,.docx"
  maxFileSize={5000000}
  multiple={true}
/>

Manual Upload with Custom Buttons

<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

<UploaderComponent
  asyncSettings={{
    saveUrl: '/api/upload/save',
    removeUrl: '/api/upload/remove',
    chunkSize: 500000   // 500 KB chunks
  }}
/>

Key Decision Guide

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

• 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

• 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