<%@ Page Title="Preloaded Files" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Preloaded Files - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Preloaded Files</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Preloaded Files</div> <div class="demo-card-body"> <p class="demo-description"> Initialize the uploader with pre-existing files. Useful for edit forms where files
 were previously uploaded and should be displayed in the queue.
 </p> <div class="demo-expect"><strong>What you should see:</strong> the queue already populated on load with files the server knows about - how an edit screen shows existing attachments beside new ones.</div> <div id="preloadUploader"></div> <div class="code-panel"> <pre><code>&lt;script&gt;
var preloadedFiles = [
 { name: 'report-2024.pdf', size: 801, url: '&lt;%= ResolveUrl("~/uploads/report-2024.pdf") %&gt;' },
 { name: 'photo.jpg', size: 62406, url: '&lt;%= ResolveUrl("~/uploads/photo.jpg") %&gt;' },
 { name: 'data.xlsx', size: 2993, url: '&lt;%= ResolveUrl("~/uploads/data.xlsx") %&gt;' }
];

AjaxUploader.create(element, {
 multiple: true,
 autoUpload: true,
 showProgress: true,
 buttonText: 'Add More Files',
 preloadedFiles: preloadedFiles
});
&lt;/script&gt;</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> document.addEventListener('DOMContentLoaded', function () {
 var preloadedFiles = [
 { name: 'report-2024.pdf', size: 801, url: '<%= ResolveUrl("~/uploads/report-2024.pdf") %>' },
 { name: 'photo.jpg', size: 62406, url: '<%= ResolveUrl("~/uploads/photo.jpg") %>' },
 { name: 'data.xlsx', size: 2993, url: '<%= ResolveUrl("~/uploads/data.xlsx") %>' }
 ];

 var host = document.getElementById('preloadUploader');
 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 multiple: true,
 autoUpload: true,
 showProgress: true,
 buttonText: 'Add More Files',
 preloadedFiles: preloadedFiles
 });
 });
</script>
</asp:Content>
