<%@ Page Title="Chat File Sharing" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Chat File Sharing - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Chat File Sharing</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<style> .chat-window {
 border: 1px solid #e2e8f0; border-radius: 10px; height: 260px;
 overflow-y: auto; padding: 12px; background: #f8fafc; margin-bottom: 10px;
 }
 .chat-bubble {
 background: #dbeafe; padding: 8px 14px; border-radius: 16px;
 margin-bottom: 8px; max-width: 70%; font-size: 0.85rem;
 margin-left: auto; word-break: break-all;
 }
 .chat-input-bar { display: flex; gap: 8px; align-items: center; }
</style> 
<div class="demo-card"> <div class="demo-card-header">Chat File Sharing</div> <div class="demo-card-body"> <p class="demo-description"> Share files in a chat-style interface. Uploaded files appear as message bubbles
 in the conversation timeline alongside text messages.
 </p> <div class="demo-expect"><strong>What you should see:</strong> an attach control sized for a message composer - one file, uploads immediately, appears in the thread.</div> <div class="chat-window" id="chatWindow" role="log" aria-live="polite" aria-label="Chat messages"> <div class="chat-bubble" style="margin-left:0; background:#e2e8f0;">Hi! Send me the files.</div> </div> <div class="chat-input-bar"> <asp:TextBox ID="txtChatInput" runat="server" CssClass="form-control form-control-sm" aria-label="Chat message"
 placeholder="Type a message..." ClientIDMode="Static" /> <div id="chatUploader"></div> </div> <div class="code-panel"> <pre><code>AjaxUploader.create(el, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 autoUpload: true,
 onComplete: function (file) {
 addChatBubble('File: ' + file.name);
 }
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> function sendMsg() {
 var input = document.getElementById('txtChatInput');
 if (!input || !input.value.trim()) return;
 addBubble(input.value);
 input.value = '';
 }
 function addBubble(text) {
 var b = document.createElement('div');
 b.className = 'chat-bubble';
 b.textContent = text;
 var w = document.getElementById('chatWindow');
 if (!w) return;
 w.appendChild(b);
 w.scrollTop = w.scrollHeight;
 }
 var chatInput = document.getElementById('txtChatInput');
 if (chatInput) chatInput.addEventListener('keydown', function (e) {
 if (e.key === 'Enter') { e.preventDefault(); sendMsg(); }
 });
 var chatHost = document.getElementById('chatUploader');
 if (chatHost && window.AjaxUploader && typeof AjaxUploader.create === 'function') {
 AjaxUploader.create(chatHost, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: false,
 autoUpload: true,
 onComplete: function (file) {
 addBubble('Attachment: ' + file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)');
 }
 });
 }
</script>
</asp:Content>
