<%@ Page Title="Rename in Queue" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Rename in Queue - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Rename Files in the Queue</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="demo-card">
 <div class="demo-card-header">Click a file name to rename before upload</div>
 <div class="demo-card-body">
 <p class="demo-description">
 Every PENDING (or FAILED) row's name is now click-to-edit. Commits on
 Enter / blur, reverts on Escape. The original extension is preserved
 unless the user types a new one - and any new extension is validated
 against <code>allowedExtensions</code> if set. Already-uploading or
 completed files are intentionally non-editable.
 </p>
 <div class="demo-expect"><strong>What you should see:</strong> rename a file in the queue before upload - the server receives the new name, not the original.</div> <div class="d-flex gap-2 mb-2 mt-4">
 <button type="button" class="btn btn-primary" id="startBtn_renameUploader">Start upload</button>
 <button type="button" class="btn btn-outline-secondary" id="clearBtn_renameUploader">Clear queue</button>
 </div>
 <div id="renameUploader"></div>
 <pre id="renameLog" role="log" aria-live="polite" style="margin-top:12px;background:#f8f9fa;padding:8px;border-radius:4px;max-height:140px;overflow:auto;font-size:12px;"></pre>
 <script>
 (function () {
 function init() {
 if (!window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 var log = document.getElementById('renameLog');
 var uploader = AjaxUploader.create('#renameUploader', {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: false,
 allowRename: true,
 allowedExtensions: 'jpg,jpeg,png,gif,webp,pdf,doc,docx,txt,zip',
 onRename: function (task, oldName, newName) {
 if (!log) return;
 log.textContent = '[' + new Date().toLocaleTimeString() + '] ' +
 oldName + ' -> ' + newName + '\n' + log.textContent;
 }
 });
 var startButton = document.getElementById('startBtn_renameUploader');
 var clearButton = document.getElementById('clearBtn_renameUploader');
 if (startButton) {
 startButton.addEventListener('click', function () {
 if (uploader && typeof uploader.upload === 'function') uploader.upload();
 });
 }
 if (clearButton) {
 clearButton.addEventListener('click', function () {
 if (uploader && typeof uploader.clear === 'function') uploader.clear();
 });
 }
 }
 if (document.readyState !== 'loading') init();
 else document.addEventListener('DOMContentLoaded', init);
 })();
 </script>
 <div class="alert alert-info mt-3" role="alert">
 <strong>Try it:</strong> queue a few files, click any file name (or press Enter while it's focused),
 type a new name, hit Enter. Press Esc to cancel an edit. Try typing an extension that's not in
 the allow-list above to see the validation error.
 </div>
 <h5 class="mt-4">Configuration</h5>
 <div class="code-panel">
<pre><code>AjaxUploader.create('#uploader', {
 allowRename: true, <span style="color:#94a3b8">// default - rows are click-to-edit</span>
 allowedExtensions: 'jpg,png,pdf', <span style="color:#94a3b8">// new extensions are validated</span>
 onRename: function (task, oldName, newName) {
 renameLog.textContent = oldName + ' -> ' + newName;
 }
});</code></pre>
 </div>
 </div>
</div>
</asp:Content>
