<%@ Page Title="Per-file Metadata Fields" 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 Metadata Fields - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Per-file Metadata Fields</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="demo-card"> <div class="demo-card-header">Collect a caption and category with every file</div> <div class="demo-card-body"> <p class="demo-description"> Declare <code>MetaFields</code> and every pending queue row renders an inline input per field. Values travel to the server automatically as a <code>metadata</code> form field and an <code>X-Upload-Meta</code> base64-JSON header. Fields marked <code>required</code> block that file&rsquo;s upload until filled. Image files in the thumbnail grid get a &#9998; button that opens a modal editor instead.
 </p>
 <div class="demo-expect"><strong>What you should see:</strong> every queued file gets Caption and Category inputs. Uploading with Category empty is blocked with a message; fill it in and retry to complete.</div>
 <script>
 function metaChanged(task, fieldId, value) {
 var log = document.getElementById('metaLog');
 if (!log) return;

 var entry = document.createElement('div');
 var fileName = document.createElement('code');
 fileName.textContent = task.fileName;
 entry.appendChild(fileName);
 entry.appendChild(document.createTextNode(' \u2192 ' + fieldId + ' = "' + value + '"'));
 log.appendChild(entry);
 }
 </script>
 <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 AutoUpload="false"
 ShowProgress="true"
 MetaFields='[{"id":"caption","label":"Caption","placeholder":"Caption"},{"id":"category","label":"Category","required":true,"placeholder":"Category (required)"}]'
 OnClientMetaChange="metaChanged" />
 <div id="metaLog" class="mt-3 text-muted small"></div>
 <div class="code-panel"> <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 AutoUpload="false"
 MetaFields='[{"id":"caption","label":"Caption"},
              {"id":"category","label":"Category","required":true}]'
 OnClientMetaChange="metaChanged" /&gt;</code></pre> </div>
</div> </div>
</asp:Content>
