<%@ 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.2 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="demo-expect"><strong>What you should see:</strong> the control collapsed onto one line so it sits beside a label in a form row without disturbing layout.</div> <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> (function () {
 var host = document.getElementById('inlineUploader');
 var fileName = document.getElementById('inlineFileName');
 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: false,
 autoUpload: true,
 onComplete: function (file) {
 if (!fileName) return;
 fileName.textContent = file.name;
 fileName.className = 'inline-file-name';
 }
 });
 })();
</script>
</asp:Content>
