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

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

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

<div class="demo-card">
    <div class="demo-card-header">Preview Images Before Upload</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Preview selected images before uploading using the FileReader API. Users can review
            their selections and remove unwanted images before starting the upload.
        </p>

        <au:AjaxFileUpload ID="Uploader1" runat="server"
            EnableImagePreview="true"
            ShowThumbnails="true"
            AllowMultiple="true"
            AllowedExtensions=".jpg,.jpeg,.png,.gif,.webp"
            AutoUpload="false" />

        <div id="previewArea" class="mt-3 d-flex flex-wrap gap-3"></div>
        <div class="mt-2">
            <button type="button" class="btn btn-primary btn-sm" id="btnUpload" style="display:none;">Upload Selected</button>
        </div>

        <div class="code-panel">
            <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
    EnableImagePreview="true"
    ShowThumbnails="true"
    AllowMultiple="true"
    AllowedExtensions=".jpg,.jpeg,.png,.gif,.webp"
    AutoUpload="false" /&gt;

// JavaScript API approach
AjaxUploader.create('#uploader', {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    multiple: true,
    allowedExtensions: '.jpg,.jpeg,.png,.gif,.webp',
    autoUpload: false,
    onSelect: function(files) {
        files.forEach(function(f) {
            var reader = new FileReader();
            reader.onload = function(e) {
                showPreview(e.target.result, f.name);
            };
            reader.readAsDataURL(f.file || f);
        });
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var previewArea = document.getElementById('previewArea');
    var btnUpload = document.getElementById('btnUpload');

    var uploader = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('select', function(files) {
            files.forEach(function(f) {
                var file = f.file || f;
                var reader = new FileReader();
                reader.onload = function(e) {
                    var card = document.createElement('div');
                    card.className = 'text-center border rounded p-2';
                    card.style.cssText = 'width:130px;position:relative;';
                    card.innerHTML = '<img src="' + e.target.result + '" ' +
                        'style="width:110px;height:80px;object-fit:cover;border-radius:4px;" />' +
                        '<div class="small text-truncate mt-1" style="max-width:110px;">' + file.name + '</div>' +
                        '<div class="small text-muted">' + AjaxUploader.formatSize(file.size) + '</div>' +
                        '<button type="button" class="btn btn-outline-danger btn-sm mt-1" style="font-size:.7rem;" ' +
                        'onclick="this.parentElement.remove();">Remove</button>';
                    previewArea.appendChild(card);
                };
                reader.readAsDataURL(file);
            });
            btnUpload.style.display = 'inline-block';
        });
        uploader.on('taskComplete', function(task) {
            btnUpload.style.display = 'none';
        });
    }

    btnUpload.addEventListener('click', function() {
        if (uploader) uploader.startUpload();
        btnUpload.disabled = true;
        btnUpload.textContent = 'Uploading...';
    });
</script>
</asp:Content>
