<%@ 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.0 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" 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" onclick="retryFailed()">Retry</button> <button type="button" class="btn btn-outline-secondary btn-sm" onclick="dismissError()">Dismiss</button> </div> </div> </div> <div id="successPanel" class="mt-3" 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');
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 lastFailedTask = null;

 var uploader = AjaxUploader.getInstance('Uploader1');
 if (uploader) {
 uploader.on('taskError', function(task, error) {
 lastFailedTask = task;
 errorTitle.textContent = 'Error: ' + task.fileName;
 errorDetail.textContent = error || 'Upload failed after retries.';
 errorPanel.style.display = 'block';
 successPanel.style.display = 'none';
 });
 uploader.on('error', function(error) {
 errorTitle.textContent = 'Upload Error';
 errorDetail.textContent = error;
 errorPanel.style.display = 'block';
 });
 uploader.on('taskComplete', function(task) {
 successMsg.textContent = task.fileName + ' uploaded successfully.';
 successPanel.style.display = 'block';
 errorPanel.style.display = 'none';
 });
 uploader.on('taskProgress', function(task) {
 errorPanel.style.display = 'none';
 });
 }

 function retryFailed() {
 if (lastFailedTask && uploader) {
 uploader.retryTask(lastFailedTask.id);
 }
 errorPanel.style.display = 'none';
 }

 function dismissError() {
 errorPanel.style.display = 'none';
 }
</script>
</asp:Content>
