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

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

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

<div class="demo-card">
    <div class="demo-card-header">External Progress Bar</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Drive a Bootstrap progress bar from AjaxUploader's <code>onProgress</code> callback.
            The built-in progress UI is bypassed in favor of a fully external element.
        </p>

        <div id="progUploader"></div>

        <div class="progress mt-3" style="height: 24px;">
            <div class="progress-bar progress-bar-striped progress-bar-animated"
                 id="extProgressBar" role="progressbar" style="width: 0%;">0%</div>
        </div>
        <div id="progStatus" class="mt-2 small text-muted"></div>

        <div class="code-panel">
            <pre><code>AjaxUploader.create(el, {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    autoUpload: true,
    onProgress: function (file, percent) {
        bar.style.width = percent + '%';
        bar.textContent = Math.round(percent) + '%';
    },
    onComplete: function (file) {
        bar.classList.add('bg-success');
        bar.textContent = 'Done!';
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    AjaxUploader.create(document.getElementById('progUploader'), {
        uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
        multiple: false,
        autoUpload: true,
        onProgress: function (file, percent) {
            var bar = document.getElementById('extProgressBar');
            bar.style.width = percent + '%';
            bar.textContent = Math.round(percent) + '%';
        },
        onComplete: function (file) {
            var bar = document.getElementById('extProgressBar');
            bar.classList.remove('progress-bar-animated');
            bar.classList.add('bg-success');
            bar.textContent = 'Done!';
            document.getElementById('progStatus').textContent = 'Uploaded: ' + file.name;
        },
        onError: function (file, error) {
            var bar = document.getElementById('extProgressBar');
            bar.classList.add('bg-danger');
            bar.textContent = 'Error';
        }
    });
</script>
</asp:Content>
