<%@ Page Title="Sequential Queue" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Sequential Queue - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Sequential Queue</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Sequential File Upload Queue</div> <div class="demo-card-body"> <p class="demo-description"> Files are uploaded one at a time in the order they were added. Each file waits for the
 previous upload to complete before starting. This is ideal when server resources are limited.
 </p> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ConcurrentUploads="1"
 AutoUpload="true"
 ShowProgress="true" /> <div id="queueList" class="mt-3"></div> <div id="status" class="mt-2 text-muted small"></div> <div class="code-panel"> <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ConcurrentUploads="1"
 AutoUpload="true"
 ShowProgress="true" /&gt;

// JavaScript API approach
AjaxUploader.create('#uploader', {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 concurrency: 1, // one file at a time
 autoUpload: true,
 onQueueRender: function(queue) {
 // Render queue items showing order and status
 queue.forEach(function(item, i) {
 // item.fileName, item.status, item.percent
 });
 }
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var queueList = document.getElementById('queueList');
 var status = document.getElementById('status');

 var uploader = AjaxUploader.getInstance('Uploader1');
 if (uploader) {
 uploader.on('queueRender', function(queue) {
 queueList.innerHTML = '';
 queue.forEach(function(item, i) {
 var div = document.createElement('div');
 div.className = 'p-2 mb-1 border rounded d-flex justify-content-between align-items-center';
 var badge = item.status === 'complete' ? 'bg-success' :
 item.status === 'uploading' ? 'bg-primary' : 'bg-secondary';
 div.innerHTML = '<span>' + (i + 1) + '. ' + item.fileName +
 ' <small class="text-muted">(' + AjaxUploader.formatSize(item.total) + ')</small></span>' +
 '<span class="badge ' + badge + '">' +
 (item.status === 'uploading' ? Math.round(item.percent) + '%' : item.status) + '</span>';
 queueList.appendChild(div);
 });
 status.textContent = queue.length + ' file(s) in queue';
 });
 uploader.on('complete', function() {
 status.textContent = 'All uploads complete.';
 });
 }
</script>
</asp:Content>
