<%@ 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>
