<%@ 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.3 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> <div class="demo-expect"><strong>What you should see:</strong> dimensions, size and type read in the browser and displayed before upload - one image at a time, most common formats accepted.</div> <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;"> <caption class="visually-hidden">Selected image metadata</caption> <thead><tr><th scope="col">Property</th><th scope="col">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];
 metadataOut.textContent =
 'Name: ' + file.name + '\n' +
 'Type: ' + (file.type || 'unknown') + '\n' +
 'Size: ' + file.size + ' bytes';

 // Read image dimensions
 var img = new Image();
 var objectUrl = URL.createObjectURL(file);
 img.onload = function () {
 URL.revokeObjectURL(objectUrl);
 metadataOut.textContent += '\nDimensions: ' +
 img.naturalWidth + ' x ' + img.naturalHeight;
 };
 img.onerror = function () { URL.revokeObjectURL(objectUrl); };
 img.src = objectUrl;

 // 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 = window.AjaxUploader && AjaxUploader.getInstance ? AjaxUploader.getInstance('Uploader1') : null;
 if (uploader) {
 uploader.on('select', function(files) {
 var file = Array.isArray(files) ? files[0] : files;
 file = file.file || file;
 if (!file) return;
 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();
 var objectUrl = URL.createObjectURL(file);
 img.onload = function () {
 URL.revokeObjectURL(objectUrl);
 rows.push(['Dimensions', img.naturalWidth + ' x ' + img.naturalHeight + ' px']);
 renderTable(rows);
 };
 img.onerror = function () {
 URL.revokeObjectURL(objectUrl);
 renderTable(rows);
 };
 img.src = objectUrl;
 });
 }

 function renderTable(rows) {
 var body = document.getElementById('metaBody');
 var table = document.getElementById('metaTable');
 if (!body || !table) return;
 body.textContent = '';
 rows.forEach(function (r) {
 var row = document.createElement('tr');
 var propertyCell = document.createElement('td');
 var propertyName = document.createElement('strong');
 propertyName.textContent = r[0];
 propertyCell.appendChild(propertyName);
 var valueCell = document.createElement('td');
 valueCell.textContent = r[1];
 row.appendChild(propertyCell);
 row.appendChild(valueCell);
 body.appendChild(row);
 });
 table.style.display = '';
 }
</script>
</asp:Content>
