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

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

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

<div class="demo-card">
    <div class="demo-card-header">Image EXIF Metadata</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Upload an image to extract and display basic metadata such as file name, type,
            size, and image dimensions. EXIF data like camera model or GPS requires a
            server-side library; here we show client-side metadata extraction.
        </p>

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

        <table class="table table-sm mt-3" id="metaTable" style="display:none;">
            <thead><tr><th>Property</th><th>Value</th></tr></thead>
            <tbody id="metaBody"></tbody>
        </table>

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

// JavaScript: extract client-side metadata
uploader.on('select', function(files) {
    var file = files[0];
    console.log('Name:', file.name);
    console.log('Type:', file.type);
    console.log('Size:', file.size);

    // Read image dimensions
    var img = new Image();
    img.onload = function () {
        console.log('Dimensions:', img.naturalWidth, 'x', img.naturalHeight);
    };
    img.src = URL.createObjectURL(file);

    // For full EXIF: use a server-side library like
    // System.Drawing or ImageSharp on the upload handler.
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var uploader = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('select', function(files) {
            var file = Array.isArray(files) ? files[0] : files;
            file = file.file || file;
            var rows = [
                ['File Name', file.name],
                ['Type', file.type || 'unknown'],
                ['Size', (file.size / 1024).toFixed(1) + ' KB'],
                ['Last Modified', new Date(file.lastModified).toLocaleString()]
            ];
            var img = new Image();
            img.onload = function () {
                rows.push(['Dimensions', img.naturalWidth + ' x ' + img.naturalHeight + ' px']);
                renderTable(rows);
            };
            img.onerror = function () { renderTable(rows); };
            img.src = URL.createObjectURL(file);
        });
    }

    function renderTable(rows) {
        var body = document.getElementById('metaBody');
        body.innerHTML = '';
        rows.forEach(function (r) {
            body.innerHTML += '<tr><td><strong>' + r[0] + '</strong></td><td>' + r[1] + '</td></tr>';
        });
        document.getElementById('metaTable').style.display = '';
    }
</script>
</asp:Content>
