<%@ Page Title="Per-File Progress" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Per-File Progress - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Per-File Progress</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Individual Progress Per File</div> <div class="demo-card-body"> <p class="demo-description"> Track upload progress independently for each file. Every file gets its
 own progress bar and status indicator in a custom file list.
 </p> <style> #fileList { margin-top: 1rem; }
 .file-item {
 display: flex; align-items: center; gap: 0.75rem;
 padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6;
 }
 .file-item-name {
 flex: 1; font-size: 0.85rem; overflow: hidden;
 text-overflow: ellipsis; white-space: nowrap;
 }
 .file-item-bar {
 width: 120px; height: 8px;
 background: #e5e7eb; border-radius: 4px; overflow: hidden;
 }
 .file-item-fill {
 height: 100%; width: 0%; background: #3b82f6;
 border-radius: 4px; transition: width 0.2s;
 }
 .file-item-pct { font-size: 0.75rem; width: 40px; text-align: right; color: #6b7280; }
 </style> <div id="perFileUploader"></div> <div id="fileList"></div> <div class="code-panel"> <pre><code>onTaskStart: function(task) {
 // create a row with its own progress bar
 list.appendChild(createFileRow(task));
},
onTaskProgress: function(task, pct) {
 var row = document.getElementById('file-' + task.id);
 row.querySelector('.fill').style.width = pct + '%';
 row.querySelector('.pct').textContent = Math.round(pct) + '%';
},
onTaskComplete: function(task) {
 row.querySelector('.fill').style.background = '#10b981';
}</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> (function () {
 var list = document.getElementById('fileList');
 AjaxUploader.create(document.getElementById('perFileUploader'), {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 onTaskStart: function (task) {
 var item = document.createElement('div');
 item.className = 'file-item';
 item.id = 'file-' + task.id;
 item.innerHTML = '<span class="file-item-name">' + task.fileName + '</span>'
 + '<div class="file-item-bar"><div class="file-item-fill"></div></div>'
 + '<span class="file-item-pct">0%</span>';
 list.appendChild(item);
 },
 onTaskProgress: function (task, pct) {
 var item = document.getElementById('file-' + task.id);
 if (item) {
 item.querySelector('.file-item-fill').style.width = pct + '%';
 item.querySelector('.file-item-pct').textContent = Math.round(pct) + '%';
 }
 },
 onTaskComplete: function (task) {
 var item = document.getElementById('file-' + task.id);
 if (item) {
 item.querySelector('.file-item-fill').style.background = '#10b981';
 item.querySelector('.file-item-pct').textContent = 'Done';
 }
 }
 });
 })();
</script>
</asp:Content>
