syncfusion-react-uploader

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion React Uploader

实现Syncfusion React 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.

Syncfusion React UploaderComponent 提供了功能丰富的文件上传控件，支持异步上传、拖拽上传、带暂停/恢复/取消功能的分片上传、校验、模板、表单集成以及无障碍访问支持。

Navigation Guide

导航指南

Getting Started

入门

📄 Read: references/getting-started.md

Installation and package setup for React
License registration
Basic
```
UploaderComponent
```
usage in JSX/TSX
CSS theme imports
Drop area configuration
Success and failure event handling

📄 阅读： references/getting-started.md

React 安装与包配置
许可证注册
JSX/TSX 中
```
UploaderComponent
```
的基础用法
CSS 主题导入
拖拽区域配置
成功与失败事件处理

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

📄 阅读： references/async-upload.md

配置带
```
saveUrl
```
和
```
removeUrl
```
的
```
asyncSettings
```
多文件 vs 单文件上传（
```
multiple
```
）
自动上传 vs 手动上传（
```
autoUpload
```
）
顺序上传（
```
sequentialUpload
```
）
预加载文件（
```
files
```
属性）
通过
```
uploading
```
/
```
removing
```
事件添加自定义 HTTP 头
服务端保存/删除操作示例

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#)

📄 阅读： references/chunk-upload.md

通过
```
asyncSettings.chunkSize
```
启用分片上传
重试配置（
```
retryCount
```
、
```
retryAfterDelay
```
）
暂停和恢复分片上传（
```
pause
```
、
```
resume
```
方法）
取消上传（
```
cancel
```
方法）
```
chunkSuccess
```
和
```
chunkFailure
```
事件
服务端分片处理（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

📄 阅读： references/validation.md

允许的文件扩展名（
```
allowedExtensions
```
）
文件大小限制（
```
minFileSize
```
、
```
maxFileSize
```
）
通过
```
selected
```
事件限制最大文件数量
重复文件拦截
拖拽图片校验

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

📄 阅读： references/file-source.md

剪贴板粘贴上传
目录/文件夹上传（
```
directoryUpload
```
）
自定义拖拽区域的拖拽上传（
```
dropArea
```
）
自定义拖拽区域外观

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

📄 阅读： references/template-customization.md

文件列表
```
template
```
属性
配置
```
showFileList: false
```
实现自定义上传UI
自定义操作按钮（
```
buttons
```
属性）
进度条自定义
隐藏默认拖拽区域
样式与外观覆盖

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
Form support (HTML form, template-driven, reactive)
Localization (custom locale strings)
Accessibility and keyboard navigation

📄 阅读： references/advanced-how-to.md

程序化文件上传（
```
upload
```
方法、
```
getFilesData
```
）
隐式/后台上传
上传前图片预览
上传前图片压缩
已选文件排序
上传前检查文件大小/MIME类型
文件删除前确认弹窗
打开/编辑已上传文件
从外部按钮触发文件浏览器
已上传图片转二进制
JWT 认证实现安全上传
表单支持（HTML表单、模板驱动表单、响应式表单）
本地化（自定义 locale 字符串）
无障碍访问与键盘导航

API Reference

API 参考

📄 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

)

📄 阅读： references/api.md

所有属性（

allowedExtensions

、

asyncSettings

、

autoUpload

、

buttons

、

cssClass

、

directoryUpload

、

dropArea

、

dropEffect

、

enabled

、

files

、

htmlAttributes

、

locale

、

maxFileSize

、

minFileSize

、

multiple

、

sequentialUpload

、

showFileList

、

template

等）

所有方法（

upload

、

remove

、

cancel

、

pause

、

resume

、

retry

、

clearAll

、

getFilesData

、

bytesToSize

、

createFileList

、

sortFileList

）

所有事件（

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() {
  const asyncSettings = {
    saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save',
    removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/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}
    />
  );
}

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() {
  const asyncSettings = {
    saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save',
    removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/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}
/>

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' }}
/>

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
  }}
/>

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`

需求	属性/事件
服务端URL	`asyncSettings.saveUrl` + `asyncSettings.removeUrl`
自动/手动上传	`autoUpload` (默认: `true` )
大文件上传	`asyncSettings.chunkSize`
限制文件类型	`allowedExtensions`
限制文件大小	`maxFileSize` / `minFileSize`
从服务端预加载文件	`files` prop
单文件顺序上传	`sequentialUpload: true`
整文件夹上传	`directoryUpload: true`
自定义拖拽目标	`dropArea`
自定义文件列表UI	`template` 或 `showFileList: false`
添加认证头	`uploading` 事件 → `args.currentRequest.setRequestHeader()`
发送额外表单数据	`uploading` 事件 → `args.customFormData`