<%@ 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.2 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="demo-expect"><strong>What you should see:</strong> 1&nbsp;MB chunks instead of the default 5&nbsp;MB. Pick a multi-megabyte file and the network panel shows several numbered chunk POSTs plus one completion call.</div> <div class="mb-3"> <div class="form-label fw-bold" id="chunkSizeLabel">Select Chunk Size</div> <div class="btn-group d-block mb-3" role="group" id="chunkSizeControls" aria-labelledby="chunkSizeLabel"> <button type="button" class="btn btn-outline-primary active" data-chunk-size="1">1 MB</button> <button type="button" class="btn btn-outline-primary" data-chunk-size="2">2 MB</button> <button type="button" class="btn btn-outline-primary" data-chunk-size="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" role="status" aria-live="polite"></div> <div class="code-panel"> <pre><code>var uploader = AjaxUploader.create('#uploader', {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 chunkUrl: '<%= ResolveUrl("~/ajaxupload.axd/chunk") %>',
 chunkCompleteUrl: '<%= ResolveUrl("~/ajaxupload.axd/chunk/complete") %>',
 chunked: true,
 chunkSize: 1 * 1024 * 1024, // 1 MB
 multiple: true,
 onTaskProgress: function(task) {
 status.textContent = task.fileName + ': ' +
 clampPercent(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');
 function setStatus(message) {
 if (status) status.textContent = message;
 }
 function clampPercent(value) {
 var pct = Number(value);
 if (!isFinite(pct)) return 0;
 return Math.max(0, Math.min(100, Math.round(pct)));
 }
 var chunkSizeControls = document.getElementById('chunkSizeControls');
 var currentSize = document.getElementById('currentSize');
 var uploader = window.AjaxUploader && typeof AjaxUploader.create === 'function' ? AjaxUploader.create('#uploader', {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 chunkUrl: '<%= ResolveUrl("~/ajaxupload.axd/chunk") %>',
 chunkCompleteUrl: '<%= ResolveUrl("~/ajaxupload.axd/chunk/complete") %>',
 chunked: true,
 chunkSize: 1 * 1024 * 1024,
 multiple: true,
 onTaskProgress: function(task) {
 setStatus(task.fileName + ': ' +
 clampPercent(task.percent) + '% (' +
 (window.AjaxUploader && AjaxUploader.formatSize ? AjaxUploader.formatSize(task.loaded) : (task.loaded || 0) + ' B') + ')');
 },
 onTaskComplete: function(task) {
 setStatus(task.fileName + ' uploaded successfully.');
 }
 }) : null;
 if (!uploader) setStatus('Uploader API is still loading. Refresh the page or try again in a moment.');

 function setChunkSize(mb, button) {
 if (!uploader) return;
 uploader.setOptions({ chunkSize: mb * 1024 * 1024 });
 if (currentSize) currentSize.textContent = mb + ' MB';
 if (chunkSizeControls) chunkSizeControls.querySelectorAll('.btn').forEach(function(b) {
 b.classList.remove('active');
 });
 button.classList.add('active');
 }

 if (chunkSizeControls) chunkSizeControls.addEventListener('click', function (event) {
 var button = event.target.closest('button[data-chunk-size]');
 if (!button) {
 return;
 }
 setChunkSize(Number(button.dataset.chunkSize), button);
 });
</script>
</asp:Content>
