Update app.py

app.py

@@ -44,7 +44,7 @@ HTML_CONTENT = """
             transform: translateY(-5px);
             box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
         }
-        h1 {
+        h1, h2 {
             color: #ffffff;
             margin-bottom: 1.5rem;
             font-weight: 600;
@@ -253,7 +253,7 @@ HTML_CONTENT = """
             transform: scale(1);
         }
         .copy-embed-btn {
-            background-color: #4CAF50;
+            background-color: #333;
             color: white;
             border: none;
             padding: 10px 20px;
@@ -264,10 +264,20 @@ HTML_CONTENT = """
             margin: 4px 2px;
             transition-duration: 0.4s;
             cursor: pointer;
-            border-radius: 25px;
+            border-radius: 5px;
         }
         .copy-embed-btn:hover {
-            background-color: #45a049;
+            background-color: #444;
+        }
+        .embed-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 15px;
+        }
+        #embedLink {
+            flex-grow: 1;
+            margin-right: 10px;
         }
     </style>
 </head>
@@ -276,12 +286,12 @@ HTML_CONTENT = """
         <h1>Radd PRO Uploader</h1>
         <form id="uploadForm">
             <div id="dropZone" class="drop-zone">
-                <input type="file" name="files" id="files" class="file-input" accept=".zip,.mp4,.txt,.mp3,image/*,.pdf" required multiple>
-                <label for="files" class="btn">Choose Files</label>
-                <p>or drag and drop files here/paste images</p>
+                <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>
             <div class="file-name" id="fileName"></div>
-            <button type="button" id="uploadBtn" class="btn" style="display: none; margin-top: 1rem;">Upload Files</button>
+            <button type="submit" id="uploadBtn" class="btn" style="display: none; margin-top: 1rem;">Upload File</button>
             <div class="progress-container" id="progressContainer"></div>
             <div class="loading-spinner" id="loadingSpinner"></div>
         </form>
@@ -296,15 +306,17 @@ HTML_CONTENT = """
             <span class="close">&times;</span>
             <h2>Embed Video Link</h2>
             <p>Copy the following link to embed the video:</p>
-            <input type="text" id="embedLink" readonly>
-            <button onclick="copyEmbedLink()" class="copy-embed-btn">Copy Embed Link</button>
+            <div class="embed-container">
+                <input type="text" id="embedLink" readonly>
+                <button onclick="copyEmbedLink()" class="copy-embed-btn">Copy</button>
+            </div>
         </div>
     </div>
 
     <script>
-        const fileInput = document.getElementById('files');
+        const fileInput = document.getElementById('file');
         const fileName = document.getElementById('fileName');
-        const uploadBtn = document.getElementById('uploadBtn');
+        const uploadForm = document.getElementById('uploadForm');
         const progressContainer = document.getElementById('progressContainer');
         const loadingSpinner = document.getElementById('loadingSpinner');
         const resultContainer = document.getElementById('resultContainer');
@@ -313,13 +325,12 @@ HTML_CONTENT = """
         const span = document.getElementsByClassName("close")[0];
         const embedLinkInput = document.getElementById('embedLink');
 
-        let selectedFiles = [];
+        fileInput.addEventListener('change', handleFileSelect);
 
-        fileInput.addEventListener('change', handleFiles);
-
-        uploadBtn.addEventListener('click', () => {
-            if (selectedFiles.length > 0) {
-                uploadFiles(selectedFiles);
+        uploadForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            if (fileInput.files.length > 0) {
+                uploadFile(fileInput.files[0]);
             }
         });
 
@@ -335,21 +346,18 @@ HTML_CONTENT = """
         dropZone.addEventListener('drop', (e) => {
             e.preventDefault();
             dropZone.classList.remove('drag-over');
-            handleFiles({ target: { files: e.dataTransfer.files } });
+            handleFileSelect({ target: { files: e.dataTransfer.files } });
         });
 
         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();
-                    files.push(file);
+                    handleFileSelect({ target: { files: [file] } });
+                    break;
                 }
             }
-            if (files.length > 0) {
-                handleFiles({ target: { files: files } });
-            }
         });
 
         span.onclick = function() {
@@ -362,53 +370,31 @@ HTML_CONTENT = """
             }
         }
 
-        function handleFiles(e) {
-            selectedFiles = Array.from(e.target.files);
-            if (selectedFiles.length > 0) {
-                const fileNames = selectedFiles.map(file => file.name).join(', ');
-                fileName.textContent = fileNames;
-                uploadBtn.style.display = 'inline-block';
+        function handleFileSelect(e) {
+            if (e.target.files.length > 0) {
+                const file = e.target.files[0];
+                fileName.textContent = file.name;
+                document.getElementById('uploadBtn').style.display = 'inline-block';
             }
         }
 
-        function uploadFiles(files) {
+        function uploadFile(file) {
             progressContainer.innerHTML = '';
             progressContainer.style.display = 'block';
             loadingSpinner.style.display = 'block';
-            uploadBtn.disabled = true;
+            document.getElementById('uploadBtn').disabled = true;
             resultContainer.innerHTML = '';
             resultContainer.style.display = 'none';
 
-            files.forEach((file, index) => {
-                const progressBar = createProgressBar(file.name);
-                progressContainer.appendChild(progressBar);
-                uploadFile(file, progressBar, index);
-            });
-        }
+            const progressBar = createProgressBar(file.name);
+            progressContainer.appendChild(progressBar);
 
-        function createProgressBar(fileName) {
-            const progressBarContainer = document.createElement('div');
-            progressBarContainer.className = 'progress-bar';
-            const progress = document.createElement('div');
-            progress.className = 'progress';
-            progressBarContainer.appendChild(progress);
-            const label = document.createElement('div');
-            label.textContent = fileName;
-            label.style.fontSize = '0.8rem';
-            label.style.marginBottom = '5px';
-            const container = document.createElement('div');
-            container.appendChild(label);
-            container.appendChild(progressBarContainer);
-            return container;
-        }
-
-        function uploadFile(file, progressBarContainer, index) {
             const formData = new FormData();
             formData.append('file', file);
 
             const xhr = new XMLHttpRequest();
             xhr.open('POST', '/upload', true);
-            xhr.upload.onprogress = (event) => updateProgress(event, progressBarContainer.querySelector('.progress'));
+            xhr.upload.onprogress = (event) => updateProgress(event, progressBar.querySelector('.progress'));
             xhr.onload = function() {
                 if (xhr.status === 200) {
                     const response = JSON.parse(xhr.responseText);
@@ -420,26 +406,44 @@ HTML_CONTENT = """
                 } else {
                     alert('Upload failed: ' + xhr.statusText);
                 }
-                if (index === selectedFiles.length - 1) {
-                    resetUploadState();
-                }
+                resetUploadState();
             };
             xhr.onerror = function() {
                 alert('Upload failed: Network error');
-                if (index === selectedFiles.length - 1) {
-                    resetUploadState();
-                }
+                resetUploadState();
             };
             xhr.send(formData);
         }
 
+        function createProgressBar(fileName) {
+            const progressBarContainer = document.createElement('div');
+            progressBarContainer.className = 'progress-bar';
+            const progress = document.createElement('div');
+            progress.className = 'progress';
+            progressBarContainer.appendChild(progress);
+            const label = document.createElement('div');
+            label.textContent = fileName;
+            label.style.fontSize = '0.8rem';
+            label.style.marginBottom = '5px';
+            const container = document.createElement('div');
+            container.appendChild(label);
+            container.appendChild(progressBarContainer);
+            return container;
+        }
+
+        function updateProgress(event, progressBar) {
+            if (event.lengthComputable) {
+                const percentComplete = (event.loaded / event.total) * 100;
+                progressBar.style.width = percentComplete + '%';
+            }
+        }
+
                 function resetUploadState() {
             fileInput.value = '';
             fileName.textContent = '';
-            uploadBtn.style.display = 'none';
-            uploadBtn.disabled = false;
+            document.getElementById('uploadBtn').style.display = 'none';
+            document.getElementById('uploadBtn').disabled = false;
             loadingSpinner.style.display = 'none';
-            selectedFiles = [];
         }
 
         function addResultLink(url, fileName) {