<%@ Page Title="Error Handling" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Error Handling - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Error Handling</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Error Display and Recovery</div> <div class="demo-card-body"> <p class="demo-description"> Handle upload errors gracefully with user-friendly error messages and recovery options.
 Errors can be retried, skipped, or the entire queue can be cancelled.
 </p> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 MaxRetries="2"
 ShowProgress="true" /> <div id="errorPanel" class="mt-3" role="alert" aria-live="assertive" style="display:none;"> <div class="alert alert-danger d-flex justify-content-between align-items-center"> <div> <strong id="errorTitle">Error</strong> <div id="errorDetail" class="small"></div> </div> <div class="d-flex gap-1"> <button type="button" class="btn btn-outline-danger btn-sm" id="retryFailedBtn">Retry</button> <button type="button" class="btn btn-outline-secondary btn-sm" id="dismissErrorBtn">Dismiss</button> </div> </div> </div> <div id="successPanel" class="mt-3" role="status" aria-live="polite" style="display:none;"> <div class="alert alert-success small" id="successMsg"></div> </div> <div class="code-panel"> <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 MaxRetries="2"
 ShowProgress="true" /&gt;

// JavaScript error handling
var uploader = AjaxUploader.getInstance('Uploader1');
if (uploader) {
 uploader.on('taskError', function(task, error) {
  showError(task.fileName, error);
  // Options: retry, skip, or cancel
 });
 uploader.on('error', function(error) {
  showError('Upload', error);
 });
}

function retryFailed() {
 uploader.retryAll();
}</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var errorPanel = document.getElementById('errorPanel');
 var errorTitle = document.getElementById('errorTitle');
 var errorDetail = document.getElementById('errorDetail');
 var successPanel = document.getElementById('successPanel');
 var successMsg = document.getElementById('successMsg');
 var retryButton = document.getElementById('retryFailedBtn');
 var dismissButton = document.getElementById('dismissErrorBtn');
 var lastFailedTask = null;

 function showPanel(panel, visible) {
 if (panel) panel.style.display = visible ? 'block' : 'none';
 }
 function showError(title, detail) {
 if (errorTitle) errorTitle.textContent = title;
 if (errorDetail) errorDetail.textContent = detail || 'Upload failed after retries.';
 showPanel(errorPanel, true);
 showPanel(successPanel, false);
 }

 var uploader = window.AjaxUploader && AjaxUploader.getInstance ? AjaxUploader.getInstance('Uploader1') : null;
 if (uploader) {
 uploader.on('taskError', function(task, error) {
 lastFailedTask = task;
 showError('Error: ' + task.fileName, error);
 });
 uploader.on('error', function(error) {
 showError('Upload Error', error);
 });
 uploader.on('taskComplete', function(task) {
 if (successMsg) successMsg.textContent = task.fileName + ' uploaded successfully.';
 showPanel(successPanel, true);
 showPanel(errorPanel, false);
 });
 uploader.on('taskProgress', function(task) {
 showPanel(errorPanel, false);
 });
 }

 function retryFailed() {
 if (lastFailedTask && uploader) {
 uploader.retryTask(lastFailedTask.id);
 }
 showPanel(errorPanel, false);
 }

 function dismissError() {
 showPanel(errorPanel, false);
 }

 if (retryButton) retryButton.addEventListener('click', retryFailed);
 if (dismissButton) dismissButton.addEventListener('click', dismissError);
</script>
</asp:Content>
