Update app.py

app.py

@@ -336,6 +336,73 @@ HTML_CONTENT = """
             font-size: 0.9rem;
         }
 
+        .history-btn {
+            display: inline-block;
+            padding: 8px 16px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: #ffffff;
+            background-color: #2a2a2a;
+            border: none;
+            border-radius: 3px;
+            cursor: pointer;
+            transition: background-color 0.3s ease, box-shadow 0.3s ease;
+            margin-top: 1rem;
+        }
+
+        .history-btn:hover {
+            background-color: #3a3a3a;
+            box-shadow: 0 0 10px rgba(200, 200, 200, 0.3);
+        }
+
+        .history-modal {
+            display: none;
+            position: fixed;
+            z-index: 3;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.8);
+        }
+
+        .history-modal-content {
+            background-color: #1e1e1e;
+            margin: 10% auto;
+            padding: 20px;
+            border: 1px solid #333;
+            width: 90%;
+            max-width: 600px;
+            border-radius: 10px;
+            color: #e0e0e0;
+            animation: modalFadeIn 0.3s;
+        }
+
+        .history-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+            border-bottom: 1px solid #333;
+            transition: background-color 0.3s ease;
+        }
+
+        .history-item:hover {
+            background-color: #2a2a2a;
+        }
+
+        .history-item-name {
+            flex-grow: 1;
+            margin-right: 10px;
+            word-break: break-all;
+        }
+
+        .history-item-actions {
+            display: flex;
+            gap: 5px;
+        }
+
         @media (max-width: 480px) {
             .container {
                 padding: 1.5rem;
@@ -354,10 +421,19 @@ HTML_CONTENT = """
                 font-size: 0.7rem;
             }
 
-            .modal-content {
+            .modal-content, .history-modal-content {
                 width: 95%;
                 margin: 10% auto;
             }
+
+            .history-item {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .history-item-actions {
+                margin-top: 10px;
+            }
         }
     </style>
 </head>
@@ -366,7 +442,7 @@ HTML_CONTENT = """
         <h1>Radd PRO Uploader</h1>
         <form id="uploadForm">
             <div id="dropZone" class="drop-zone">
-                <input type="file" name="file" id="file" class="file-input" accept=".zip,.mp4,.txt,.mp3,image/*,.pdf" required>
+                                <input type="file" name="file" id="file" class="file-input" accept=".zip,.mp4,.txt,.mp3,image/*,.pdf" required>
                 <label for="file" class="btn">Choose File</label>
                 <p>or drag and drop file here/paste image</p>
             </div>
@@ -379,6 +455,7 @@ HTML_CONTENT = """
         <div class="file-types">
             Allowed file types: .zip, .mp4, .txt, .mp3, all image types, .pdf
         </div>
+        <button id="historyBtn" class="history-btn">View Upload History</button>
     </div>
 
     <div id="embedModal" class="modal">
@@ -393,6 +470,14 @@ HTML_CONTENT = """
         </div>
     </div>
 
+    <div id="historyModal" class="history-modal">
+        <div class="history-modal-content">
+            <span class="close">&times;</span>
+            <h2>Upload History</h2>
+            <div id="historyList"></div>
+        </div>
+    </div>
+
     <script>
         const fileInput = document.getElementById('file');
         const fileName = document.getElementById('fileName');
@@ -402,9 +487,12 @@ HTML_CONTENT = """
         const resultContainer = document.getElementById('resultContainer');
         const dropZone = document.getElementById('dropZone');
         const modal = document.getElementById('embedModal');
-        const span = document.getElementsByClassName("close")[0];
+        const historyModal = document.getElementById('historyModal');
+        const span = document.getElementsByClassName("close");
         const embedLinkInput = document.getElementById('embedLink');
         const uploadBtn = document.getElementById('uploadBtn');
+        const historyBtn = document.getElementById('historyBtn');
+        const historyList = document.getElementById('historyList');
 
         fileInput.addEventListener('change', handleFileSelect);
 
@@ -415,7 +503,7 @@ HTML_CONTENT = """
             }
         });
 
-                dropZone.addEventListener('dragover', (e) => {
+        dropZone.addEventListener('dragover', (e) => {
             e.preventDefault();
             dropZone.classList.add('drag-over');
         });
@@ -441,14 +529,25 @@ HTML_CONTENT = """
             }
         });
 
-        span.onclick = function() {
+        span[0].onclick = function() {
             modal.style.display = "none";
         }
 
+        span[1].onclick = function() {
+            historyModal.style.display = "none";
+        }
+
         window.onclick = function(event) {
             if (event.target == modal) {
                 modal.style.display = "none";
             }
+            if (event.target == historyModal) {
+                historyModal.style.display = "none";
+            }
+        }
+
+        historyBtn.onclick = function() {
+            showHistory();
         }
 
         function handleFileSelect(e) {
@@ -488,6 +587,7 @@ HTML_CONTENT = """
                             const response = JSON.parse(xhr.responseText);
                             if (response.url) {
                                 addResultLink(response.url, file.name);
+                                saveToHistory(file.name, response.url);
                                 resetUploadState();
                                 return;
                             } else {
@@ -504,18 +604,15 @@ HTML_CONTENT = """
 
                     xhr.send(formData);
 
-                    // Wait for the request to complete
                     await new Promise((resolve, reject) => {
                         xhr.onloadend = resolve;
                         xhr.onerror = reject;
                     });
 
-                    break; // Success, exit the loop
+                    break;
                 } catch (error) {
                     console.error('Upload error:', error);
-                    // Wait for a short time before retrying
                     await new Promise(resolve => setTimeout(resolve, 1000));
-                    // The loop will continue, retrying the upload
                 }
             }
         }
@@ -603,6 +700,63 @@ HTML_CONTENT = """
             document.execCommand('copy');
             alert('Embed link copied to clipboard!');
         }
+
+        function saveToHistory(fileName, url) {
+            let history = JSON.parse(localStorage.getItem('uploadHistory')) || [];
+            history.unshift({ fileName, url, timestamp: new Date().toISOString() });
+            if (history.length > 50) history = history.slice(0, 50);
+            localStorage.setItem('uploadHistory', JSON.stringify(history));
+        }
+
+        function showHistory() {
+            const history = JSON.parse(localStorage.getItem('uploadHistory')) || [];
+            historyList.innerHTML = '';
+            history.forEach(item => {
+                const historyItem = document.createElement('div');
+                historyItem.className = 'history-item';
+                
+                const itemName = document.createElement('span');
+                itemName.className = 'history-item-name';
+                itemName.textContent = item.fileName;
+                historyItem.appendChild(itemName);
+
+                const actionsContainer = document.createElement('div');
+                actionsContainer.className = 'history-item-actions';
+
+                const copyBtn = document.createElement('button');
+                copyBtn.textContent = 'Copy Link';
+                copyBtn.className = 'small-btn';
+                copyBtn.onclick = () => {
+                    navigator.clipboard.writeText(window.location.origin + item.url).then(() => {
+                        alert('Link copied to clipboard!');
+                    });
+                };
+                actionsContainer.appendChild(copyBtn);
+
+                const openBtn = document.createElement('button');
+                openBtn.textContent = 'Open';
+                openBtn.className = 'small-btn';
+                openBtn.onclick = () => {
+                    window.open(window.location.origin + item.url, '_blank');
+                };
+                actionsContainer.appendChild(openBtn);
+
+                if (item.fileName.toLowerCase().endsWith('.mp4')) {
+                    const embedBtn = document.createElement('button');
+                    embedBtn.textContent = 'Embed';
+                    embedBtn.className = 'small-btn';
+                    embedBtn.onclick = () => {
+                        showEmbedModal(item.url);
+                        historyModal.style.display = "none";
+                    };
+                    actionsContainer.appendChild(embedBtn);
+                }
+
+                historyItem.appendChild(actionsContainer);
+                historyList.appendChild(historyItem);
+            });
+            historyModal.style.display = "block";
+        }
     </script>
 </body>
 </html>