<%@ Page Title="Internationalization" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Internationalization - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Internationalization (i18n)</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">30 built-in locales, fully extensible registry</div> <div class="demo-card-body"> <p class="demo-description"> <strong>30 built-in locales, fully extensible.</strong> English, Spanish, French, German, Japanese, Simplified &amp; Traditional Chinese, Brazilian Portuguese, Italian, Dutch, Russian, Polish, Turkish, Korean, Czech, Vietnamese, Thai, Indonesian, Hindi, Swedish, Danish, Norwegian, Finnish, Greek, Ukrainian, Romanian, Hungarian, plus full <strong>RTL support for Arabic, Hebrew, and Persian</strong> (auto-flipped layout and mirrored progress UI). Pick a language below - buttons, drag-drop hints, status text, error messages, and the image-editor and media-capture modals all switch instantly. Add your own locale with one call to <code>AjaxUploader.registerLocale()</code>.
 </p> <div class="demo-expect"><strong>What you should see:</strong> switch the locale picker and every string in the control changes; RTL locales mirror the whole layout.</div> <div class="card p-3 mt-3" style="background:#fff;border:1px solid #e2e8f0;"> <label class="form-label fw-semibold small" for="localePicker">Language</label> <select id="localePicker" class="form-select" style="max-width:320px"> <optgroup label="Most common"> <option value="en">English</option> <option value="es">Espa&#241;ol</option> <option value="fr">Fran&#231;ais</option> <option value="de">Deutsch</option> <option value="ja">&#26085;&#26412;&#35486;</option> <option value="zh-CN">&#31616;&#20307;&#20013;&#25991;</option> <option value="pt-BR">Portugu&#234;s (Brasil)</option> <option value="it">Italiano</option> <option value="nl">Nederlands</option> </optgroup> <optgroup label="More languages (sample)"> <option value="ru">&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#1081;</option> <option value="pl">Polski</option> <option value="tr">T&#252;rk&#231;e</option> <option value="ko">&#54620;&#44397;&#50612;</option> <option value="cs">&#268;e&#353;tina</option> <option value="vi">Ti&#7871;ng Vi&#7879;t</option> <option value="th">&#3652;&#3607;&#3618;</option> <option value="id">Bahasa Indonesia</option> <option value="hi">&#2361;&#2367;&#2344;&#2381;&#2342;&#2368;</option> </optgroup> <optgroup label="Right-to-left"> <option value="ar">&#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577;</option> <option value="he">&#1506;&#1489;&#1512;&#1497;&#1514;</option> <option value="fa">&#1601;&#1575;&#1585;&#1587;&#1740;</option> </optgroup> </select> <div class="d-flex gap-2 mb-2 mt-3">
 <button type="button" class="btn btn-primary" id="startBtn_i18nUploader">Start upload</button>
 <button type="button" class="btn btn-outline-secondary" id="clearBtn_i18nUploader">Clear queue</button>
 </div>
 <div id="i18nUploader"></div> </div> <script> (function () {
 function init() {
 if (!window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 var picker = document.getElementById('localePicker');
 var container = document.getElementById('i18nUploader');
 var startButton = document.getElementById('startBtn_i18nUploader');
 var clearButton = document.getElementById('clearBtn_i18nUploader');
 var uploader = null;
 if (!picker || !container) return;

 function wireButton(button, action) {
 if (!button) return;
 button.addEventListener('click', function () {
 if (uploader && typeof uploader[action] === 'function') uploader[action]();
 });
 }

 function buildUploader() {
 if (uploader) { try { uploader.destroy && uploader.destroy(); } catch (e) {} }
 container.textContent = '';
 // Re-assert the global locale right before construction; the
 // AjaxUploader constructor overwrites _currentLocale from
 // this.options.locale, so we must pass it explicitly too.
 AjaxUploader.setLocale(picker.value);
 // Apply RTL direction for Arabic / Hebrew / Persian so the chrome flips naturally.
 container.setAttribute('dir', AjaxUploader.getLocaleDir());
 uploader = AjaxUploader.create(container, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: false,
 locale: picker.value
 });
 }

 buildUploader();

 picker.addEventListener('change', function () {
 buildUploader();
 });

 wireButton(startButton, 'upload');
 wireButton(clearButton, 'clear');
 }
 if (document.readyState !== 'loading') init();
 else document.addEventListener('DOMContentLoaded', init);
 })();
 </script> <div class="alert alert-info mt-3" role="alert"> <strong>What changes:</strong> the file-picker button label, the drag-drop instruction, the queue status badges (uploading / complete / failed), validation error messages, and the modal titles for image editor, webcam, screen capture, and audio recording. Custom <code>options.buttonText</code> always wins - i18n only fills in defaults.
 </div> <h5 class="mt-4">Switch locale globally</h5> <div class="code-panel">
<pre><code>AjaxUploader.setLocale('fr');
AjaxUploader.create('#uploader', { uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>' });</code></pre> </div> <h5 class="mt-4">Right-to-left support</h5> <p>Arabic (<code>ar</code>), Hebrew (<code>he</code>), and Persian (<code>fa</code>) carry an RTL hint. Read it with <code>getLocaleDir()</code> and flip the container's <code>dir</code> attribute - all icons, progress bars, and the queue layout follow:</p> <div class="code-panel">
<pre><code>AjaxUploader.setLocale('ar');
container.setAttribute('dir', AjaxUploader.getLocaleDir()); <span style="color:#94a3b8">// 'rtl'</span>
AjaxUploader.create(container, { uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>' });</code></pre> </div> <h5 class="mt-4">Register a custom locale</h5> <p>Pass a partial dictionary - missing keys fall back to English transparently:</p> <div class="code-panel">
<pre><code>AjaxUploader.registerLocale('sv', {
 selectFiles: 'V&#228;lj filer',
 dragDrop: 'Dra och sl&#228;pp filer h&#228;r',
 upload: 'Ladda upp',
 cancel: 'Avbryt',
 complete: 'Klar',
 failed: 'Misslyckades',
 fileTooLarge: 'Filen "{name}" ({size}) &#246;verskrider maxstorleken {max}.'
 <span style="color:#94a3b8">// 30+ other keys fall back to English</span>
});

AjaxUploader.setLocale('sv');</code></pre> </div> <h5 class="mt-4">Translation key reference</h5> <p>Full key list with English defaults - translate only the ones you need:</p> <div class="code-panel">
<pre><code><span style="color:#94a3b8">// UI controls</span>
selectFiles, dragDrop, dropHere, upload, browse,
cancel, remove, retry, pause, resume, clear,
<span style="color:#94a3b8">// Status</span>
uploading, complete, failed, cancelled, pending, remaining,
<span style="color:#94a3b8">// Validation</span>
maxFilesReached, fileTypeNotAllowed, fileTooLarge, fileTooSmall,
duplicateFile, mimeTypeNotAllowed,
imageTooWide, imageTooTall, imageTooNarrow, imageTooShort,
<span style="color:#94a3b8">// Errors</span>
networkError, uploadFailed, invalidResponse, chunkFailed,
<span style="color:#94a3b8">// Stats</span>
files, totalSize, speed, eta, of,
<span style="color:#94a3b8">// Media capture</span>
webcamPhotoTitle, webcamVideoTitle, screenCaptureTitle, audioCaptureTitle,
snap, record, stop, recording,
<span style="color:#94a3b8">// Image editor</span>
editorRotate, editorFlip, editorCrop, editorApply, editorSave, editorReset,
<span style="color:#94a3b8">// URL import</span>
importFromUrl, importingFrom</code></pre> </div> <h5 class="mt-4">Interpolation</h5> <p>String values can include <code>{name}</code>-style placeholders that get filled in at render time:</p> <div class="code-panel">
<pre><code>AjaxUploader.registerLocale('en-pirate', {
 fileTooLarge: 'Arrr, the file "{name}" ({size}) be larger than the limit of {max}!'
});</code></pre> </div> </div>
</div> 
</asp:Content>
