<%@ Page Title="Parallel Chunks" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Parallel Chunks - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Parallel Chunks</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Parallel Chunk Uploads</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Upload multiple chunks of a file simultaneously to maximize bandwidth utilization.
            The <code>ParallelChunks</code> setting controls how many chunk requests are sent in parallel.
        </p>

        <au:AjaxFileUpload ID="Uploader1" runat="server"
            EnableChunkedUpload="true"
            ChunkSize="2097152"
            ParallelChunks="3"
            AllowMultiple="true"
            ShowProgress="true" />

        <div class="mb-3 mt-3">
            <label class="form-label fw-bold">Concurrency</label>
            <select id="concurrency" class="form-select" style="width:auto;display:inline-block;">
                <option value="1">1 (Sequential)</option>
                <option value="2">2 Parallel</option>
                <option value="3" selected>3 Parallel</option>
                <option value="5">5 Parallel</option>
            </select>
        </div>

        <div id="stats" class="mt-2 text-muted small"></div>

        <div class="code-panel">
            <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
    EnableChunkedUpload="true"
    ChunkSize="2097152"
    ParallelChunks="3"
    AllowMultiple="true"
    ShowProgress="true" /&gt;

// JavaScript API approach
var uploader = AjaxUploader.create('#uploader', {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/chunk") %>',
    chunked: true,
    chunkSize: 2 * 1024 * 1024,
    concurrency: 3, // parallel chunk uploads
    onTaskProgress: function(task) {
        stats.textContent = task.fileName + ': ' +
            Math.round(task.percent) + '% - ' +
            AjaxUploader.formatSize(task.speed) + '/s';
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var stats = document.getElementById('stats');
    var uploader = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('taskProgress', function(task) {
            stats.textContent = task.fileName + ': ' +
                Math.round(task.percent) + '% - ' +
                AjaxUploader.formatSize(task.speed) + '/s';
        });
        uploader.on('taskComplete', function(task) {
            stats.textContent = task.fileName + ' completed.';
        });
    }

    document.getElementById('concurrency').addEventListener('change', function() {
        if (uploader) {
            uploader.setOptions({ concurrency: parseInt(this.value) });
        }
    });
</script>
</asp:Content>
