<%@ 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.0 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>

        <table class="table table-bordered table-sm">
            <thead><tr><th>ID</th><th>Name</th><th>Document</th><th>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>
    [1, 2, 3].forEach(function (id) {
        AjaxUploader.create(document.getElementById('rowUpload' + id), {
            uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
            multiple: false,
            autoUpload: true,
            onComplete: function (file) {
                var cell = document.getElementById('rowStatus' + id);
                cell.textContent = file.name;
                cell.className = 'text-success';
            }
        });
    });
</script>
</asp:Content>
