DxUpload.ChunkSize Property

Specifies the chunk size in bytes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public int ChunkSize { get; set; }

Property Value

Type	Description
Int32	The chunk size in bytes.

Remarks

The Upload can split large files into small packets and send them to the server in multiple requests (one by one). To enable chunk upload, set the ChunkSize property to a positive value that specifies the packet size in bytes.

<DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/UploadChunkFile/"
          ChunkSize="1000000">
</DxUpload>

On the server, configure your controller to process file chunks. To access the uploaded file, use the Upload’s Name property value. To get information about the file chunk, use a JSON object with the same structure as the CnunkMetadata class in the example below.

To access file and chunk metadata, use the following ways:

• Create an action with parameters. The first parameter’s name should match the Name property value. The second parameter should be a string that defines chunk metadata serialized to JSON.

  public ActionResult UploadChunkFile(IFormFile myFile, [FromForm] string chunkMetadata) {
      // ...
      var metaDataObject = JsonConvert.DeserializeObject<ChunkMetadata>(chunkMetadata);
      // ...
  }
  

• Get the uploaded file and chunk metadata from form variables.

  public ActionResult UploadChunkFile() {
      // ...
      var myFile = Request.Form.Files["myFile"];
      var chunkMetadata = Request.Form["chunkMetadata"];
      var metaDataObject = JsonConvert.DeserializeObject<ChunkMetadata>(chunkMetadata);
      // ...
  }
  

In the upload action, merge chunks and save the resulting file to the target location.

using System;
using System.IO;
using System.Linq;
using System.Text.Json;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

// Declare a class that stores chunk details.
public class ChunkMetadata {
    public int Index { get; set; }
    public int TotalCount { get; set; }
    public int FileSize { get; set; }
    public string FileName { get; set; }
    public string FileType { get; set; }
    public string FileGuid { get; set; }
}

[Route("api/[controller]")]
public class UploadController : ControllerBase {
    private readonly IWebHostEnvironment _hostingEnvironment;

    public UploadController(IWebHostEnvironment hostingEnvironment) {
        _hostingEnvironment = hostingEnvironment;
    }

    [HttpPost]
    // "myFile" is the value of the Upload's "Name" property.
    public ActionResult UploadChunkFile(IFormFile myFile) {
        string chunkMetadata = Request.Form["chunkMetadata"];
        try {
            if(!string.IsNullOrEmpty(chunkMetadata)) {
                var metaDataObject = JsonSerializer.Deserialize<ChunkMetadata>(chunkMetadata);
                // Write code that appends the 'myFile' file chunk to the temporary file.
                // You can use the $"{metaDataObject.FileGuid}.tmp" name for the temporary file.
                // Don't rely on or trust the FileName property without validation.
                if(metaDataObject.Index == metaDataObject.TotalCount - 1) {
                    // Write code that saves the 'myFile' file.
                    // Don't rely on or trust the FileName property without validation.
                }
            }
        } catch {
            return BadRequest();
        }
        return Ok();
    }
}

Users can pause or cancel file upload, if the AllowPause and AllowCancel properties are set to true.

Run Demo: Upload - Chunk Upload