<%@ 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>&#128247; 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>
