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

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

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

<div class="demo-card">
    <div class="demo-card-header">Custom Chunk Size</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Configure the chunk size used during chunked uploads. Smaller chunks provide more granular
            progress feedback while larger chunks reduce HTTP overhead. Choose a size that balances
            your network conditions and user experience.
        </p>

        <div class="mb-3">
            <label class="form-label fw-bold">Select Chunk Size</label>
            <div class="btn-group d-block mb-3" role="group">
                <button type="button" class="btn btn-outline-primary active" onclick="setChunkSize(1)">1 MB</button>
                <button type="button" class="btn btn-outline-primary" onclick="setChunkSize(2)">2 MB</button>
                <button type="button" class="btn btn-outline-primary" onclick="setChunkSize(10)">10 MB</button>
            </div>
            <p class="text-muted">Current chunk size: <strong id="currentSize">1 MB</strong></p>
        </div>

        <div id="uploader"></div>
        <div id="status" class="mt-2 text-muted"></div>

        <div class="code-panel">
            <pre><code>var uploader = AjaxUploader.create('#uploader', {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/chunk") %>',
    chunked: true,
    chunkSize: 1 * 1024 * 1024, // 1 MB
    multiple: true,
    onTaskProgress: function(task) {
        status.textContent = task.fileName + ': ' +
            Math.round(task.percent) + '% (' +
            AjaxUploader.formatSize(task.loaded) + ')';
    },
    onTaskComplete: function(task) {
        status.textContent = task.fileName + ' uploaded successfully.';
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var status = document.getElementById('status');
    var uploader = AjaxUploader.create('#uploader', {
        uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/chunk") %>',
        chunked: true,
        chunkSize: 1 * 1024 * 1024,
        multiple: true,
        onTaskProgress: function(task) {
            status.textContent = task.fileName + ': ' +
                Math.round(task.percent) + '% (' +
                AjaxUploader.formatSize(task.loaded) + ')';
        },
        onTaskComplete: function(task) {
            status.textContent = task.fileName + ' uploaded successfully.';
        }
    });

    function setChunkSize(mb) {
        uploader.setOptions({ chunkSize: mb * 1024 * 1024 });
        document.getElementById('currentSize').textContent = mb + ' MB';
        document.querySelectorAll('.btn-group .btn').forEach(function(b) {
            b.classList.remove('active');
        });
        event.target.classList.add('active');
    }
</script>
</asp:Content>
