Spaces:

coollsd
/

fileuploader

Running

App Files Files Community

coollsd commited on Sep 17, 2024

Commit

8ea5abe

verified ·

1 Parent(s): 8025976

Update app.py

Browse files

Files changed (1) hide show

app.py +129 -50

app.py CHANGED Viewed

@@ -2,7 +2,7 @@ from fastapi import FastAPI, File, UploadFile, Request
 from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
 import requests
 import time
-from typing import Dict
 app = FastAPI()
@@ -24,6 +24,22 @@ HTML_CONTENT = """
             justify-content: center;
             align-items: center;
             color: #e0e0e0;
         }
         .container {
             background: rgba(255, 255, 255, 0.1);
@@ -38,11 +54,12 @@ HTML_CONTENT = """
             transition: all 0.3s ease;
         }
         .container:hover {
             transform: translateY(-5px);
             box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
         }
         h1 {
-            color: #00CED1;
             margin-bottom: 1.5rem;
             font-weight: 600;
         }
@@ -50,7 +67,7 @@ HTML_CONTENT = """
             display: none;
         }
         .btn {
-            background-color: #00CED1;
             color: #121212;
             padding: 12px 24px;
             border-radius: 5px;
@@ -71,7 +88,7 @@ HTML_CONTENT = """
             left: 50%;
             width: 5px;
             height: 5px;
-            background: rgba(255, 255, 255, 0.5);
             opacity: 0;
             border-radius: 100%;
             transform: scale(1, 1) translate(-50%);
@@ -95,7 +112,7 @@ HTML_CONTENT = """
             animation: ripple 1s ease-out;
         }
         .btn:hover {
-            background-color: #00A9A9;
         }
         .btn:disabled {
             background-color: #555;
@@ -116,11 +133,12 @@ HTML_CONTENT = """
             background-color: #333;
             border-radius: 5px;
             overflow: hidden;
         }
         .progress {
             width: 0%;
             height: 100%;
-            background-color: #00CED1;
             transition: width 0.3s ease;
         }
         .loading-spinner {
@@ -128,7 +146,7 @@ HTML_CONTENT = """
             width: 40px;
             height: 40px;
             border: 4px solid #333;
-            border-top: 4px solid #00CED1;
             border-radius: 50%;
             animation: spin 1s linear infinite;
             margin: 20px auto;
@@ -142,14 +160,13 @@ HTML_CONTENT = """
             margin-top: 1.5rem;
         }
         .result-link {
-            color: #00CED1;
             text-decoration: none;
             font-weight: 600;
             transition: all 0.3s ease;
             margin-right: 10px;
         }
         .result-link:hover {
-            color: #00A9A9;
             text-decoration: underline;
         }
         .copy-btn {
@@ -167,91 +184,123 @@ HTML_CONTENT = """
     </style>
 </head>
 <body>
     <div class="container">
         <h1>Pro File Uploader</h1>
         <form id="uploadForm">
-            <input type="file" name="file" id="file" class="file-input" accept="*/*" required>
-            <label for="file" class="btn">Choose File</label>
             <div class="file-name" id="fileName"></div>
-            <button type="button" id="uploadBtn" class="btn" style="display: none; margin-top: 1rem;">Upload File</button>
-            <div class="progress-container" id="progressContainer">
-                <div class="progress-bar">
-                    <div class="progress" id="progress"></div>
-                </div>
-            </div>
             <div class="loading-spinner" id="loadingSpinner"></div>
         </form>
-        <div class="result-container" id="resultContainer">
-            <a href="#" class="result-link" id="resultLink" target="_blank">View Uploaded File</a>
-            <button class="copy-btn" id="copyBtn">Copy Link</button>
-        </div>
     </div>
     <script>
-        const fileInput = document.getElementById('file');
         const fileName = document.getElementById('fileName');
         const uploadBtn = document.getElementById('uploadBtn');
         const progressContainer = document.getElementById('progressContainer');
-        const progress = document.getElementById('progress');
         const loadingSpinner = document.getElementById('loadingSpinner');
         const resultContainer = document.getElementById('resultContainer');
-        const resultLink = document.getElementById('resultLink');
-        const copyBtn = document.getElementById('copyBtn');
         fileInput.addEventListener('change', (e) => {
             if (e.target.files.length > 0) {
-                fileName.textContent = e.target.files[0].name;
                 uploadBtn.style.display = 'inline-block';
             }
         });
         uploadBtn.addEventListener('click', () => {
             if (fileInput.files.length > 0) {
-                uploadFile(fileInput.files[0]);
             }
         });
-        function uploadFile(file) {
-            const formData = new FormData();
-            formData.append('file', file);
             progressContainer.style.display = 'block';
             loadingSpinner.style.display = 'block';
             uploadBtn.disabled = true;
             const xhr = new XMLHttpRequest();
             xhr.open('POST', '/upload', true);
-            xhr.upload.onprogress = updateProgress;
             xhr.onload = function() {
-                loadingSpinner.style.display = 'none';
-                uploadBtn.disabled = false;
                 if (xhr.status === 200) {
                     const response = JSON.parse(xhr.responseText);
                     if (response.url) {
-                        resultLink.href = response.url;
-                        resultLink.textContent = 'View Uploaded File';
-                        resultContainer.style.display = 'block';
                     } else {
                         alert('Upload failed: ' + response.error);
                     }
                 } else {
                     alert('Upload failed: ' + xhr.statusText);
                 }
-                resetUploadState();
             };
             xhr.onerror = function() {
-                loadingSpinner.style.display = 'none';
-                uploadBtn.disabled = false;
                 alert('Upload failed: Network error');
-                resetUploadState();
             };
             xhr.send(formData);
         }
-        function updateProgress(event) {
             if (event.lengthComputable) {
                 const percentComplete = (event.loaded / event.total) * 100;
-                progress.style.width = percentComplete + '%';
             }
         }
@@ -259,15 +308,45 @@ HTML_CONTENT = """
             fileInput.value = '';
             fileName.textContent = '';
             uploadBtn.style.display = 'none';
-            progressContainer.style.display = 'none';
-            progress.style.width = '0%';
         }
-        copyBtn.addEventListener('click', () => {
-            navigator.clipboard.writeText(resultLink.href).then(() => {
-                alert('Link copied to clipboard!');
-            });
-        });
     </script>
 </body>
 </html>

 from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
 import requests
 import time
+from typing import Dict, List
 app = FastAPI()
             justify-content: center;
             align-items: center;
             color: #e0e0e0;
+            overflow: hidden;
+        }
+        .background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: -1;
+        }
+        .dot {
+            position: absolute;
+            width: 2px;
+            height: 2px;
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
         }
         .container {
             background: rgba(255, 255, 255, 0.1);
             transition: all 0.3s ease;
         }
         .container:hover {
+            background: rgba(255, 255, 255, 0.2);
             transform: translateY(-5px);
             box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
         }
         h1 {
+            color: #ffffff;
             margin-bottom: 1.5rem;
             font-weight: 600;
         }
             display: none;
         }
         .btn {
+            background-color: #ffffff;
             color: #121212;
             padding: 12px 24px;
             border-radius: 5px;
             left: 50%;
             width: 5px;
             height: 5px;
+            background: rgba(0, 0, 0, 0.3);
             opacity: 0;
             border-radius: 100%;
             transform: scale(1, 1) translate(-50%);
             animation: ripple 1s ease-out;
         }
         .btn:hover {
+            background-color: #f0f0f0;
         }
         .btn:disabled {
             background-color: #555;
             background-color: #333;
             border-radius: 5px;
             overflow: hidden;
+            margin-bottom: 10px;
         }
         .progress {
             width: 0%;
             height: 100%;
+            background-color: #ffffff;
             transition: width 0.3s ease;
         }
         .loading-spinner {
             width: 40px;
             height: 40px;
             border: 4px solid #333;
+            border-top: 4px solid #ffffff;
             border-radius: 50%;
             animation: spin 1s linear infinite;
             margin: 20px auto;
             margin-top: 1.5rem;
         }
         .result-link {
+            color: #ffffff;
             text-decoration: none;
             font-weight: 600;
             transition: all 0.3s ease;
             margin-right: 10px;
         }
         .result-link:hover {
             text-decoration: underline;
         }
         .copy-btn {
     </style>
 </head>
 <body>
+    <div class="background" id="background"></div>
     <div class="container">
         <h1>Pro File Uploader</h1>
         <form id="uploadForm">
+            <input type="file" name="files" id="files" class="file-input" accept="*/*" required multiple>
+            <label for="files" class="btn">Choose Files</label>
             <div class="file-name" id="fileName"></div>
+            <button type="button" 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>
+        <div class="result-container" id="resultContainer"></div>
     </div>
     <script>
+        const fileInput = document.getElementById('files');
         const fileName = document.getElementById('fileName');
         const uploadBtn = document.getElementById('uploadBtn');
         const progressContainer = document.getElementById('progressContainer');
         const loadingSpinner = document.getElementById('loadingSpinner');
         const resultContainer = document.getElementById('resultContainer');
+        function createBackground() {
+            const background = document.getElementById('background');
+            for (let i = 0; i < 50; i++) {
+                const dot = document.createElement('div');
+                dot.className = 'dot';
+                dot.style.left = `${Math.random() * 100}%`;
+                dot.style.top = `${Math.random() * 100}%`;
+                dot.style.animationDuration = `${Math.random() * 3 + 2}s`;
+                dot.style.animationDelay = `${Math.random() * 2}s`;
+                background.appendChild(dot);
+            }
+        }
+        createBackground();
         fileInput.addEventListener('change', (e) => {
             if (e.target.files.length > 0) {
+                const fileNames = Array.from(e.target.files).map(file => file.name).join(', ');
+                fileName.textContent = fileNames;
                 uploadBtn.style.display = 'inline-block';
             }
         });
         uploadBtn.addEventListener('click', () => {
             if (fileInput.files.length > 0) {
+                uploadFiles(fileInput.files);
             }
         });
+        function uploadFiles(files) {
+            progressContainer.innerHTML = '';
             progressContainer.style.display = 'block';
             loadingSpinner.style.display = 'block';
             uploadBtn.disabled = true;
+            resultContainer.innerHTML = '';
+            resultContainer.style.display = 'none';
+            Array.from(files).forEach((file, index) => {
+                const progressBar = createProgressBar(file.name);
+                progressContainer.appendChild(progressBar);
+                uploadFile(file, progressBar, index);
+            });
+        }
+        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.onload = function() {
                 if (xhr.status === 200) {
                     const response = JSON.parse(xhr.responseText);
                     if (response.url) {
+                        addResultLink(response.url, file.name);
                     } else {
                         alert('Upload failed: ' + response.error);
                     }
                 } else {
                     alert('Upload failed: ' + xhr.statusText);
                 }
+                if (index === fileInput.files.length - 1) {
+                    resetUploadState();
+                }
             };
             xhr.onerror = function() {
                 alert('Upload failed: Network error');
+                if (index === fileInput.files.length - 1) {
+                    resetUploadState();
+                }
             };
             xhr.send(formData);
         }
+        function updateProgress(event, progressBar) {
             if (event.lengthComputable) {
                 const percentComplete = (event.loaded / event.total) * 100;
+                progressBar.style.width = percentComplete + '%';
             }
         }
             fileInput.value = '';
             fileName.textContent = '';
             uploadBtn.style.display = 'none';
+            uploadBtn.disabled = false;
+            loadingSpinner.style.display = 'none';
         }
+        function addResultLink(url, fileName) {
+            const linkContainer = document.createElement('div');
+            linkContainer.style.marginBottom = '10px';
+            const link = document.createElement('a');
+            link.href = url;
+            link.textContent = `View ${fileName}`;
+            link.className = 'result-link';
+            link.target = '_blank';
+            const copyBtn = document.createElement('button');
+            copyBtn.textContent = 'Copy Link';
+            copyBtn.className = 'copy-btn';
+            copyBtn.onclick = () => {
+                navigator.clipboard.writeText(url).then(() => {
+                    alert('Link copied to clipboard!');
+                });
+            };
+            linkContainer.appendChild(link);
+            linkContainer.appendChild(copyBtn);
+            resultContainer.appendChild(linkContainer);
+            resultContainer.style.display = 'block';
+        }
+        // Background animation
+        const background = document.getElementById('background');
+        function animateDots() {
+            const dots = background.getElementsByClassName('dot');
+            for (let dot of dots) {
+                dot.style.transform = `translateY(-100vh)`;
+            }
+        }
+        setInterval(animateDots, 5000);
+        animateDots();
     </script>
 </body>
 </html>