<%@ Page Title="Queue Priority" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Queue Priority - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Queue Priority</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Priority Queue Ordering</div> <div class="demo-card-body"> <p class="demo-description"> Assign priority levels to files in the upload queue. Higher priority files are uploaded
 first regardless of when they were added.
 </p> <div class="demo-expect"><strong>What you should see:</strong> files upload in the priority order you assign rather than selection order - with concurrency 1 the order is strict and visible.</div> <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 id="status" class="mt-2 text-muted small" role="status" aria-live="polite"></div> <div class="code-panel"> <pre><code>var uploader = AjaxUploader.create('#uploader', {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: false,
 concurrency: 1,
 onSelect: function(files) {
 files.forEach(function(f) {
 // Default priority: normal
 // Change with uploader.setTaskPriority(taskId, 'high');
 });
 }
});

// Priorities: 'high', 'normal', 'low'</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 status = document.getElementById('status');
 var fileQueue = [];

 var host = document.getElementById('uploader');
 var uploader = host && window.AjaxUploader && typeof AjaxUploader.create === 'function' ? AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: false,
 concurrency: 1,
 onSelect: function(files) {
 files.forEach(function(f) {
 fileQueue.push({ id: f.id || fileQueue.length, name: f.name, size: f.size, priority: 'normal' });
 });
 if (btnStart) btnStart.disabled = false;
 renderQueue();
 },
 onTaskComplete: function(task) {
 if (status) status.textContent = task.fileName + ' completed.';
 },
 onComplete: function() {
 if (status) status.textContent = 'All uploads complete.';
 if (btnStart) btnStart.disabled = true;
 }
 }) : null;

 function renderQueue() {
 if (!queueList) return;
 var sorted = fileQueue.slice().sort(function(a, b) {
 var order = { high: 0, normal: 1, low: 2 };
 return order[a.priority] - order[b.priority];
 });
 queueList.textContent = '';
 sorted.forEach(function(item, i) {
 var colors = { high: 'danger', normal: 'secondary', low: 'light text-dark' };
 var div = document.createElement('div');
 div.className = 'p-2 mb-1 border rounded d-flex justify-content-between align-items-center';
 var info = document.createElement('span');
 info.appendChild(document.createTextNode((i + 1) + '. ' + (item.name || 'File') + ' '));
 var size = document.createElement('small');
 size.className = 'text-muted';
 size.textContent = '(' + AjaxUploader.formatSize(item.size) + ')';
 info.appendChild(size);
 var controls = document.createElement('span');
 controls.className = 'd-flex gap-1';
 [
 { level: 'high', label: 'High', className: 'btn-outline-danger' },
 { level: 'normal', label: 'Normal', className: 'btn-outline-secondary' },
 { level: 'low', label: 'Low', className: 'btn-outline-info' }
 ].forEach(function(option) {
 var button = document.createElement('button');
 button.type = 'button';
 button.className = 'btn ' + option.className + ' btn-sm' + (item.priority === option.level ? ' active' : '');
 button.dataset.id = item.id;
 button.dataset.priority = option.level;
 button.textContent = option.label;
 controls.appendChild(button);
 });
 div.appendChild(info);
 div.appendChild(controls);
 queueList.appendChild(div);
 });
 }

 function setPriority(id, level) {
 fileQueue.forEach(function(f) { if (f.id === id) f.priority = level; });
 renderQueue();
 }

 if (queueList) queueList.addEventListener('click', function(event) {
 var button = event.target.closest('button[data-priority]');
 if (!button) return;
 setPriority(Number(button.dataset.id), button.dataset.priority);
 });

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