|
| 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) |
0 commit comments