<%@ Page Title="Preloaded Files" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Preloaded Files - AjaxUploader v5.0 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 id="preloadUploader"></div>

        <div class="code-panel">
            <pre><code>AjaxUploader.create(element, {
    multiple: true,
    showProgress: true,
    buttonText: 'Add More Files',
    preloadedFiles: [
        { name: 'report-2024.pdf', size: 245760, url: '/uploads/report-2024.pdf' },
        { name: 'photo.jpg', size: 1048576, url: '/uploads/photo.jpg' },
        { name: 'data.xlsx', size: 512000, url: '/uploads/data.xlsx' }
    ]
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    document.addEventListener('DOMContentLoaded', function () {
        AjaxUploader.create(document.getElementById('preloadUploader'), {
            multiple: true,
            autoUpload: true,
            showProgress: true,
            buttonText: 'Add More Files',
            preloadedFiles: [
                { name: 'report-2024.pdf', size: 245760, url: '/uploads/report-2024.pdf' },
                { name: 'photo.jpg', size: 1048576, url: '/uploads/photo.jpg' },
                { name: 'data.xlsx', size: 512000, url: '/uploads/data.xlsx' }
            ]
        });
    });
</script>
</asp:Content>
