syncfusion-aspnetcore-uploader（同步融合 aspnetcore 上传器）

Implementing Uploader in ASP.NET Core

The Uploader is a powerful file upload component for ASP.NET Core that handles file selection, validation, asynchronous uploads, drag-and-drop support, and progress tracking. This skill guides you through implementing Uploader in ASP.NET Core applications using Syncfusion's TagHelper syntax.

When to Use This Skill

Use this skill when you need to:

• Create file upload forms for images, documents, and media
• Implement asynchronous file uploads with progress feedback
• Validate file types and sizes before upload
• Support drag-and-drop file selection
• Handle multiple file uploads simultaneously
• Process file removal and cleanup
• Build enterprise-grade file management interfaces
• Implement chunk uploads for large files
• Integrate file uploads into HTML forms
• Support paste-to-upload and directory uploads
• Ensure proper file handling and security

Key Features

Documentation Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Prerequisites and system requirements
• Installing Syncfusion.EJ2.AspNetCore NuGet package
• Configuring TagHelpers in _ViewImports.cshtml
• Adding stylesheets and script resources via CDN
• Registering the script manager
• Creating your first Uploader
• Basic configuration and properties

Asynchronous Upload

📄 Read: references/async-upload.md

• Configuring SaveUrl and RemoveUrl endpoints
• Single vs multiple file upload modes
• Auto-upload settings and manual upload triggers
• Success and failure event handlers
• Progress tracking and upload lifecycle
• Handling upload cancellation

File Validation

📄 Read: references/file-validation.md

• File type validation with allowed-extensions
• File size constraints (min-file-size, max-file-size)
• Maximum file count restrictions
• Duplicate file detection and prevention
• Custom validation patterns and error messages
• Validation before and after upload

Drag and Drop Support

📄 Read: references/drag-drop-support.md

• Default drag-and-drop behavior
• Configuring custom drop areas
• Multiple drop zones on single page
• Drag-drop events and event handling
• Paste-to-upload from clipboard
• Directory drag-drop support

Templates and Styling

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

• Template property for custom UI
• Button customization and arrangement
• File list item rendering
• CSS class customization
• Theme integration (Fluent, Material, Bootstrap)
• Responsive design patterns

Advanced Patterns

📄 Read: references/advanced-patterns.md

• Chunk upload for large files
• Form submission with file uploads
• Directory upload handling
• File removal and cleanup strategies
• Advanced error handling
• Security considerations and CORS

Quick Start Example

Basic Uploader with Async Upload (TagHelper)

<!-- Views/Home/Index.cshtml -->
<div class="form-group">
    <ejs-uploader id="uploader">
        <e-async-settings save-url="Home/Save" remove-url="Home/Remove"></e-async-settings>
        <e-upload-files></e-upload-files>
    </ejs-uploader>
</div>

<div id="uploadedFiles"></div>

Configuration in HomeController.cs

using Microsoft.AspNetCore.Mvc;
using System.IO;

public class HomeController : Controller
{
    private readonly IWebHostEnvironment _webHostEnvironment;

    public HomeController(IWebHostEnvironment webHostEnvironment)
    {
        _webHostEnvironment = webHostEnvironment;
    }

    [HttpPost]
    public IActionResult Save(IFormFile[] uploader)
    {
        if (uploader != null && uploader.Length > 0)
        {
            string uploadPath = Path.Combine(_webHostEnvironment.WebRootPath, "Uploads");
            if (!Directory.Exists(uploadPath))
                Directory.CreateDirectory(uploadPath);

            foreach (IFormFile file in uploader)
            {
                string filePath = Path.Combine(uploadPath, file.FileName);
                using (FileStream fs = System.IO.File.Create(filePath))
                {
                    file.CopyTo(fs);
                    fs.Flush();
                }
            }
        }
        return Ok();
    }

    [HttpPost]
    public IActionResult Remove(string[] files)
    {
        string uploadPath = Path.Combine(_webHostEnvironment.WebRootPath, "Uploads");

        foreach (string file in files)
        {
            string filePath = Path.Combine(uploadPath, file);
            if (System.IO.File.Exists(filePath))
                System.IO.File.Delete(filePath);
        }
        return Ok();
    }
}

Configuration in _ViewImports.cshtml (one-time setup)

@addTagHelper *, Syncfusion.EJ2

In _Layout.cshtml (one-time setup)

W012 – Runtime remote-code dependency risk: Loading scripts and styles from an external CDN means a compromised or tampered CDN file would execute in your users' browsers. Mitigate this with one of the two approaches below. Preferred – Self-host the assets (eliminates the runtime remote dependency entirely): 1. Copy ej2.min.js and the theme CSS from the NuGet package or a one-time CDN download into wwwroot/lib/syncfusion/. 2. Reference them with relative paths — no integrity attribute needed because the files are served from your own origin. Alternative – CDN with Subresource Integrity (SRI): If you must use the CDN, pin the file with an integrity hash so the browser rejects any tampered version. Compute the hash with openssl dgst -sha384 -binary <file> | openssl base64 -A and update it on every version upgrade.

Option A — Self-hosted (recommended)

<head>
    <!-- Served from your own wwwroot — no external runtime dependency -->
    <link rel="stylesheet" href="~/lib/syncfusion/fluent.css" />
</head>
<body>
    @RenderBody()

    <script src="~/lib/syncfusion/ej2.min.js"></script>
    <ejs-scripts></ejs-scripts>
</body>

Option B — CDN with SRI pinning

<head>
    <!-- integrity hash must match the exact file; regenerate on every version upgrade -->
    <link rel="stylesheet"
          href="https://cdn.syncfusion.com/ej2/24.1.48/fluent.css"
          integrity="sha384-REPLACE_WITH_ACTUAL_HASH_FOR_fluent.css"
          crossorigin="anonymous" />
</head>
<body>
    @RenderBody()

    <script src="https://cdn.syncfusion.com/ej2/24.1.48/dist/ej2.min.js"
            integrity="sha384-REPLACE_WITH_ACTUAL_HASH_FOR_ej2.min.js"
            crossorigin="anonymous"></script>
    <ejs-scripts></ejs-scripts>
</body>

Common Patterns

Pattern 1: Multiple File Upload with Progress

<ejs-uploader id="multiUploader"
    allowed-extensions=".jpg,.png,.pdf,.doc,.docx"
    max-file-size="5242880"
    auto-upload="false"
    multiple="true"
    uploading="onUploading"
    success="onSuccess"
    failure="onFailure">
    <e-async-settings save-url="Home/Save" remove-url="Home/Remove"></e-async-settings>
</ejs-uploader>

<script>
function onUploading(args) {
    console.log('Uploading: ' + args.file.name);
    console.log('Progress: ' + (args.percentComplete * 100) + '%');
}

function onSuccess(args) {
    if (args.operation === 'upload') {
        console.log(args.file.name + ' uploaded successfully');
    }
}

function onFailure(args) {
    console.log('Upload failed: ' + args.response);
}
</script>

Pattern 2: Single File Upload with Validation

<ejs-uploader id="singleUploader"
    allowed-extensions=".jpg,.png,.jpeg"
    max-file-size="2097152"
    multiple="false"
    selected="onFileSelected"
    auto-upload="true">
    <e-async-settings save-url="Home/Save" remove-url="Home/Remove"></e-async-settings>
</ejs-uploader>

<script>
function onFileSelected(args) {
    if (args.filesData.length > 1) {
        args.filesData.splice(1);
        alert('Only one file can be selected');
    }
}
</script>

Pattern 3: Drag-Drop with Custom Area

<div id="dropArea" style="border: 2px dashed #ccc; padding: 20px; min-height: 200px;">
    Drop files here
</div>

<ejs-uploader id="uploader"
    drop-area="#dropArea"
    auto-upload="true">
    <e-async-settings save-url="Home/Save" remove-url="Home/Remove"></e-async-settings>
</ejs-uploader>

Key Properties

Common Use Cases

Use Case 1: Profile Picture Upload

• Single file, image only, auto-upload
• Reference: references/advanced-patterns.md

Use Case 2: Document Management

• Multiple files, validation, chunk upload for large files
• Reference: references/async-upload.md

Use Case 3: Bulk Import

• Directory upload, form submission, error handling
• Reference: references/advanced-patterns.md

Use Case 4: Media Gallery

• Multiple uploads, custom templates, drag-drop
• Reference: references/templates-and-styling.md

Next Step: Read references/getting-started.md to begin implementing Uploader in your ASP.NET Core application.