ChunkUpload.razor

@page "/File-Upload/Chunk-Upload"

@using Syncfusion.Blazor.Inputs

@*Hidden:Lines*@
@inherits SampleBaseComponent
@*End:Hidden*@

<SampleDescription>
    <p>This example demonstrates the chunk upload functionalities of the File Upload component. Browse or drag-and-drop a large file to upload with pause, resume, and retry options. </p>
</SampleDescription>
<ActionDescription>
    <p>When the file size is large or transfer the file with slow network connection, the chunk upload feature slices the files and upload the sliced chunks to server in sequential order using the <a href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.AsyncSettingsModel.html#Syncfusion_Blazor_Inputs_AsyncSettingsModel_ChunkSize" target="_blank" aria-label="Class reference of ChunkSize property in File Upload">ChunkSize</a> API.</p>
    <p>The sample is configured with the following options:</p>
        <ul>
            <li> While uploading, you can pause the upload and resume it later.</li>
            <li> If the upload fails, retry option will be enabled.</li>
            <li> The example is configured with maximum file size as "100 MB" to upload.</li>
        </ul>
    <p><b>See also</b></p>
    <ul>
        <li><a href="https://blazor.syncfusion.com/documentation/file-upload/chunk-upload/" target="_blank" aria-label="Blazor FileUpload Chunk Upload documentation">Blazor File Upload - Chunk Upload</a></li>
    </ul>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control-wrapper">
        <SfUploader MaxFileSize=104857600>
            <UploaderAsyncSettings SaveUrl="https://blazor.syncfusion.com/services/production/api/FileUploader/Save" RemoveUrl="https://blazor.syncfusion.com/services/production/api/FileUploader/Remove" ChunkSize=500000></UploaderAsyncSettings>
        </SfUploader>
    </div>
</div>

<style>
    .control-wrapper {
        max-width: 350px;
        margin: 0 auto;
        padding: 50px 0px 0px;
    }
</style>