<%@ Page Title="Drop Zone with Preview" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Drop Zone with Preview - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Drop Zone with Preview</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Drop Zone with Inline Previews</div> <div class="demo-card-body"> <p class="demo-description"> Dropped image files are shown as thumbnail previews inline before and during
 upload. Non-image files display a generic file icon.
 </p> <style> .preview-zone {
 border: 2px dashed #d1d5db; border-radius: 0.75rem;
 padding: 1.5rem; text-align: center; min-height: 120px;
 background: #fafafa; transition: border-color 0.3s;
 }
 .preview-zone.drag-over { border-color: #3b82f6; background: #eff6ff; }
 .preview-grid {
 display: flex; flex-wrap: wrap; gap: 0.75rem;
 margin-top: 1rem; justify-content: center;
 }
 .preview-thumb {
 width: 80px; height: 80px; border-radius: 0.5rem;
 object-fit: cover; border: 1px solid #e5e7eb;
 box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 }
 .preview-file-icon {
 width: 80px; height: 80px; border-radius: 0.5rem;
 background: #f3f4f6; display: flex; align-items: center;
 justify-content: center; font-size: 1.8rem; border: 1px solid #e5e7eb;
 }
 </style> <div id="previewZone" class="preview-zone"> <div> Drop images here or click to browse</div> </div> <div class="preview-grid" id="previewGrid"></div> <div id="previewUploader" style="margin-top:0.5rem;"></div> <div class="code-panel"> <pre><code>onSelect: function(files) {
 files.forEach(function(file) {
 if (file.type.indexOf('image/') === 0) {
 var reader = new FileReader();
 reader.onload = function(e) {
 var img = document.createElement('img');
 img.src = e.target.result;
 grid.appendChild(img);
 };
 reader.readAsDataURL(file);
 }
 });
}</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> (function () {
 var zone = document.getElementById('previewZone');
 var grid = document.getElementById('previewGrid');

 AjaxUploader.create(document.getElementById('previewUploader'), {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 dropTarget: zone,
 onSelect: function (files) {
 for (var i = 0; i < files.length; i++) {
 (function (file) {
 if (file.type && file.type.indexOf('image/') === 0) {
 var reader = new FileReader();
 reader.onload = function (e) {
 var img = document.createElement('img');
 img.className = 'preview-thumb';
 img.src = e.target.result;
 grid.appendChild(img);
 };
 reader.readAsDataURL(file);
 } else {
 var div = document.createElement('div');
 div.className = 'preview-file-icon';
 div.textContent = '\u{1F4C4}';
 grid.appendChild(div);
 }
 })(files[i]);
 }
 }
 });
 })();
</script>
</asp:Content>
