Chunk Upload in Blazor File Upload Component
2 Jul 202410 minutes to read
The Uploader sends the large file split into small chunks and transmits to the server using AJAX. You can also pause, resume, and retry the failed chunk file.
NOTE
The chunk upload works in asynchronous upload only.
To enable the chunk upload, set the size to ChunkSize option of the upload and it receives the value in bytes
. The OnChunkUploadStart event is triggered at the start of chunk upload process.
Save and remove action for Blazor (ASP.NET Core hosted) application
The Uploader sends the large file split into small chunks and transmits to the server using AJAX. You can also pause, resume, and retry the failed chunk file.
[Route("api/[controller]")]
public class SampleDataController : Controller
{
public string uploads = ".\\Uploaded Files"; // replace with your directory path
[HttpPost("[action]")]
public async Task<IActionResult> Save(IFormFile UploadFiles) // Save the uploaded file here
{
if (UploadFiles.Length > 0)
{
//Create directory if not exists
if (!Directory.Exists(uploads))
{
Directory.CreateDirectory(uploads);
}
if (UploadFiles.Length > 0)
{
if (UploadFiles.ContentType == "application/octet-stream") //Handle chunk upload
{
var filePath = Path.Combine(uploads, UploadFiles.FileName);
using (var fileStream = new FileStream(filePath, FileMode.Append))
{
await UploadFiles.CopyToAsync(fileStream);
}
}
else //Handle normal upload
{
var filePath = Path.Combine(uploads, UploadFiles.FileName);
using (var fileStream = new FileStream(filePath, FileMode.Create))
{
await UploadFiles.CopyToAsync(fileStream);
}
}
}
}
return Ok();
}
[HttpPost("[action]")]
public void Remove(string UploadFiles) // Delete the uploaded file here
{
if(UploadFiles != null)
{
var filePath = Path.Combine(uploads, UploadFiles);
if (System.IO.File.Exists(filePath))
{
//Delete the file from server
System.IO.File.Delete(filePath);
}
}
}
}
@using Syncfusion.Blazor.Inputs
<SfUploader ID="UploadFiles">
<UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove" ChunkSize="500000"></UploaderAsyncSettings>
<UploaderEvents OnChunkUploadStart="@OnChunkUploadStartHandler" OnChunkSuccess="@OnChunkSuccessHandler" Success="@SuccessHandler" OnChunkFailure="@OnChunkFailureHandler"></UploaderEvents>
</SfUploader>
@code {
private void OnChunkUploadStartHandler(UploadingEventArgs args)
{
// Here, you can customize your code.
}
private void OnChunkSuccessHandler(SuccessEventArgs args)
{
// Here, you can customize your code.
}
private void SuccessHandler(SuccessEventArgs args)
{
// Here, you can customize your code.
}
private void OnChunkFailureHandler(FailureEventArgs args)
{
// Here, you can customize your code.
}
}
The chunk upload functionality separates the selected files into blobs of the data or chunks. These chunks are transmitted to the server using an AJAX request. The chunks are sent in sequential order, and the next chunk can be sent to the server according to the success of the previous chunk. If any one of the chunks failed, then the remaining chunk cannot be sent to the server. The ChunkSuccess or ChunkFailure event will be triggered when the chunk is sent to the server successfully or failed. If all the chunks are sent to the server successfully, the uploader Success event is triggered.
NOTE
Chunk upload will work when the selected file size is greater than the specified chunk size. otherwise, it upload the files normally.
Save action configuration in server-side blazor
The uploader save action configuration in server-side blazor application, using MVC via UseMvcWithDefaultRoute
in ASP.NET Core 3.0 and services.AddMvc(option => option.EnableEndpointRouting = false).SetCompatibilityVersion(CompatibilityVersion.Version_3_0)
on IServiceCollection requires an explicit opt-in inside Startup.cs page. This is required because MVC must know whether it can rely on the authorization and CORS Middle ware during initialization.
using Microsoft.AspNetCore.Mvc;
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc(option => option.EnableEndpointRouting = false).SetCompatibilityVersion(CompatibilityVersion.Version_3_0);
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<WeatherForecastService>();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseMvcWithDefaultRoute();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub<App>(selector: "app");
endpoints.MapFallbackToPage("/_Host");
});
}
Additional configurations
To modify the chunk upload, the following options can be used.
-
RetryAfterDelay: If error occurs while sending any chunk request from JavaScript, hold the operation for 500 milliseconds (by default), and retry the operation using chunk. This can be achieved by using the AsyncSettings property. You can modify the holding time interval in milliseconds.
-
RetryCount: Specifies the number of retry actions performed when the file fails to upload. By default, retry action is performed 3 times. If the file fails to upload continuously, the request is
aborted and the uploader Failure event will trigger.
The following sample specifies the chunk upload delay with 3000 milliseconds and the retry count is 5. The failure event is triggered as the wrong saveUrl is used.
SaveUrl
and RemoveUrl
actions are explained in this link.
@using Syncfusion.Blazor.Inputs
<SfUploader ID="UploadFiles">
<UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove" ChunkSize=500000 RetryCount=5 RetryAfterDelay =3000>
</UploaderAsyncSettings>
</SfUploader>
Resumable upload
Allows you to resume an upload operation after a network failure or manually interrupts (pause) the upload. You can perform pause and resume upload actions using public methods (pause and resume) and UI interaction. The pause icon is enabled after the upload begins. The Paused event is triggered when we pause the uploading file, and the OnResume event is triggered when we click the resume icon to upload the remaining file.
NOTE
The pause and resume features are available only when the chunk upload is enabled.
SaveUrl
and RemoveUrl
actions are explained in this link.
@using Syncfusion.Blazor.Inputs
<SfUploader ID="UploadFiles">
<UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove" ChunkSize=500000>
</UploaderAsyncSettings>
<UploaderEvents OnResume="@OnResumeHandler" Paused="@PausedHandler"></UploaderEvents>
</SfUploader>
@code {
private void OnResumeHandler(PauseResumeEventArgs args)
{
// Here, you can customize your code.
}
private void PausedHandler(PauseResumeEventArgs args)
{
// Here, you can customize your code.
}
}
Cancel upload
The uploader component allows you to cancel the uploading file. This can be achieved by clicking the cancel icon or using the Cancel
method. The Canceling event will be fired whenever the file upload request is canceled. While canceling the upload request, the partially uploaded file is removed from the server.
When the request fails, the pause icon is changed to retry icon. By clicking the retry icon, sends the failed chunk request again to the server and upload started from where it is failed. You can retry the canceled upload request again using retry UI or Retry
methods. But, if you retry this, the file upload action again starts from initial.
The following example explains about chunk upload with cancel support.
SaveUrl
and RemoveUrl
actions are explained in this link.
@using Syncfusion.Blazor.Inputs
<SfUploader ID="UploadFiles">
<UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove" ChunkSize=500000>
</UploaderAsyncSettings>
</SfUploader>
NOTE
The retry action has different working behavior for chunk upload and default upload.
* Chunk upload: Retries to upload the failed request where it is failed previously.
* Default upload: Retries to upload the failed file again from initial.