Update app.py

app.py

@@ -425,7 +425,7 @@ HTML_CONTENT = """
             gap: 5px;
         }
 
-        .quick-open-modal {
+                .quick-open-modal {
             display: none;
             position: fixed;
             z-index: 4;
@@ -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,7 +537,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="*" multiple required>
+                <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>
@@ -602,6 +602,8 @@ HTML_CONTENT = """
         const historyList = document.getElementById('historyList');
         const quickOpenContent = document.getElementById('quickOpenContent');
 
+        let pastedImageCounter = 0;
+
         fileInput.addEventListener('change', handleFileSelect);
 
         uploadForm.addEventListener('submit', (e) => {
@@ -628,15 +630,27 @@ HTML_CONTENT = """
 
         document.addEventListener('paste', (e) => {
             const items = e.clipboardData.items;
+            const files = [];
             for (let i = 0; i < items.length; i++) {
                 if (items[i].kind === 'file') {
                     const file = items[i].getAsFile();
-                    handleFileSelect({ target: { files: [file] } });
-                    break;
+                    const newFileName = generateUniqueFileName(file.name);
+                    const renamedFile = new File([file], newFileName, { type: file.type });
+                    files.push(renamedFile);
                 }
             }
+            if (files.length > 0) {
+                handleFileSelect({ target: { files: files } });
+            }
         });
 
+        function generateUniqueFileName(originalName) {
+            const extension = originalName.split('.').pop();
+            const baseName = originalName.split('.').slice(0, -1).join('.');
+            pastedImageCounter++;
+            return `${baseName}${pastedImageCounter}.${extension}`;
+        }
+
         span[0].onclick = function() {
             modal.style.display = "none";
         }
@@ -674,12 +688,8 @@ HTML_CONTENT = """
 
         function handleFileSelect(e) {
             if (e.target.files && e.target.files.length > 0) {
-                const files = e.target.files;
-                let fileNames = [];
-                for (let i = 0; i < files.length; i++) {
-                    fileNames.push(files[i].name);
-                }
-                fileName.textContent = fileNames.join(', ');
+                const fileNames = Array.from(e.target.files).map(file => file.name).join(', ');
+                fileName.textContent = fileNames;
                 uploadBtn.style.display = 'inline-block';
             }
         }
@@ -692,37 +702,50 @@ HTML_CONTENT = """
             resultContainer.innerHTML = '';
             resultContainer.style.display = 'none';
 
-            for (let i = 0; i < files.length; i++) {
-                const file = files[i];
+            for (let file of files) {
                 const progressBar = createProgressBar(file.name);
                 progressContainer.appendChild(progressBar);
 
                 const formData = new FormData();
                 formData.append('file', file);
 
-                try {
-                    const response = await fetch('/upload', {
-                        method: 'POST',
-                        body: formData
-                    });
-
-                    if (response.ok) {
-                        const result = await response.json();
-                        if (result.url) {
-                            addResultLink(result.url, file.name, result.originalExtension);
-                            saveToHistory(file.name, result.url, result.originalExtension);
-                        } else {
-                            throw new Error('Upload failed: ' + result.error);
-                        }
-                    } else {
-                        throw new Error(`HTTP error! status: ${response.status}`);
+                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(`HTTP error! status: ${xhr.status}`);
+                            }
+                        };
+
+                        xhr.onerror = function() {
+                            throw new Error('Network error occurred');
+                        };
+
+                        xhr.send(formData);
+
+                        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));
                     }
-                } catch (error) {
-                    console.error('Upload error:', error);
-                    alert(`Failed to upload ${file.name}: ${error.message}`);
                 }
-
-                updateProgress({ loaded: 1, total: 1 }, progressBar.querySelector('.progress'));
             }
 
             resetUploadState();
@@ -847,7 +870,7 @@ HTML_CONTENT = """
                 copyBtn.textContent = 'Copy Link';
                 copyBtn.className = 'small-btn';
                 copyBtn.onclick = () => {
-                    navigator.clipboard.writeText(window.location.origin + item.url).then(() => {
+                                        navigator.clipboard.writeText(window.location.origin + item.url).then(() => {
                         alert('Link copied to clipboard!');
                     });
                 };
@@ -887,7 +910,7 @@ HTML_CONTENT = """
                 img.src = fullUrl;
                 img.alt = fileName;
                 quickOpenContent.appendChild(img);
-                        } else if (originalExtension.toLowerCase() === 'mp4') {
+            } else if (originalExtension.toLowerCase() === 'mp4') {
                 const video = document.createElement('video');
                 video.src = fullUrl;
                 video.controls = true;