<%@ Page Title="Inline Uploader" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Inline Uploader - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Inline Uploader</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<style>
    .inline-context { line-height: 2.2; font-size: 0.95rem; }
    .inline-context .ajax-upload { display: inline-block; vertical-align: middle; }
    .inline-file-name {
        display: inline-block; background: #e0f2fe; padding: 2px 10px;
        border-radius: 12px; font-size: 0.8rem; color: #0369a1; margin-left: 6px;
    }
</style>

<div class="demo-card">
    <div class="demo-card-header">Inline Uploader</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Embed a compact uploader inline within text flow, useful for inserting
            attachments in the middle of a form or paragraph.
        </p>

        <div class="inline-context">
            Please attach your signed document
            <span id="inlineUploader"></span>
            <span id="inlineFileName"></span>
            before submitting the form below.
        </div>

        <div class="code-panel">
            <pre><code>&lt;!-- Inline in text flow --&gt;
Please attach your signed document
&lt;span id="inlineUploader"&gt;&lt;/span&gt;
&lt;span id="fileName"&gt;&lt;/span&gt;
before submitting the form.

&lt;script&gt;
AjaxUploader.create(document.getElementById('inlineUploader'), {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    multiple: false,
    autoUpload: true,
    onComplete: function (file) {
        document.getElementById('fileName').textContent = file.name;
    }
});
&lt;/script&gt;</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    AjaxUploader.create(document.getElementById('inlineUploader'), {
        uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
        multiple: false,
        autoUpload: true,
        onComplete: function (file) {
            document.getElementById('inlineFileName').textContent = file.name;
            document.getElementById('inlineFileName').className = 'inline-file-name';
        }
    });
</script>
</asp:Content>
