Update app.py

app.py

@@ -3,7 +3,7 @@ from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse, Fil
 import requests
 import time
 import asyncio
-from typing import Dict
+from typing import Dict, List
 import os
 import mimetypes
 
@@ -437,7 +437,7 @@ HTML_CONTENT = """
             overflow: auto;
         }
 
-        .quick-open-content {
+                .quick-open-content {
             margin: 5% auto;
             padding: 20px;
             width: 90%;
@@ -445,7 +445,7 @@ HTML_CONTENT = """
             text-align: center;
         }
 
-                .quick-open-content img,
+        .quick-open-content img,
         .quick-open-content video,
         .quick-open-content audio {
             max-width: 100%;
@@ -537,12 +537,12 @@ 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="*" required>
-                <label for="file" class="btn">Choose File</label>
-                <p>or drag and drop file here/paste image</p>
+                <input type="file" name="file" id="file" class="file-input" accept="*" required multiple>
+                <label for="file" class="btn">Choose Files</label>
+                <p>or drag and drop files here/paste image</p>
             </div>
             <div class="file-name" id="fileName"></div>
-            <button type="submit" id="uploadBtn" class="btn" style="display: none; margin-top: 1rem;">Upload File</button>
+            <button type="submit" id="uploadBtn" class="btn" style="display: none; margin-top: 1rem;">Upload Files</button>
             <div class="progress-container" id="progressContainer"></div>
             <div class="loading-spinner" id="loadingSpinner"></div>
         </form>
@@ -607,7 +607,7 @@ HTML_CONTENT = """
         uploadForm.addEventListener('submit', (e) => {
             e.preventDefault();
             if (fileInput.files.length > 0) {
-                uploadFile(fileInput.files[0]);
+                uploadFiles(fileInput.files);
             }
         });
 
@@ -674,17 +674,13 @@ HTML_CONTENT = """
 
         function handleFileSelect(e) {
             if (e.target.files && e.target.files.length > 0) {
-                const file = e.target.files[0];
-                fileName.textContent = file.name;
+                const fileNames = Array.from(e.target.files).map(file => file.name).join(', ');
+                fileName.textContent = fileNames;
                 uploadBtn.style.display = 'inline-block';
-                
-                const dataTransfer = new DataTransfer();
-                dataTransfer.items.add(file);
-                fileInput.files = dataTransfer.files;
             }
         }
 
-        async function uploadFile(file) {
+        async function uploadFiles(files) {
             progressContainer.innerHTML = '';
             progressContainer.style.display = 'block';
             loadingSpinner.style.display = 'block';
@@ -692,51 +688,53 @@ HTML_CONTENT = """
             resultContainer.innerHTML = '';
             resultContainer.style.display = 'none';
 
-            const progressBar = createProgressBar(file.name);
-            progressContainer.appendChild(progressBar);
-
-            const formData = new FormData();
-            formData.append('file', file);
-
-            while (true) {
-                try {
-                    const xhr = new XMLHttpRequest();
-                    xhr.open('POST', '/upload', true);
-                    xhr.upload.onprogress = (event) => updateProgress(event, progressBar.querySelector('.progress'));
-                    
-                    xhr.onload = function() {
-                        if (xhr.status === 200) {
-                            const response = JSON.parse(xhr.responseText);
-                            if (response.url) {
-                                addResultLink(response.url, file.name, response.originalExtension);
-                                saveToHistory(file.name, response.url, response.originalExtension);
-                                resetUploadState();
-                                return;
+            for (let file of files) {
+                const progressBar = createProgressBar(file.name);
+                progressContainer.appendChild(progressBar);
+
+                const formData = new FormData();
+                formData.append('file', file);
+
+                while (true) {
+                    try {
+                        const xhr = new XMLHttpRequest();
+                        xhr.open('POST', '/upload', true);
+                        xhr.upload.onprogress = (event) => updateProgress(event, progressBar.querySelector('.progress'));
+                        
+                        xhr.onload = function() {
+                            if (xhr.status === 200) {
+                                const response = JSON.parse(xhr.responseText);
+                                if (response.url) {
+                                    addResultLink(response.url, file.name, response.originalExtension);
+                                    saveToHistory(file.name, response.url, response.originalExtension);
+                                } else {
+                                    throw new Error('Upload failed: ' + response.error);
+                                }
                             } else {
-                                throw new Error('Upload failed: ' + response.error);
+                                throw new Error(`HTTP error! status: ${xhr.status}`);
                             }
-                        } else {
-                            throw new Error(`HTTP error! status: ${xhr.status}`);
-                        }
-                    };
+                        };
 
-                    xhr.onerror = function() {
-                        throw new Error('Network error occurred');
-                    };
+                        xhr.onerror = function() {
+                            throw new Error('Network error occurred');
+                        };
 
-                    xhr.send(formData);
+                        xhr.send(formData);
 
-                    await new Promise((resolve, reject) => {
-                        xhr.onloadend = resolve;
-                        xhr.onerror = reject;
-                    });
+                        await new Promise((resolve, reject) => {
+                            xhr.onloadend = resolve;
+                            xhr.onerror = reject;
+                        });
 
-                    break;
-                } catch (error) {
-                    console.error('Upload error:', error);
-                    await new Promise(resolve => setTimeout(resolve, 1000));
+                        break;
+                    } catch (error) {
+                        console.error('Upload error:', error);
+                        await new Promise(resolve => setTimeout(resolve, 1000));
+                    }
                 }
             }
+
+            resetUploadState();
         }
 
         function createProgressBar(fileName) {
@@ -883,13 +881,13 @@ HTML_CONTENT = """
                     actionsContainer.appendChild(embedBtn);
                 }
 
-                historyItem.appendChild(actionsContainer);
+                                historyItem.appendChild(actionsContainer);
                 historyList.appendChild(historyItem);
             });
             historyModal.style.display = "block";
         }
 
-                function quickOpen(url, fileName, originalExtension) {
+        function quickOpen(url, fileName, originalExtension) {
             quickOpenContent.innerHTML = '';
             const fullUrl = window.location.origin + url;