feat: enhance ui with consistent scrollbar and remove api docs tab

package-lock.json

@@ -12,7 +12,9 @@
                 "cors": "^2.8.5",
                 "dotenv": "^16.3.1",
                 "express": "^4.18.2",
-                "multer": "^1.4.5-lts.1"
+                "express-rate-limit": "^8.2.1",
+                "multer": "^1.4.5-lts.1",
+                "uuid": "^13.0.0"
             }
         },
         "node_modules/accepts": {
@@ -349,6 +351,24 @@
                 "url": "https://opencollective.com/express"
             }
         },
+        "node_modules/express-rate-limit": {
+            "version": "8.2.1",
+            "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.2.1.tgz",
+            "integrity": "sha512-PCZEIEIxqwhzw4KF0n7QF4QqruVTcF73O5kFKUnGOyjbCCgizBBiFaYpd/fnBLUMPw/BWw9OsiN7GgrNYr7j6g==",
+            "license": "MIT",
+            "dependencies": {
+                "ip-address": "10.0.1"
+            },
+            "engines": {
+                "node": ">= 16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/express-rate-limit"
+            },
+            "peerDependencies": {
+                "express": ">= 4.11"
+            }
+        },
         "node_modules/finalhandler": {
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
@@ -505,6 +525,15 @@
             "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
             "license": "ISC"
         },
+        "node_modules/ip-address": {
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
+            "integrity": "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 12"
+            }
+        },
         "node_modules/ipaddr.js": {
             "version": "1.9.1",
             "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -1093,6 +1122,19 @@
                 "node": ">= 0.4.0"
             }
         },
+        "node_modules/uuid": {
+            "version": "13.0.0",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.0.tgz",
+            "integrity": "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==",
+            "funding": [
+                "https://github.com/sponsors/broofa",
+                "https://github.com/sponsors/ctavan"
+            ],
+            "license": "MIT",
+            "bin": {
+                "uuid": "dist-node/bin/uuid"
+            }
+        },
         "node_modules/vary": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

package.json

@@ -15,6 +15,8 @@
         "cors": "^2.8.5",
         "dotenv": "^16.3.1",
         "express": "^4.18.2",
-        "multer": "^1.4.5-lts.1"
+        "express-rate-limit": "^8.2.1",
+        "multer": "^1.4.5-lts.1",
+        "uuid": "^13.0.0"
     }
-}
+}

public/app.js

@@ -24,7 +24,13 @@ const elements = {
     closeModal: document.querySelector('.close-modal'),
     tabBtns: document.querySelectorAll('.tab-btn'),
     tabContents: document.querySelectorAll('.tab-content'),
-    codeBlocks: document.querySelectorAll('.code-block code')
+    expirationSelect: document.getElementById('expiration'),
+    historyList: document.getElementById('historyList'),
+    clearHistoryBtn: document.getElementById('clearHistoryBtn'),
+    toastContainer: document.getElementById('toastContainer'),
+    confirmModal: document.getElementById('confirmModal'),
+    cancelConfirmBtn: document.getElementById('cancelConfirmBtn'),
+    confirmDeleteBtn: document.getElementById('confirmDeleteBtn')
 };
 
 function preventDefaults(e) {
@@ -72,6 +78,11 @@ function initFileInput() {
     elements.fileInput.addEventListener('change', function () {
         handleFiles(this.files);
     });
+    
+    // Init History
+    renderHistory();
+    elements.clearHistoryBtn.addEventListener('click', showConfirmModal);
+    initConfirmModal();
 }
 
 function handleFiles(files) {
@@ -113,6 +124,9 @@ async function uploadFiles(files) {
     Array.from(files).forEach(file => {
         formData.append('files', file);
     });
+    
+    // Add expiration to formData
+    formData.append('expiration', elements.expirationSelect.value);
 
     try {
         const response = await fetch('/api/upload', {
@@ -132,24 +146,20 @@ async function uploadFiles(files) {
         setTimeout(() => {
             elements.uploadStatus.textContent = 'Completed';
             displayResults(data.files);
+            saveToHistory(data.files);
+            showToast('Files uploaded successfully!', 'success');
         }, 500);
 
     } catch (error) {
         clearInterval(progressInterval);
         console.error('Upload error:', error);
         elements.uploadStatus.textContent = 'Failed';
-        showStatus('Upload failed. Please try again.', 'error');
+        showToast('Upload failed. Please try again.', 'error');
     } finally {
         elements.fileInput.value = '';
     }
 }
 
-function showStatus(message, type) {
-    elements.statusMessage.textContent = message;
-    elements.statusMessage.className = `status-message status-${type}`;
-    elements.statusMessage.hidden = false;
-}
-
 function isImageFile(filename) {
     return IMAGE_EXTENSIONS.test(filename);
 }
@@ -182,6 +192,7 @@ function createCopyButton(url) {
     const btn = document.createElement('button');
     btn.className = 'copy-btn';
     btn.textContent = 'Copy';
+    btn.setAttribute('aria-label', `Copy link for ${url}`);
     btn.onclick = () => copyToClipboard(url, btn);
     return btn;
 }
@@ -215,6 +226,7 @@ async function copyToClipboard(text, btn) {
         const originalText = btn.textContent;
         btn.textContent = 'Copied!';
         btn.classList.add('copied');
+        showToast('Link copied to clipboard!', 'success');
 
         setTimeout(() => {
             btn.textContent = originalText;
@@ -222,6 +234,7 @@ async function copyToClipboard(text, btn) {
         }, COPY_FEEDBACK_MS);
     } catch (err) {
         console.error('Failed to copy:', err);
+        showToast('Failed to copy link', 'error');
     }
 }
 
@@ -239,6 +252,145 @@ function initTabs() {
     });
 }
 
+// History Management
+function getHistory() {
+    try {
+        return JSON.parse(localStorage.getItem('uploadHistory') || '[]');
+    } catch {
+        return [];
+    }
+}
+
+function saveToHistory(newFiles) {
+    const history = getHistory();
+    const updatedHistory = [...newFiles, ...history].slice(0, 50); // Keep last 50
+    localStorage.setItem('uploadHistory', JSON.stringify(updatedHistory));
+    renderHistory();
+}
+
+function showConfirmModal() {
+    elements.confirmModal.hidden = false;
+    requestAnimationFrame(() => elements.confirmModal.classList.add('show'));
+}
+
+function hideConfirmModal() {
+    elements.confirmModal.classList.remove('show');
+    setTimeout(() => {
+        elements.confirmModal.hidden = true;
+    }, 300);
+}
+
+function initConfirmModal() {
+    elements.cancelConfirmBtn.onclick = hideConfirmModal;
+    
+    elements.confirmDeleteBtn.onclick = () => {
+        localStorage.removeItem('uploadHistory');
+        renderHistory();
+        hideConfirmModal();
+        showToast('History cleared', 'success');
+    };
+    
+    elements.confirmModal.addEventListener('click', (e) => {
+        if (e.target === elements.confirmModal) hideConfirmModal();
+    });
+}
+
+function renderHistory() {
+    const history = getHistory();
+    elements.historyList.innerHTML = '';
+
+    if (history.length === 0) {
+        elements.historyList.innerHTML = '<p class="empty-state" style="text-align: center; color: var(--text-secondary); padding: 2rem;">No upload history yet.</p>';
+        return;
+    }
+
+    history.forEach(file => {
+        const item = document.createElement('div');
+        item.className = 'result-item'; // Reuse result item styling
+
+        if (isImageFile(file.originalName)) {
+            // Create small preview
+            const trigger = document.createElement('div');
+            trigger.className = 'preview-link';
+            trigger.style.cursor = 'pointer';
+            const img = document.createElement('img');
+            img.src = file.url;
+            img.className = 'result-preview';
+            trigger.appendChild(img);
+            trigger.setAttribute('role', 'button');
+            trigger.setAttribute('aria-label', `Preview ${file.originalName}`);
+            trigger.setAttribute('tabindex', '0');
+            trigger.onkeypress = (e) => {
+                if (e.key === 'Enter') openModal(file.url);
+            };
+            trigger.onclick = () => openModal(file.url);
+            item.appendChild(trigger);
+        }
+
+        const content = document.createElement('div');
+        content.className = 'result-content';
+        
+        // Wrapper for link and expiration info
+        const infoWrapper = document.createElement('div');
+        infoWrapper.style.flex = '1';
+        infoWrapper.style.minWidth = '0';
+        infoWrapper.style.display = 'flex';
+        infoWrapper.style.flexDirection = 'column';
+
+        infoWrapper.appendChild(createFileLink(file));
+        
+        if (file.expiresAt) {
+            const expirationSpan = document.createElement('span');
+            expirationSpan.style.fontSize = '0.75rem';
+            expirationSpan.style.color = 'var(--text-muted)';
+            expirationSpan.style.marginTop = '4px';
+            
+            const expDate = new Date(file.expiresAt);
+            const now = new Date();
+            const isExpired = expDate < now;
+            
+            if (isExpired) {
+                 expirationSpan.textContent = 'Expired';
+                 expirationSpan.style.color = 'var(--error-color)';
+            } else {
+                expirationSpan.textContent = `Expires: ${expDate.toLocaleString()}`;
+            }
+            
+            infoWrapper.appendChild(expirationSpan);
+        } else {
+             const permanentSpan = document.createElement('span');
+             permanentSpan.style.fontSize = '0.75rem';
+             permanentSpan.style.color = 'var(--success-color)';
+             permanentSpan.style.marginTop = '4px';
+             permanentSpan.textContent = 'Permanent';
+             infoWrapper.appendChild(permanentSpan);
+        }
+
+        content.appendChild(infoWrapper);
+        content.appendChild(createCopyButton(file.url));
+        item.appendChild(content);
+        elements.historyList.appendChild(item);
+    });
+}
+
+// Toast Notification System
+function showToast(message, type = 'info') {
+    const toast = document.createElement('div');
+    toast.className = `toast ${type}`;
+    
+    toast.innerHTML = `
+        <span class="toast-message">${message}</span>
+    `;
+    
+    elements.toastContainer.appendChild(toast);
+    
+    // Remove after 3 seconds
+    setTimeout(() => {
+        toast.classList.add('hiding');
+        toast.addEventListener('animationend', () => toast.remove());
+    }, 3000);
+}
+
 function openModal(src) {
     elements.modal.hidden = false;
     requestAnimationFrame(() => {
@@ -271,19 +423,11 @@ function initModal() {
     });
 }
 
-function initDynamicUrls() {
-    const origin = window.location.origin;
-    elements.codeBlocks.forEach(block => {
-        block.innerHTML = block.innerHTML.replace(/https:\/\/YOUR_DOMAIN/g, origin);
-    });
-}
-
 function init() {
     initDragAndDrop();
     initFileInput();
     initTabs();
     initModal();
-    initDynamicUrls();
 }
 
 init();

public/index.html

@@ -27,7 +27,7 @@
             <!-- Tabs -->
             <div class="tabs">
                 <button class="tab-btn active" data-tab="upload">Upload</button>
-                <button class="tab-btn" data-tab="docs">API Docs</button>
+                <button class="tab-btn" data-tab="history">History</button>
             </div>
 
             <!-- Upload Tab Content -->
@@ -48,10 +48,20 @@
                         </svg>
                     </div>
                     <h3>Drag & Drop files here</h3>
-                    <p>or <button class="browse-btn" id="browseBtn">Browse Files</button></p>
+                    <p>or <button class="browse-btn" id="browseBtn" aria-label="Browse files to upload">Browse Files</button></p>
                     <input type="file" id="fileInput" multiple hidden>
                 </div>
 
+                <div class="upload-options" style="margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem;">
+                    <label for="expiration" style="font-weight: 500; color: var(--text-muted);">File Expiration:</label>
+                    <select id="expiration" aria-label="Select file expiration time" style="padding: 0.5rem; border-radius: 8px; border: 1px solid #ccc; background: rgba(255,255,255,0.8); color: var(--text-color);">
+                        <option value="1h">1 Hour</option>
+                        <option value="24h" selected>24 Hours</option>
+                        <option value="7d">7 Days</option>
+                        <option value="permanent">Never (Permanent)</option>
+                    </select>
+                </div>
+
                 <div class="progress-container" id="progressContainer" hidden>
                     <div class="file-info">
                         <span class="file-name" id="fileName">Uploading files...</span>
@@ -66,59 +76,19 @@
                 <div class="status-message" id="statusMessage" hidden></div>
             </div>
 
-            <!-- API Docs Tab Content -->
-            <div class="tab-content" id="docs">
+            <!-- History Tab Content -->
+            <div class="tab-content" id="history">
                 <div class="card-header">
-                    <h1>API Documentation</h1>
-                    <p>Integrate file uploads into your application</p>
-                </div>
-
-                <div class="docs-section">
-                    <h3>Endpoint</h3>
-                    <div class="code-block">
-                        <pre><code class="language-http">POST /api/upload</code></pre>
-                    </div>
+                    <h1>Upload History</h1>
+                    <p>Your previously uploaded files</p>
                 </div>
-
-                <div class="docs-section">
-                    <h3>Request</h3>
-                    <p class="docs-text">Send files using <code>multipart/form-data</code> with the field name
-                        <code>files</code>.
-                    </p>
-                    <div class="code-block">
-                        <pre><code class="language-bash">curl -X POST \
-  https://YOUR_DOMAIN/api/upload \
-  -F "[email protected]" \
-  -F "[email protected]"</code></pre>
-                    </div>
+                
+                <div class="history-actions" style="margin-bottom: 1rem; text-align: right;">
+                    <button id="clearHistoryBtn" class="secondary-btn" style="padding: 0.6rem 1.2rem; border: 1px solid #ccc; border-radius: 8px; background: rgba(255, 255, 255, 0.9); color: var(--text-color); cursor: pointer; font-weight: 500; transition: all 0.2s ease;">Clear History</button>
                 </div>
 
-                <div class="docs-section">
-                    <h3>Response</h3>
-                    <p class="docs-text">Returns JSON with uploaded file details:</p>
-                    <div class="code-block">
-                        <pre><code class="language-json">{
-  "status": "success",
-  "message": "Files uploaded successfully",
-  "files": [
-    {
-      "originalName": "image1.png",
-      "filename": "1733...-image1.png",
-      "url": "https://YOUR_DOMAIN/uploads/..."
-    }
-  ]
-}</code></pre>
-                    </div>
-                </div>
-
-                <div class="docs-section">
-                    <h3>Error Response</h3>
-                    <div class="code-block">
-                        <pre><code class="language-json">{
-  "status": "error",
-  "message": "No files uploaded"
-}</code></pre>
-                    </div>
+                <div id="historyList" class="history-list">
+                    <p class="empty-state" style="text-align: center; color: var(--text-muted); padding: 2rem;">No upload history yet.</p>
                 </div>
             </div>
         </div>
@@ -129,11 +99,22 @@
         <img class="modal-content" id="modalImage">
     </div>
 
+    <!-- Confirmation Modal -->
+    <div id="confirmModal" class="modal" hidden>
+        <div class="confirm-content">
+            <h3>Clear History?</h3>
+            <p>Are you sure you want to clear your entire upload history? This action cannot be undone.</p>
+            <div class="confirm-actions">
+                <button id="cancelConfirmBtn" class="secondary-btn">Cancel</button>
+                <button id="confirmDeleteBtn" class="danger-btn">Delete History</button>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Toast Container -->
+    <div id="toastContainer" class="toast-container"></div>
+
     <script src="app.js" type="module"></script>
-    <!-- Prism.js -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
 </body>
 
 </html>

public/style.css

@@ -7,8 +7,8 @@
     --bg-gradient-2: #6366f1;
     --bg-gradient-3: #f472b6;
     --glass-bg: rgba(255, 255, 255, 0.7);
-    --glass-border: rgba(255, 255, 255, 0.5);
-    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    --glass-border: rgba(255, 255, 255, 0.8);
+    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
     --success-color: #10b981;
     --error-color: #ef4444;
     --transition-fast: 0.2s ease;
@@ -104,8 +104,8 @@ body {
 
 .upload-card {
     background: var(--glass-bg);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
     border: 1px solid var(--glass-border);
     border-radius: var(--border-radius-2xl);
     padding: 40px;
@@ -251,7 +251,14 @@ body {
 .results-container {
     margin-top: 24px;
     text-align: left;
-    max-height: 40vh;
+    max-height: 350px;
+    overflow-y: auto;
+}
+
+.history-list {
+    margin-top: 24px;
+    text-align: left;
+    max-height: 350px;
     overflow-y: auto;
 }
 
@@ -358,6 +365,24 @@ body {
     background: rgba(107, 114, 128, 0.5);
 }
 
+/* History List Scrollbar - Match Results Container */
+.history-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.history-list::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.history-list::-webkit-scrollbar-thumb {
+    background: rgba(156, 163, 175, 0.5);
+    border-radius: 3px;
+}
+
+.history-list::-webkit-scrollbar-thumb:hover {
+    background: rgba(107, 114, 128, 0.5);
+}
+
 /* Tabs */
 .tabs {
     display: flex;
@@ -379,15 +404,27 @@ body {
     color: var(--text-muted);
     cursor: pointer;
     transition: all var(--transition-normal);
+    position: relative;
+    overflow: hidden;
 }
 
 .tab-btn:hover {
     color: var(--text-color);
+    background: rgba(255, 255, 255, 0.4);
+}
+
+/* Focus Visible for Accessibility */
+.tab-btn:focus-visible,
+.browse-btn:focus-visible,
+.copy-btn:focus-visible,
+select:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
 }
 
 .tab-btn.active {
-    background: white;
-    color: var(--primary-color);
+    background: linear-gradient(135deg, var(--bg-gradient-2), var(--bg-gradient-1));
+    color: white;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
@@ -412,56 +449,6 @@ body {
     }
 }
 
-/* API Docs */
-.docs-section {
-    margin-bottom: 20px;
-    text-align: left;
-}
-
-.docs-section h3 {
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--text-color);
-    margin-bottom: 8px;
-}
-
-.docs-text {
-    font-size: 0.9rem;
-    color: var(--text-muted);
-    margin-bottom: 8px;
-    line-height: 1.5;
-}
-
-.docs-text code {
-    background: rgba(79, 70, 229, 0.1);
-    color: var(--primary-color);
-    padding: 2px 6px;
-    border-radius: var(--border-radius-sm);
-    font-family: 'Fira Code', monospace;
-    font-size: 0.85rem;
-}
-
-.code-block {
-    background: #2d2d2d;
-    border-radius: var(--border-radius-lg);
-    padding: 16px;
-    overflow-x: auto;
-}
-
-.code-block code,
-.code-block pre {
-    font-family: 'Fira Code', monospace;
-    font-size: 0.85rem;
-    margin: 0;
-    background: transparent !important;
-}
-
-.code-block pre[class*="language-"] {
-    margin: 0;
-    padding: 0;
-    background: transparent;
-}
-
 /* Modal */
 .modal {
     position: fixed;
@@ -514,4 +501,133 @@ body {
 .close-modal:hover,
 .close-modal:focus {
     color: #bbb;
+}
+
+/* Confirmation Modal */
+.confirm-content {
+    background: white;
+    padding: 32px;
+    border-radius: var(--border-radius-xl);
+    max-width: 400px;
+    width: 90%;
+    text-align: center;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.confirm-content h3 {
+    font-size: 1.5rem;
+    margin-bottom: 12px;
+    color: var(--text-color);
+}
+
+.confirm-content p {
+    color: var(--text-muted);
+    margin-bottom: 24px;
+    line-height: 1.5;
+}
+
+.confirm-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+}
+
+.secondary-btn {
+    padding: 10px 20px;
+    border: 1px solid #ccc;
+    border-radius: var(--border-radius-md);
+    background: white;
+    color: var(--text-color);
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.secondary-btn:hover {
+    background: #f3f4f6;
+    border-color: #b0b0b0;
+}
+
+.danger-btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: var(--border-radius-md);
+    background: var(--error-color);
+    color: white;
+    cursor: pointer;
+    font-weight: 500;
+    transition: background 0.2s;
+}
+
+.danger-btn:hover {
+    background: #dc2626;
+}
+
+@keyframes popIn {
+    from { transform: scale(0.9); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+}
+
+/* Toast Notifications */
+.toast-container {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    z-index: 2000;
+    pointer-events: none;
+}
+
+.toast {
+    background: white;
+    color: var(--text-color);
+    padding: 12px 20px;
+    border-radius: var(--border-radius-md);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 250px;
+    pointer-events: auto;
+    animation: slideInRight 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    border-left: 4px solid var(--primary-color);
+}
+
+.toast.success { border-left-color: var(--success-color); }
+.toast.error { border-left-color: var(--error-color); }
+
+.toast.hiding {
+    animation: fadeOutRight 0.3s ease forwards;
+}
+
+@keyframes slideInRight {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes fadeOutRight {
+    from { transform: translateX(0); opacity: 1; }
+    to { transform: translateX(100%); opacity: 0; }
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 480px) {
+    .container {
+        padding: 10px;
+    }
+    
+    .upload-card {
+        padding: 24px;
+    }
+
+    .tabs {
+        flex-wrap: wrap;
+    }
+    
+    .tab-btn {
+        flex-basis: 100%;
+    }
 }

server.js

@@ -11,16 +11,26 @@ import os from 'os';
 import { fileURLToPath } from 'url';
 import fs from 'fs/promises';
 import { existsSync, mkdirSync } from 'fs';
+import dotenv from 'dotenv';
+import rateLimit from 'express-rate-limit';
+import { v4 as uuidv4 } from 'uuid';
+
+dotenv.config();
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const CONFIG = {
     port: process.env.PORT || 7860,
-    uploadDir: path.join(os.tmpdir(), 'web-uploader'),
-    maxFileSize: 500 * 1024 * 1024
+    uploadDir: process.env.UPLOAD_DIR || path.join(os.tmpdir(), 'web-uploader'),
+    maxFileSize: parseInt(process.env.MAX_FILE_SIZE) || 500 * 1024 * 1024,
+    rateLimitWindow: parseInt(process.env.RATE_LIMIT_WINDOW_MS) || 15 * 60 * 1000, // 15 minutes
+    rateLimitMax: parseInt(process.env.RATE_LIMIT_MAX) || 100,
+    cleanupInterval: parseInt(process.env.CLEANUP_INTERVAL_MS) || 60 * 60 * 1000 // 1 hour
 };
 
+const METADATA_FILE = path.join(CONFIG.uploadDir, 'metadata.json');
+
 const app = express();
 
 app.set('trust proxy', true);
@@ -28,6 +38,15 @@ app.use(cors());
 app.use(express.static(path.join(__dirname, 'public')));
 app.use('/uploads', express.static(CONFIG.uploadDir));
 
+// Rate Limiting
+const limiter = rateLimit({
+    windowMs: CONFIG.rateLimitWindow,
+    max: CONFIG.rateLimitMax,
+    standardHeaders: true,
+    legacyHeaders: false,
+    validate: { trustProxy: false }
+});
+
 const storage = multer.diskStorage({
     destination: (req, file, cb) => {
         if (!existsSync(CONFIG.uploadDir)) {
@@ -46,6 +65,89 @@ const upload = multer({
     limits: { fileSize: CONFIG.maxFileSize }
 });
 
+// Metadata Manager
+class MetadataManager {
+    static async ensureMetadataFile() {
+        if (!existsSync(METADATA_FILE)) {
+            await fs.writeFile(METADATA_FILE, JSON.stringify({}, null, 2));
+        }
+    }
+
+    static async load() {
+        await this.ensureMetadataFile();
+        try {
+            const data = await fs.readFile(METADATA_FILE, 'utf8');
+            return JSON.parse(data);
+        } catch (error) {
+            console.error('Error reading metadata:', error);
+            return {};
+        }
+    }
+
+    static async save(data) {
+        await fs.writeFile(METADATA_FILE, JSON.stringify(data, null, 2));
+    }
+
+    static async addFile(filename, expiration) {
+        const metadata = await this.load();
+        const expiresAt = expiration === 'permanent' ? null : Date.now() + this.parseExpiration(expiration);
+        
+        metadata[filename] = {
+            filename,
+            uploadedAt: Date.now(),
+            expiresAt
+        };
+        
+        await this.save(metadata);
+        return metadata[filename];
+    }
+
+    static parseExpiration(exp) {
+        const units = {
+            'h': 60 * 60 * 1000,
+            'd': 24 * 60 * 60 * 1000,
+            'w': 7 * 24 * 60 * 60 * 1000
+        };
+        const match = exp.match(/^(\d+)([hdw])$/);
+        if (!match) return 24 * 60 * 60 * 1000; // Default 24h
+        return parseInt(match[1]) * units[match[2]];
+    }
+
+    static async cleanup() {
+        const metadata = await this.load();
+        const now = Date.now();
+        let changed = false;
+
+        for (const [filename, info] of Object.entries(metadata)) {
+            if (info.expiresAt && info.expiresAt < now) {
+                try {
+                    const filePath = path.join(CONFIG.uploadDir, filename);
+                    if (existsSync(filePath)) {
+                        await fs.unlink(filePath);
+                        console.log(`Expired file deleted: ${filename}`);
+                    }
+                    delete metadata[filename];
+                    changed = true;
+                } catch (err) {
+                    console.error(`Failed to delete expired file ${filename}:`, err);
+                }
+            }
+        }
+
+        if (changed) {
+            await this.save(metadata);
+        }
+    }
+}
+
+// Start cleanup task
+setInterval(() => {
+    MetadataManager.cleanup();
+}, CONFIG.cleanupInterval);
+
+// Initial cleanup on startup
+MetadataManager.cleanup();
+
 function isValidFilePath(filePath) {
     const safeUploadDir = path.normalize(CONFIG.uploadDir);
     const resolvedPath = path.normalize(filePath);
@@ -56,7 +158,7 @@ function buildFileUrl(req, filename) {
     return `${req.protocol}://${req.get('host')}/uploads/${filename}`;
 }
 
-app.post('/api/upload', upload.array('files'), (req, res) => {
+app.post('/api/upload', limiter, upload.array('files'), async (req, res) => {
     if (!req.files || req.files.length === 0) {
         return res.status(400).json({
             status: 'error',
@@ -64,10 +166,16 @@ app.post('/api/upload', upload.array('files'), (req, res) => {
         });
     }
 
-    const uploadedFiles = req.files.map(file => ({
+    const expiration = req.body.expiration || '24h';
+    
+    const uploadedFiles = await Promise.all(req.files.map(async file => {
+        const metadata = await MetadataManager.addFile(file.filename, expiration);
+        return {
         originalName: file.originalname,
         filename: file.filename,
-        url: buildFileUrl(req, file.filename)
+        url: buildFileUrl(req, file.filename),
+        expiresAt: metadata.expiresAt
+        };
     }));
 
     res.status(200).json({
@@ -89,6 +197,13 @@ app.delete('/api/delete/:filename', async (req, res) => {
     }
 
     try {
+        // Remove from metadata
+        const metadata = await MetadataManager.load();
+        if (metadata[filename]) {
+            delete metadata[filename];
+            await MetadataManager.save(metadata);
+        }
+
         await fs.access(filePath);
     } catch {
         return res.status(404).json({