> INITIALIZING_SYSTEM _
root@jules : ~/workspace/logs/layui-chunk-upload-en.md

Industrial File Uploads: Chunking Large Files with Layui and C#

DATE: 4/24/2026 DIR: /Web Dev
#Layui#C##Upload

In the equipment management module, technicians often upload massive log archives or CAD drawings. A monolithic upload hogs bandwidth and drops on weak workshop networks. The best solution: Frontend slicing, Backend merging.

The frontend, based on Layui, can use the native FileReader API to slice the file into 2MB chunks. However, the C# backend logic is the true core: Receive chunks -> Store temporarily -> Assemble upon receiving the merge command.

[HttpPost("UploadChunk")]
public async Task<IActionResult> UploadChunk(IFormFile file, string identifier, int chunkNumber)
{
    // Temp path based on unique file identifier
    string tempPath = Path.Combine("TempUploads", identifier);
    if (!Directory.Exists(tempPath)) Directory.CreateDirectory(tempPath);

    // Save current chunk
    string chunkPath = Path.Combine(tempPath, $"{chunkNumber}.part");
    using (var stream = new FileStream(chunkPath, FileMode.Create))
    {
        await file.CopyToAsync(stream);
    }
    return Ok();
}

[HttpPost("MergeFile")]
public IActionResult MergeFile(string identifier, string finalFileName, int totalChunks)
{
    string targetPath = Path.Combine("Uploads", finalFileName);
    using (var fs = new FileStream(targetPath, FileMode.Create))
    {
        for (int i = 1; i <= totalChunks; i++)
        {
            string chunkPath = Path.Combine("TempUploads", identifier, $"{i}.part");
            byte[] bytes = System.IO.File.ReadAllBytes(chunkPath);
            fs.Write(bytes, 0, bytes.Length);
            System.IO.File.Delete(chunkPath); // Clean up temp chunk immediately
        }
    }
    return Ok(new { Path = targetPath });
}

Tested with a 500MB file on an intranet, chunking is not only stable but allows for a smooth progress bar experience on the frontend.