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

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

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

<div class="demo-card">
    <div class="demo-card-header">Basic Chunked Upload</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Chunked uploading splits large files into smaller pieces and sends them
            sequentially. This improves reliability and allows resuming failed uploads.
            Enable it with <code>EnableChunkedUpload="true"</code>.
        </p>

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

        <h5 class="mt-4">How It Works</h5>
        <ol>
            <li>The file is split into chunks (default 1 MB each)</li>
            <li>Each chunk is sent as a separate HTTP request to the chunk URL</li>
            <li>The server reassembles chunks in order</li>
            <li>Progress is tracked across all chunks for a smooth experience</li>
        </ol>

        <h5>JavaScript API Equivalent</h5>
        <div id="jsChunkedUploader" style="margin-top:0.5rem;"></div>

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

// JavaScript API approach
AjaxUploader.create(el, {
  uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/chunk") %>',
  chunked: true,
  chunkSize: 1048576,
  multiple: true,
  autoUpload: true
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    AjaxUploader.create(document.getElementById('jsChunkedUploader'), {
        uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/chunk") %>',
        chunked: true,
        chunkSize: 1048576,
        multiple: true,
        autoUpload: true,
        onTaskProgress: function (task, pct) {
            console.log(task.fileName + ': ' + Math.round(pct) + '%');
        },
        onTaskComplete: function (task) {
            console.log(task.fileName + ' upload complete');
        }
    });
</script>
</asp:Content>
