<%@ Page Title="Data Table Upload Column" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Data Table Upload Column - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Data Table Upload Column</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Data Table Upload Column</div> <div class="demo-card-body"> <p class="demo-description"> Add an upload column to a data table. Each row has its own uploader instance,
 allowing per-row file attachments in a tabular interface.
 </p> <div class="demo-expect"><strong>What you should see:</strong> uploads feeding a data table, with each row's status updated from the completion and error callbacks.</div> <table class="table table-bordered table-sm"> <caption class="visually-hidden">Rows with per-person document upload controls</caption> <thead><tr><th scope="col">ID</th><th scope="col">Name</th><th scope="col">Document</th><th scope="col">Status</th></tr></thead> <tbody> <tr> <td>1</td><td>Alice Johnson</td> <td><div id="rowUpload1"></div></td> <td id="rowStatus1" class="text-muted">-</td> </tr> <tr> <td>2</td><td>Bob Smith</td> <td><div id="rowUpload2"></div></td> <td id="rowStatus2" class="text-muted">-</td> </tr> <tr> <td>3</td><td>Carol Lee</td> <td><div id="rowUpload3"></div></td> <td id="rowStatus3" class="text-muted">-</td> </tr> </tbody> </table> <div class="code-panel"> <pre><code>// Create one uploader per table row
rows.forEach(function (id) {
 AjaxUploader.create(document.getElementById('rowUpload' + id), {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: false,
 autoUpload: true,
 onComplete: function (file) {
 document.getElementById('rowStatus' + id).textContent = file.name;
 }
 });
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> (function () {
 if (!window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 [1, 2, 3].forEach(function (id) {
 var host = document.getElementById('rowUpload' + id);
 if (!host) return;
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: false,
 autoUpload: true,
 onComplete: function (file) {
 var cell = document.getElementById('rowStatus' + id);
 if (!cell) return;
 cell.textContent = file.name;
 cell.className = 'text-success';
 }
 });
 });
 })();
</script>
</asp:Content>
