<%@ Page Title="Restore Prompt (Golden Retriever)" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Restore Prompt - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Restore Prompt (Golden Retriever)</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="demo-card">
 <div class="demo-card-header">User-friendly resume modal on reload</div>
 <div class="demo-card-body">
 <p class="demo-description">
 When persisted state contains incomplete uploads from a previous tab
 session, the uploader now shows a confirm modal: <strong>Resume all</strong> or
 <strong>Discard</strong>. Resume re-adds the tasks to the queue and
 automatically starts uploading (when <code>persistBlobs</code> kept the
 File data). Discard clears the persisted store. Set
 <code>restorePrompt: false</code> for the legacy auto-rehydrate
 behaviour, or pass a function for a custom UI.
 </p>
 <div class="demo-expect"><strong>What you should see:</strong> interrupt a chunked upload and reload: the page offers to restore the pending upload from persisted state instead of silently restarting.</div> <div class="d-flex gap-2 mb-2 mt-4">
 <button type="button" class="btn btn-primary" id="startBtn_restoreUploader">Start upload</button>
 <button type="button" class="btn btn-outline-secondary" id="clearBtn_restoreUploader">Clear queue</button>
 </div>
 <div id="restoreUploader"></div>
 <script>
 (function () {
 function init() {
 if (!window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 var uploader = AjaxUploader.create('#restoreUploader', {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 chunkUrl: '<%= ResolveUrl("~/ajaxupload.axd/chunk") %>',
 chunkCompleteUrl: '<%= ResolveUrl("~/ajaxupload.axd/chunk/complete") %>',
 chunked: true,
 chunkSize: 1 * 1024 * 1024,
 chunkConcurrency: 3,
 autoUpload: false,
 multiple: true,
 persistState: true,
 persistAdapter: 'indexeddb',
 persistBlobs: true,
 restorePrompt: true
 });
 var startButton = document.getElementById('startBtn_restoreUploader');
 var clearButton = document.getElementById('clearBtn_restoreUploader');
 if (startButton) {
 startButton.addEventListener('click', function () {
 if (uploader && typeof uploader.upload === 'function') uploader.upload();
 });
 }
 if (clearButton) {
 clearButton.addEventListener('click', function () {
 if (uploader && typeof uploader.clear === 'function') uploader.clear();
 });
 }
 }
 if (document.readyState !== 'loading') init();
 else document.addEventListener('DOMContentLoaded', init);
 })();
 </script>
 <div class="alert alert-info mt-3" role="alert">
 <strong>Try it:</strong> queue a large file, click Start, then reload the page (F5) before it finishes.
 On reload you'll see a modal: Resume all (auto-rehydrates + restarts) or Discard (clears IndexedDB).
 </div>
 <h5 class="mt-4">Configuration</h5>
 <div class="code-panel">
<pre><code>AjaxUploader.create('#uploader', {
 persistState: true,
 persistAdapter: 'indexeddb',
 persistBlobs: true,
 restorePrompt: true <span style="color:#94a3b8">// default - built-in modal</span>
 // restorePrompt: false <span style="color:#94a3b8">// legacy auto-rehydrate</span>
 // restorePrompt: function (tasks) { <span style="color:#94a3b8">// custom UI:</span>
 //   return new Promise(function (res) { showMyModal(tasks, res); });
 // }
});</code></pre>
 </div>
 </div>
</div>
</asp:Content>
