<%@ Page Title="Queue Reordering" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Queue Reordering - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Queue Reordering</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Drag-to-Reorder Queue</div> <div class="demo-card-body"> <p class="demo-description"> Reorder queued files before uploading begins. Use the up/down buttons to change the upload
 order. Files are uploaded sequentially in the displayed order.
 </p> <div id="uploader"></div> <div class="mt-2"> <button type="button" class="btn btn-primary btn-sm" id="btnStart" disabled>Start Upload</button> </div> <div id="queueList" class="mt-3"></div> <div class="code-panel"> <pre><code>var uploader = AjaxUploader.create('#uploader', {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: false, // manual start after reordering
 concurrency: 1,
 onSelect: function(files) {
 renderQueue();
 }
});

// Reorder with uploader.moveTask(taskId, newIndex)
// Then start: uploader.startUpload();</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var queueList = document.getElementById('queueList');
 var btnStart = document.getElementById('btnStart');
 var taskList = [];

 var uploader = AjaxUploader.create(document.getElementById('uploader'), {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: false,
 concurrency: 1,
 onSelect: function(files) {
 files.forEach(function(f) {
 taskList.push({ id: f.id || taskList.length, name: f.name, size: f.size });
 });
 btnStart.disabled = false;
 renderQueue();
 },
 onQueueRender: function(queue) {
 renderQueue();
 },
 onComplete: function() {
 btnStart.disabled = true;
 }
 });

 function renderQueue() {
 queueList.innerHTML = '';
 taskList.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';
 div.innerHTML = '<span>' + (i + 1) + '. ' + item.name +
 ' <small class="text-muted">(' + AjaxUploader.formatSize(item.size) + ')</small></span>' +
 '<span>' +
 '<button type="button" class="btn btn-outline-secondary btn-sm me-1" onclick="moveUp(' + i + ')">^</button>' +
 '<button type="button" class="btn btn-outline-secondary btn-sm" onclick="moveDown(' + i + ')">v</button>' +
 '</span>';
 queueList.appendChild(div);
 });
 }

 function moveUp(index) {
 if (index <= 0) return;
 var temp = taskList[index];
 taskList[index] = taskList[index - 1];
 taskList[index - 1] = temp;
 renderQueue();
 }

 function moveDown(index) {
 if (index >= taskList.length - 1) return;
 var temp = taskList[index];
 taskList[index] = taskList[index + 1];
 taskList[index + 1] = temp;
 renderQueue();
 }

 btnStart.addEventListener('click', function() {
 uploader.startUpload();
 btnStart.disabled = true;
 });
</script>
</asp:Content>
