Skip to content

Commit 6e07bb6

Browse files
docs(Upload): add chunk upload docs
1 parent f1ab265 commit 6e07bb6

File tree

2 files changed

+98
-0
lines changed

2 files changed

+98
-0
lines changed

components/upload/chunk-upload.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
title: Chunk Upload
3+
page_title: Chunk Upload
4+
description: Enable and configure chunk upload in Upload for Blazor.
5+
slug: upload-chunk
6+
tags: telerik,blazor,upload,chunk
7+
published: True
8+
position: 3
9+
---
10+
11+
# Chunk Upload
12+
13+
Chunk upload enables file uploads by dividing the file into smaller parts (chunks) and sending them in multiple requests to the remote endpoint, where they are reassembled into the final file.
14+
15+
## Basics
16+
17+
To setup the feature, use the `UploadChunkSettings` tag, which is nested inside `UploadSettings`. The tag includes the following parameters:
18+
19+
| Parameter | Type and Default Value | Description |
20+
|----------|----------|----------|
21+
| `AutoRetryAfter` | `double` <br/> (100) | Specifies the amount of time in milliseconds after which a failed chunk upload request will be retried.
22+
| `Enabled` | `bool` <br/> (`true`) | Specifies if the chunk upload is enabled.
23+
| `MaxAutoRetries` | `int` <br/> (1) | Specifies the number of attempts to retry uploading a failed chunk.
24+
| `MetadataField` | `string` <br/> (`chunkMetadata`) | Specifies the name of the variable that will receive the chunk upload metadata in the remote endpoint.
25+
| `Resumable` | `bool` <br/> (`true`) | Specifies if the file upload process could be paused and later resumed.
26+
| `Size` | `double` <br/> (1024 * 1024) | The size of the chunks in bytes.
27+
28+
## Events
29+
30+
The Upload exposes several relevant events. You can find related examples in the [Events](slug:upload-events) article.
31+
32+
* `OnPause` - fires when the user clicks on the pause button during chunk upload.
33+
* `PageSizeChanged` - fires when the user clicks on the "resume" button during chunk upload.
34+
35+
>caption Enable Chunk Upload
36+
37+
````RAZOR
38+
<TelerikUpload SaveUrl="@CustomSaveUrl"
39+
OnPause="@OnPause"
40+
OnResume="@OnResume"
41+
RemoveUrl="@RemoveUrl"
42+
AutoUpload="true">
43+
<UploadSettings>
44+
<UploadChunkSettings Size="16000"
45+
AutoRetryAfter="300"
46+
MaxAutoRetries="2"
47+
MetadataField="customChunkMetadata"
48+
Resumable="false">
49+
</UploadChunkSettings>
50+
</UploadSettings>
51+
</TelerikUpload>
52+
53+
@code {
54+
private string SaveUrl => NavigationManager.ToAbsoluteUrl("api/upload/chunksave");
55+
private string RemoveUrl => NavigationManager.ToAbsoluteUrl("api/upload/remove");
56+
private string CustomSaveUrl => NavigationManager.ToAbsoluteUrl("api/upload/chunksavecustom");
57+
58+
private void OnPause(UploadPauseEventArgs args)
59+
{
60+
Console.WriteLine("pause event");
61+
62+
foreach (var file in args.Files)
63+
{
64+
Console.WriteLine(file.Name);
65+
}
66+
}
67+
68+
private void OnResume(UploadResumeEventArgs args)
69+
{
70+
Console.WriteLine("resume event");
71+
72+
foreach (var file in args.Files)
73+
{
74+
Console.WriteLine(file.Name);
75+
}
76+
}
77+
}
78+
````
79+
80+
## See Also
81+
82+
* [Blazor Upload](slug:upload-overview)

components/upload/events.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,10 @@ First, get familiar with the [**Event Arguments**](#event-arguments) section, as
1717
* [`OnCancel`](#oncancel)
1818
* [`OnClear`](#onclear)
1919
* [`OnError`](#onerror)
20+
* [`OnPause`](#onpause)
2021
* [`OnProgress`](#onprogress)
2122
* [`OnRemove`](#onremove)
23+
* [`OnResume`](#onresume)
2224
* [`OnSelect`](#onselect)
2325
* [Renaming uploaded files](#renaming-a-file)
2426
* [`OnSuccess`](#onsuccess)
@@ -179,6 +181,13 @@ public async Task<IActionResult> Save(IFormFile files)
179181

180182
See the [full example](#example) below.
181183

184+
## OnPause
185+
186+
The `OnPause` event fires when the user clicks on the pause button during chunk upload. The `UploadPauseEventArgs` event argument contains the [properties `Files` and `IsCancelled`](#event-arguments). The `Files` property can contain one or more files.
187+
188+
If you cancel the event, the chunk upload will not be paused.
189+
190+
See a full example in the [Chunk Upload article](slug:upload-chunk).
182191

183192
## OnProgress
184193

@@ -274,6 +283,13 @@ public async Task<IActionResult> Remove([FromForm] string files)
274283

275284
See the [full example](#example) below.
276285

286+
## OnResume
287+
288+
The `OnResume` event fires when the user clicks on the resume button during chunk upload. The `UploadResumeEventArgs` event argument contains the [properties `Files` and `IsCancelled`](#event-arguments). The `Files` property can contain one or more files.
289+
290+
If you cancel the event, the chunk upload will not be resumed.
291+
292+
See a full example in the [Chunk Upload article](slug:upload-chunk).
277293

278294
## OnSelect
279295

0 commit comments

Comments
 (0)