<%@ Page Title="AjaxUploader v5.3 Demos" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AjaxUploader.Demos.DefaultPage" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">AjaxUploader v5.3 Demos</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="alert alert-primary p-4 mb-4">
  <h4 class="mb-3">Start here - three steps to a working upload</h4>
  <ol class="mb-2" style="font-size:1.02rem">
    <li><strong><a href="Demos/BasicUsage/SingleFile.aspx">Single File</a></strong> - select a file
        and watch it upload AND save (the green strip prints the exact path under
        <code>uploads\</code>). This one page is the complete pattern: control + AutoPostBack +
        a <code>FileUploaded</code> handler.</li>
    <li><strong>Understand saving</strong> - uploads land in a temporary store and are swept after
        60 minutes; your <code>FileUploaded</code> handler is what makes them permanent.
        Read <code>docs\04-Saving-Uploaded-Files.txt</code> (5 minutes, covers every pitfall).</li>
    <li><strong>Pick your features</strong> - every demo card below is runnable and states what you
        should see. If anything misbehaves, open <code>SaveDiagnostic.aspx</code> in the app root -
        it prints each link of the chain separately.</li>
  </ol>
</div>

<div class="row g-4 mb-4"> <div class="col-12"> <div class="p-4 rounded-3" style="background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white;"> <h2 class="fw-bold mb-2">AjaxUploader v5.0 for ASP.NET Web Forms</h2> <p class="mb-3 opacity-75">A modern, high-performance file upload server control built with HTML5. No Flash, no Silverlight, no plugins required.</p> <div class="d-flex gap-2 flex-wrap"> <span class="badge bg-white text-primary">HTML5 File API</span> <span class="badge bg-white text-primary">Chunked Uploads</span> <span class="badge bg-white text-primary">Drag & Drop</span> <span class="badge bg-white text-primary">Resume Support</span> <span class="badge bg-white text-primary">Progress Tracking</span> <span class="badge bg-white text-primary">Server Controls</span> </div> </div> </div>
</div> 
<div class="row g-3"> <div class="col-md-6 col-lg-4"> <a href="Demos/GettingStarted/Overview.aspx" class="text-decoration-none"> <div class="demo-card h-100"> <div class="demo-card-body"> <div class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-rocket-takeoff text-primary fs-4"></i> <h5 class="mb-0 text-dark">Getting Started</h5> </div> <p class="text-muted small mb-0">5 demos covering setup, configuration, server controls, and the JavaScript API.</p> </div> </div> </a> </div> <div class="col-md-6 col-lg-4"> <a href="Demos/BasicUsage/SingleFile.aspx" class="text-decoration-none"> <div class="demo-card h-100"> <div class="demo-card-body"> <div class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-cloud-arrow-up text-primary fs-4"></i> <h5 class="mb-0 text-dark">Basic Upload</h5> </div> <p class="text-muted small mb-0">8 demos for single file, multiple files, auto/manual upload, forms, and more.</p> </div> </div> </a> </div> <div class="col-md-6 col-lg-4"> <a href="Demos/Validation/FileExtensions.aspx" class="text-decoration-none"> <div class="demo-card h-100"> <div class="demo-card-body"> <div class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-shield-check text-primary fs-4"></i> <h5 class="mb-0 text-dark">Validation</h5> </div> <p class="text-muted small mb-0">10 demos for file extension, size, MIME type, dimension, and custom validation.</p> </div> </div> </a> </div> <div class="col-md-6 col-lg-4"> <a href="Demos/Appearance/DefaultTheme.aspx" class="text-decoration-none"> <div class="demo-card h-100"> <div class="demo-card-body"> <div class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-palette text-primary fs-4"></i> <h5 class="mb-0 text-dark">Appearance</h5> </div> <p class="text-muted small mb-0">10 demos for themes, dark mode, custom colors, buttons, and layouts.</p> </div> </div> </a> </div> <div class="col-md-6 col-lg-4"> <a href="Demos/Progress/BasicProgressBar.aspx" class="text-decoration-none"> <div class="demo-card h-100"> <div class="demo-card-body"> <div class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-bar-chart text-primary fs-4"></i> <h5 class="mb-0 text-dark">Progress</h5> </div> <p class="text-muted small mb-0">8 demos for progress bars, speed/ETA, circular, striped, and custom progress.</p> </div> </div> </a> </div> <div class="col-md-6 col-lg-4"> <a href="Demos/DragAndDrop/BasicDropZone.aspx" class="text-decoration-none"> <div class="demo-card h-100"> <div class="demo-card-body"> <div class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-hand-index text-primary fs-4"></i> <h5 class="mb-0 text-dark">Drag & Drop</h5> </div> <p class="text-muted small mb-0">8 demos for drop zones, folder upload, preview on drop, and overlays.</p> </div> </div> </a> </div> <div class="col-md-6 col-lg-4"> <a href="Demos/ChunkedUpload/BasicChunked.aspx" class="text-decoration-none"> <div class="demo-card h-100"> <div class="demo-card-body"> <div class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-puzzle text-primary fs-4"></i> <h5 class="mb-0 text-dark">Chunked Upload</h5> </div> <p class="text-muted small mb-0">8 demos for chunked uploads, resume, parallel chunks, and large files.</p> </div> </div> </a> </div> <div class="col-md-6 col-lg-4"> <a href="Demos/Queue/SequentialQueue.aspx" class="text-decoration-none"> <div class="demo-card h-100"> <div class="demo-card-body"> <div class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-list-ol text-primary fs-4"></i> <h5 class="mb-0 text-dark">Queue</h5> </div> <p class="text-muted small mb-0">6 demos for sequential, concurrent, reordering, pause/resume, and cancel.</p> </div> </div> </a> </div> <div class="col-md-6 col-lg-4"> <a href="Demos/Events/AllClientEvents.aspx" class="text-decoration-none"> <div class="demo-card h-100"> <div class="demo-card-body"> <div class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-broadcast text-primary fs-4"></i> <h5 class="mb-0 text-dark">Events</h5> </div> <p class="text-muted small mb-0">7 demos covering all client and server events, filtering, and error handling.</p> </div> </div> </a> </div> <div class="col-md-6 col-lg-4"> <a href="Demos/ImageHandling/ImagePreview.aspx" class="text-decoration-none"> <div class="demo-card h-100"> <div class="demo-card-body"> <div class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-image text-primary fs-4"></i> <h5 class="mb-0 text-dark">Image Handling</h5> </div> <p class="text-muted small mb-0">8 demos for image preview, thumbnails, crop, resize, gallery, and avatar.</p> </div> </div> </a> </div> <div class="col-md-6 col-lg-4"> <a href="Demos/CustomUI/ExternalButton.aspx" class="text-decoration-none"> <div class="demo-card h-100"> <div class="demo-card-body"> <div class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-brush text-primary fs-4"></i> <h5 class="mb-0 text-dark">Custom UI</h5> </div> <p class="text-muted small mb-0">7 demos for custom buttons, progress, queue, card layout, modal, and wizard.</p> </div> </div> </a> </div> <div class="col-md-6 col-lg-4"> <a href="Demos/Integration/FormWithUploader.aspx" class="text-decoration-none"> <div class="demo-card h-100"> <div class="demo-card-body"> <div class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-plug text-primary fs-4"></i> <h5 class="mb-0 text-dark">Integration</h5> </div> <p class="text-muted small mb-0">8 demos for email, chat, CMS, e-commerce, ticket, and multi-step form integration.</p> </div> </div> </a> </div> <div class="col-md-6 col-lg-4"> <a href="Demos/Security/AntiforgeryToken.aspx" class="text-decoration-none"> <div class="demo-card h-100"> <div class="demo-card-body"> <div class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-lock text-primary fs-4"></i> <h5 class="mb-0 text-dark">Security</h5> </div> <p class="text-muted small mb-0">5 demos for antiforgery, authentication, role-based, virus scan, rate limiting.</p> </div> </div> </a> </div> <div class="col-md-6 col-lg-4"> <a href="Demos/Advanced/SqlServerProvider.aspx" class="text-decoration-none"> <div class="demo-card h-100"> <div class="demo-card-body"> <div class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-gear text-primary fs-4"></i> <h5 class="mb-0 text-dark">Advanced</h5> </div> <p class="text-muted small mb-0">2 demos for SQL Server and custom provider implementations.</p> </div> </div> </a> </div>
</div> 
</asp:Content>
