syncfusion-angular-uploader

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Uploader

实现Syncfusion Angular Uploader组件

The Syncfusion Angular Uploader (

ejs-uploader

) is a full-featured file upload component that supports asynchronous uploads, chunk uploading of large files, drag-and-drop, clipboard paste, directory upload, file validation, templates, form integration, JWT authentication, and comprehensive event handling.

Syncfusion Angular Uploader（

ejs-uploader

）是一款功能全面的文件上传组件，支持异步上传、大文件分片上传、拖拽、剪贴板粘贴、目录上传、文件验证、模板、表单集成、JWT认证以及全面的事件处理。

Component Overview

组件概述

The Syncfusion Angular Uploader provides:

Async upload modes: Auto upload (default) or manual upload with action buttons
Chunk upload: Split large files into configurable byte-size chunks with retry logic
Sequential upload: Process files one at a time to reduce server traffic
File sources: Browse dialog, drag-and-drop, clipboard paste, directory selection
Validation: File type (extensions), min/max size, custom count limits, duplicate prevention
Templates: Customize the file list item structure; build fully custom upload UIs
Form support: HTML form submission, template-driven forms (ngModel), reactive forms (FormGroup)
Accessibility: WCAG 2.2, Section 508, keyboard navigation, screen reader support
Localization: Customize all static text via L10n

Syncfusion Angular Uploader提供以下功能：

异步上传模式：自动上传（默认）或带操作按钮的手动上传
分片上传：将大文件拆分为可配置字节大小的分片，并支持重试逻辑
顺序上传：逐个处理文件，减少服务器流量
文件来源：浏览对话框、拖拽、剪贴板粘贴、目录选择
验证功能：文件类型（扩展名）、最小/最大文件大小、自定义数量限制、重复文件阻止
模板支持：自定义文件列表项结构；构建完全自定义的上传UI
表单支持：HTML表单提交、模板驱动表单（ngModel）、响应式表单（FormGroup）
无障碍访问：符合WCAG 2.2、Section 508标准，支持键盘导航、屏幕阅读器
本地化：通过L10n自定义所有静态文本

Documentation & Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation of
```
@syncfusion/ej2-angular-inputs
```
Package setup, CSS imports, and Angular standalone component usage
Adding the
```
<ejs-uploader>
```
component
Configuring async settings (saveUrl, removeUrl)
Handling success and failure events
Adding a custom drop area

📄 阅读： references/getting-started.md

安装
```
@syncfusion/ej2-angular-inputs
```
包
包配置、CSS导入及Angular独立组件使用
添加
```
<ejs-uploader>
```
组件
配置异步设置（saveUrl、removeUrl）
处理成功和失败事件
添加自定义拖拽区域

Asynchronous Upload

异步上传

📄 Read: references/async-upload.md

Multiple and single file upload modes (
```
multiple
```
property)
Save action configuration and server-side handling
Remove action and
```
postRawFile
```
usage
Auto upload vs manual upload (
```
autoUpload
```
property)
Sequential upload (
```
sequentialUpload
```
)
Preloaded files (
```
files
```
property)
Adding custom HTTP headers to upload requests

📄 阅读： references/async-upload.md

多文件和单文件上传模式（
```
multiple
```
属性）
保存操作配置及服务器端处理
删除操作与
```
postRawFile
```
的使用
自动上传 vs 手动上传（
```
autoUpload
```
属性）
顺序上传（
```
sequentialUpload
```
）
预加载文件（
```
files
```
属性）
为上传请求添加自定义HTTP头

Chunk Upload

分片上传

📄 Read: references/chunk-upload.md

Enabling chunk upload via
```
asyncSettings.chunkSize
```
Pause, resume, and cancel chunk uploads
Retry configuration (
```
retryCount
```
,
```
retryAfterDelay
```
)
```
chunkSuccess
```
and
```
chunkFailure
```
events
Server-side chunk assembly implementation

📄 阅读： references/chunk-upload.md

通过
```
asyncSettings.chunkSize
```
启用分片上传
暂停、恢复和取消分片上传
重试配置（
```
retryCount
```
、
```
retryAfterDelay
```
）
```
chunkSuccess
```
和
```
chunkFailure
```
事件
服务器端分片合并实现

File Validation

文件验证

📄 Read: references/validation.md

Restricting file types with
```
allowedExtensions
```
Min/max file size constraints (
```
minFileSize
```
,
```
maxFileSize
```
)
Limiting upload count via the
```
selected
```
event
Preventing duplicate file uploads
MIME type validation before upload
Image/* validation on drag-and-drop

📄 阅读： references/validation.md

通过
```
allowedExtensions
```
限制文件类型
最小/最大文件大小约束（
```
minFileSize
```
、
```
maxFileSize
```
）
通过
```
selected
```
事件限制上传数量
阻止重复文件上传
上传前的MIME类型验证
拖拽时的Image/*类型验证

File Sources

文件来源

📄 Read: references/file-sources.md

Paste images from clipboard
Directory (folder) upload with
```
directoryUpload
```
Drag-and-drop with built-in and custom drop areas
Custom drop area styling (
```
.e-upload-drag-hover
```
)
Triggering file browse from an external button

📄 阅读： references/file-sources.md

从剪贴板粘贴图片
启用目录（文件夹）上传（
```
directoryUpload
```
）
内置和自定义拖拽区域的拖拽上传
自定义拖拽区域样式（
```
.e-upload-drag-hover
```
）
通过外部按钮触发文件浏览

Templates & Custom UI

模板与自定义UI

📄 Read: references/templates-and-custom-ui.md

File list template with the
```
template
```
property
Building a completely custom upload UI (hiding default list with
```
showFileList
```
)
Customizing action buttons with HTML elements (
```
buttons
```
property)
Customizing the progress bar appearance
Preview images before uploading
Resize images before uploading to server

📄 阅读： references/templates-and-custom-ui.md

使用
```
template
```
属性自定义文件列表项
构建完全自定义的上传UI（通过
```
showFileList
```
隐藏默认列表）
使用HTML元素自定义操作按钮（
```
buttons
```
属性）
自定义进度条外观
上传前预览图片
上传到服务器前调整图片大小

Form Integration

表单集成

📄 Read: references/form-integration.md

Using Uploader inside HTML forms (synchronous submission)
Template-driven forms with
```
ngModel
```
Reactive forms with
```
FormGroup
```
Required field validation (
```
required
```
attribute)
Reset behavior with form reset

📄 阅读： references/form-integration.md

在HTML表单内使用Uploader（同步提交）
结合
```
ngModel
```
的模板驱动表单
结合
```
FormGroup
```
的响应式表单
必填字段验证（
```
required
```
属性）
表单重置时的行为

Styling & Appearance

样式与外观

📄 Read: references/styling-and-appearance.md

Customizing the uploader wrapper dimensions
Styling the browse button
Customizing the drop area text
Customizing the file list container
Hiding the default drop area
CSS class reference for key Uploader elements

📄 阅读： references/styling-and-appearance.md

自定义上传器容器尺寸
样式化浏览按钮
自定义拖拽区域文本
自定义文件列表容器
隐藏默认拖拽区域
关键Uploader元素的CSS类参考

Accessibility & Localization

无障碍访问与本地化

📄 Read: references/accessibility-and-localization.md

WCAG 2.2, Section 508, keyboard shortcuts
Screen reader and RTL support
Localizing all static labels and messages with L10n

📄 阅读： references/accessibility-and-localization.md

WCAG 2.2、Section 508、键盘快捷键
屏幕阅读器与RTL支持
通过L10n本地化所有静态标签和消息

Advanced How-To Patterns

高级实现模式

📄 Read: references/advanced-patterns.md

Upload files programmatically with the
```
upload()
```
method
Invisible (background) upload
Adding additional form data with
```
customFormData
```
JWT authentication for upload/remove requests
Show confirmation dialog before removing files
Get total size of selected files
Sort selected files in the file list
Open and edit uploaded files from the server
Convert uploaded images to binary format

📄 阅读： references/advanced-patterns.md

使用
```
upload()
```
方法以编程方式上传文件
隐形（后台）上传
通过
```
customFormData
```
添加额外表单数据
上传/删除请求的JWT认证
删除文件前显示确认对话框
获取所选文件的总大小
对文件列表中的所选文件进行排序
从服务器打开并编辑已上传文件
将上传的图片转换为二进制格式

API Reference

API参考

📄 Read: references/api.md

Complete properties, methods, and events reference
AsyncSettingsModel, ButtonsPropsModel, FilesPropModel
All event argument types and their fields

📄 阅读： references/api.md

完整的属性、方法和事件参考
AsyncSettingsModel、ButtonsPropsModel、FilesPropModel
所有事件参数类型及其字段

Quick Start Example

快速入门示例

Minimal file uploader with async upload (Angular 21+ standalone):

typescript

import { Component } from '@angular/core';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [UploaderModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-uploader
      [asyncSettings]="asyncSettings"
      [autoUpload]="false"
      (success)="onSuccess($event)"
      (failure)="onFailure($event)">
    </ejs-uploader>
  `
})
export class AppComponent {
  public asyncSettings = {
    saveUrl: 'https://your-api/upload/save',
    removeUrl: 'https://your-api/upload/remove'
  };

  onSuccess(args: any): void {
    console.log('Upload operation:', args.operation, 'File:', args.file.name);
  }

  onFailure(args: any): void {
    console.error('Upload failed:', args.file.name);
  }
}

CSS Theme Setup (

styles.css

css

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

带异步上传的极简文件上传器（Angular 21+独立组件）：

typescript

import { Component } from '@angular/core';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [UploaderModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-uploader
      [asyncSettings]="asyncSettings"
      [autoUpload]="false"
      (success)="onSuccess($event)"
      (failure)="onFailure($event)">
    </ejs-uploader>
  `
})
export class AppComponent {
  public asyncSettings = {
    saveUrl: 'https://your-api/upload/save',
    removeUrl: 'https://your-api/upload/remove'
  };

  onSuccess(args: any): void {
    console.log('Upload operation:', args.operation, 'File:', args.file.name);
  }

  onFailure(args: any): void {
    console.error('Upload failed:', args.file.name);
  }
}

CSS主题配置（

styles.css

）：

css

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

Common Patterns

常见实现模式

Pattern 1: Auto Upload with Drag-and-Drop

模式1：带拖拽的自动上传

typescript

// Automatically uploads dropped or browsed files
<ejs-uploader
  [asyncSettings]="asyncSettings"
  [dropArea]="dropElement"
  [multiple]="true"
  (success)="onSuccess($event)">
</ejs-uploader>

typescript

// 自动上传拖拽或浏览选择的文件
<ejs-uploader
  [asyncSettings]="asyncSettings"
  [dropArea]="dropElement"
  [multiple]="true"
  (success)="onSuccess($event)">
</ejs-uploader>

Pattern 2: Chunk Upload for Large Files

模式2：大文件分片上传

typescript

<ejs-uploader
  [asyncSettings]="chunkSettings"
  (chunkSuccess)="onChunkSuccess($event)"
  (chunkFailure)="onChunkFailure($event)">
</ejs-uploader>

// In component:
chunkSettings = {
  saveUrl: 'https://your-api/upload/save',
  removeUrl: 'https://your-api/upload/remove',
  chunkSize: 500000  // 500 KB chunks
};

typescript

<ejs-uploader
  [asyncSettings]="chunkSettings"
  (chunkSuccess)="onChunkSuccess($event)"
  (chunkFailure)="onChunkFailure($event)">
</ejs-uploader>

// 组件内代码：
chunkSettings = {
  saveUrl: 'https://your-api/upload/save',
  removeUrl: 'https://your-api/upload/remove',
  chunkSize: 500000  // 500 KB分片
};

Pattern 3: Validated Upload (Type + Size)

模式3：带验证的上传（类型+大小）

typescript

<ejs-uploader
  [asyncSettings]="asyncSettings"
  allowedExtensions=".jpg,.png,.pdf"
  [minFileSize]="1024"
  [maxFileSize]="5000000">
</ejs-uploader>

typescript

<ejs-uploader
  [asyncSettings]="asyncSettings"
  allowedExtensions=".jpg,.png,.pdf"
  [minFileSize]="1024"
  [maxFileSize]="5000000">
</ejs-uploader>

Pattern 4: Preloaded Files

模式4：预加载文件

typescript

<ejs-uploader
  [asyncSettings]="asyncSettings"
  [files]="preloadedFiles">
</ejs-uploader>

// In component:
preloadedFiles = [
  { name: 'report', size: 200000, type: '.pdf' },
  { name: 'photo', size: 500000, type: '.jpg' }
];

typescript

<ejs-uploader
  [asyncSettings]="asyncSettings"
  [files]="preloadedFiles">
</ejs-uploader>

// 组件内代码：
preloadedFiles = [
  { name: 'report', size: 200000, type: '.pdf' },
  { name: 'photo', size: 500000, type: '.jpg' }
];

Pattern 5: JWT-Authenticated Upload

模式5：JWT认证上传

typescript

<ejs-uploader
  [asyncSettings]="asyncSettings"
  (uploading)="addAuthHeader($event)"
  (removing)="addAuthHeader($event)">
</ejs-uploader>

addAuthHeader(args: any): void {
  args.currentRequest.setRequestHeader('Authorization', `Bearer ${this.token}`);
}

typescript

<ejs-uploader
  [asyncSettings]="asyncSettings"
  (uploading)="addAuthHeader($event)"
  (removing)="addAuthHeader($event)">
</ejs-uploader>

addAuthHeader(args: any): void {
  args.currentRequest.setRequestHeader('Authorization', `Bearer ${this.token}`);
}

Key Properties

关键属性

Property	Type	Default	Purpose
`[asyncSettings]`	AsyncSettingsModel	`{saveUrl:'',removeUrl:''}`	Server save/remove URLs and chunk config
`[autoUpload]`	boolean	`true`	Upload immediately on file selection
`[multiple]`	boolean	`true`	Allow selecting multiple files
`[allowedExtensions]`	string	`''`	Comma-separated allowed extensions (e.g., `.jpg,.png` )
`[minFileSize]`	number	`0`	Minimum file size in bytes
`[maxFileSize]`	number	`30000000`	Maximum file size in bytes (~28.6 MB)
`[files]`	FilesPropModel[]	`[]`	Preloaded files from server
`[dropArea]`	string \| HTMLElement	`null`	Custom drop target element or selector
`[directoryUpload]`	boolean	`false`	Enable folder/directory upload
`[sequentialUpload]`	boolean	`false`	Upload files one at a time
`[showFileList]`	boolean	`true`	Show/hide default file list
`[template]`	any	`null`	Custom file list item template
`[buttons]`	ButtonsPropsModel	`{browse,clear,upload}`	Customize button text/HTML
`[enabled]`	boolean	`true`	Enable or disable the component
`[cssClass]`	string	`''`	Additional CSS classes on root element
`[enableRtl]`	boolean	`false`	Right-to-left rendering
`[enableHtmlSanitizer]`	boolean	`true`	Prevent XSS in filenames
`[dropEffect]`	DropEffect	`'Default'`	Drag effect: Copy, Move, Link, None

属性	类型	默认值	用途
`[asyncSettings]`	AsyncSettingsModel	`{saveUrl:'',removeUrl:''}`	服务器保存/删除URL及分片配置
`[autoUpload]`	boolean	`true`	文件选择后立即上传
`[multiple]`	boolean	`true`	允许选择多个文件
`[allowedExtensions]`	string	`''`	逗号分隔的允许扩展名（例如： `.jpg,.png` ）
`[minFileSize]`	number	`0`	最小文件大小（字节）
`[maxFileSize]`	number	`30000000`	最大文件大小（字节，约28.6 MB）
`[files]`	FilesPropModel[]	`[]`	从服务器预加载的文件
`[dropArea]`	string \| HTMLElement	`null`	自定义拖拽目标元素或选择器
`[directoryUpload]`	boolean	`false`	启用文件夹/目录上传
`[sequentialUpload]`	boolean	`false`	逐个上传文件
`[showFileList]`	boolean	`true`	显示/隐藏默认文件列表
`[template]`	any	`null`	自定义文件列表项模板
`[buttons]`	ButtonsPropsModel	`{browse,clear,upload}`	自定义按钮文本/HTML
`[enabled]`	boolean	`true`	启用或禁用组件
`[cssClass]`	string	`''`	根元素上的额外CSS类
`[enableRtl]`	boolean	`false`	从右到左渲染
`[enableHtmlSanitizer]`	boolean	`true`	防止文件名中的XSS攻击
`[dropEffect]`	DropEffect	`'Default'`	拖拽效果：Copy、Move、Link、None

Key Events

关键事件

Event	When it Fires	Key Args
`(selected)`	Files selected or dropped	`filesData` , `cancel` , `modifiedFilesData`
`(uploading)`	Before each file upload starts	`fileData` , `currentRequest` , `customFormData` , `cancel`
`(success)`	Upload or remove succeeds	`file` , `operation` ( `upload` \| `remove` ), `event`
`(failure)`	Upload or remove fails	`file` , `operation` , `event`
`(progress)`	Upload progress	`file` , `event` (loaded, total)
`(removing)`	Before file remove request	`filesData` , `postRawFile` , `currentRequest`
`(beforeRemove)`	Before remove confirmation	`filesData` , `cancel`
`(beforeUpload)`	Before upload process	`fileData` , `customFormData`
`(change)`	File list changes	`file`
`(clearing)`	Before clear all action	`cancel`
`(chunkSuccess)`	Each chunk uploads OK	`chunkIndex` , `totalChunk` , `chunkSize` , `file`
`(chunkFailure)`	Each chunk fails	`chunkIndex` , `totalChunk` , `chunkSize` , `file` , `cancel`
`(chunkUploading)`	Before each chunk upload	`fileData` , `currentRequest` , `customFormData`
`(pausing)`	Chunk upload paused	`file` , `chunkIndex`
`(resuming)`	Chunk upload resumed	`file` , `chunkIndex`
`(canceling)`	Upload canceled	`file`
`(fileListRendering)`	Before each file item renders	`element` , `fileInfo`
`(actionComplete)`	All files processed	`fileData`
`(created)`	Component initialized	—

事件	触发时机	关键参数
`(selected)`	文件被选择或拖拽时	`filesData` , `cancel` , `modifiedFilesData`
`(uploading)`	每个文件上传开始前	`fileData` , `currentRequest` , `customFormData` , `cancel`
`(success)`	上传或删除成功时	`file` , `operation` （ `upload` \| `remove` ）, `event`
`(failure)`	上传或删除失败时	`file` , `operation` , `event`
`(progress)`	上传进度更新时	`file` , `event` （loaded、total）
`(removing)`	文件删除请求发送前	`filesData` , `postRawFile` , `currentRequest`
`(beforeRemove)`	删除确认前	`filesData` , `cancel`
`(beforeUpload)`	上传流程开始前	`fileData` , `customFormData`
`(change)`	文件列表变化时	`file`
`(clearing)`	清空所有操作执行前	`cancel`
`(chunkSuccess)`	每个分片上传成功时	`chunkIndex` , `totalChunk` , `chunkSize` , `file`
`(chunkFailure)`	每个分片上传失败时	`chunkIndex` , `totalChunk` , `chunkSize` , `file` , `cancel`
`(chunkUploading)`	每个分片上传开始前	`fileData` , `currentRequest` , `customFormData`
`(pausing)`	分片上传暂停时	`file` , `chunkIndex`
`(resuming)`	分片上传恢复时	`file` , `chunkIndex`
`(canceling)`	上传被取消时	`file`
`(fileListRendering)`	每个文件项渲染前	`element` , `fileInfo`
`(actionComplete)`	所有文件处理完成时	`fileData`
`(created)`	组件初始化完成时	—

Key Methods

关键方法

Method	Purpose
`upload(files?, custom?)`	Programmatically start upload for selected or specific files
`remove(fileData?, custom?, postRawFile?)`	Remove a file from list or server
`cancel(fileData?)`	Cancel an in-progress chunk upload
`pause(fileData?, custom?)`	Pause a chunk upload
`resume(fileData?, custom?)`	Resume a paused chunk upload
`retry(fileData?, fromCanceledStage?, custom?)`	Retry a failed or canceled upload
`clearAll()`	Clear all files from the list
`getFilesData(index?)`	Get file data array shown in the list
`createFileList(fileData)`	Programmatically create file list items
`sortFileList(filesData?)`	Sort file list alphabetically
`bytesToSize(bytes)`	Convert bytes to human-readable KB/MB string
`destroy()`	Destroy the component and detach events

方法	用途
`upload(files?, custom?)`	以编程方式启动所选文件或特定文件的上传
`remove(fileData?, custom?, postRawFile?)`	从列表或服务器中删除文件
`cancel(fileData?)`	取消正在进行的分片上传
`pause(fileData?, custom?)`	暂停分片上传
`resume(fileData?, custom?)`	恢复暂停的分片上传
`retry(fileData?, fromCanceledStage?, custom?)`	重试失败或取消的上传
`clearAll()`	清空列表中的所有文件
`getFilesData(index?)`	获取列表中显示的文件数据数组
`createFileList(fileData)`	以编程方式创建文件列表项
`sortFileList(filesData?)`	对文件列表按字母顺序排序
`bytesToSize(bytes)`	将字节转换为易读的KB/MB字符串
`destroy()`	销毁组件并解绑事件

Common Use Cases

常见使用场景

Use Case 1: Profile Photo Upload

multiple="false"

allowedExtensions=".jpg,.png,.gif,.webp"

maxFileSize=5000000

Use
```
selected
```
event to preview before upload
Auto upload with progress indicator

Use Case 2: Document Upload Portal

Multiple files,

allowedExtensions=".pdf,.doc,.docx,.xlsx"

Chunk upload for large files with pause/resume
Sequential upload to manage server load

Use Case 3: Image Gallery Batch Upload

Multiple files, directory upload enabled
Preview thumbnails using
```
selected
```
event + FileReader
Sort by file name before upload

Use Case 4: Secure File Upload (API-Authenticated)

JWT token injected via
```
uploading
```
event header
Custom
```
customFormData
```
to pass metadata
Server validates token before saving

Use Case 5: Form with Required File

```
autoUpload=false
```
, synchronous form submission
Required attribute validation with
```
data-required-message
```
Template-driven or reactive form binding

场景1：头像上传

multiple="false"

allowedExtensions=".jpg,.png,.gif,.webp"

maxFileSize=5000000

使用
```
selected
```
事件在上传前预览图片
带进度指示器的自动上传

场景2：文档上传门户

多文件上传，

allowedExtensions=".pdf,.doc,.docx,.xlsx"

大文件分片上传，支持暂停/恢复
顺序上传以管理服务器负载

场景3：图片库批量上传

多文件上传，启用目录上传
使用
```
selected
```
事件 + FileReader预览缩略图
上传前按文件名排序

场景4：安全文件上传（API认证）

通过
```
uploading
```
事件注入JWT令牌
自定义
```
customFormData
```
传递元数据
服务器在保存前验证令牌

场景5：带必填文件的表单

```
autoUpload=false
```
，同步表单提交
使用
```
data-required-message
```
进行必填属性验证
模板驱动或响应式表单绑定

Next Steps

下一步操作

Getting Started → Install package and render basic uploader
Async Upload → Configure save/remove URLs and upload modes
Validation → Add extension and size constraints
Chunk Upload → Handle large files with pause/resume
Templates → Customize file list appearance
Form Integration → Bind to Angular forms
Advanced Patterns → JWT auth, programmatic upload, custom UI
API Reference → Full properties, methods, events list

For detailed implementation, start with references/getting-started.md

快速入门 → 安装包并渲染基础上传器
异步上传 → 配置保存/删除URL及上传模式
文件验证 → 添加扩展名和大小约束
分片上传 → 处理大文件的暂停/恢复
模板定制 → 自定义文件列表外观
表单集成 → 绑定到Angular表单
高级模式 → JWT认证、编程式上传、自定义UI
API参考 → 完整的属性、方法、事件列表

如需详细实现，请从references/getting-started.md开始