Spaces:

coollsd
/

fileuploader

Paused

App Files Files Community

coollsd commited on Sep 17, 2024

Commit

46a986e

verified ·

1 Parent(s): 2b158ec

Update app.py

Browse files

Files changed (1) hide show

app.py +54 -13

app.py CHANGED Viewed

@@ -27,11 +27,11 @@ HTML_CONTENT = """
         }
         .container {
             background: rgba(255, 255, 255, 0.95);
-            padding: 2rem;
             border-radius: 20px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
             text-align: center;
-            max-width: 400px;
             width: 100%;
             transition: all 0.3s ease;
         }
@@ -47,7 +47,7 @@ HTML_CONTENT = """
         .file-input {
             display: none;
         }
-        .file-label {
             background-color: #20B2AA;
             color: white;
             padding: 12px 24px;
@@ -56,11 +56,17 @@ HTML_CONTENT = """
             transition: all 0.3s ease;
             display: inline-block;
             font-weight: 600;
         }
-        .file-label:hover {
             background-color: #48D1CC;
             transform: scale(1.05);
         }
         .file-name {
             margin-top: 1rem;
             font-size: 0.9rem;
@@ -97,27 +103,43 @@ HTML_CONTENT = """
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-        .result-link {
             display: none;
-            margin-top: 1rem;
             color: #20B2AA;
             text-decoration: none;
             font-weight: 600;
             transition: all 0.3s ease;
         }
         .result-link:hover {
             color: #48D1CC;
             text-decoration: underline;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>Pro File Uploader</h1>
-        <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
             <input type="file" name="file" id="file" class="file-input" accept="*/*" required>
-            <label for="file" class="file-label">Choose File</label>
             <div class="file-name" id="fileName"></div>
             <div class="progress-container" id="progressContainer">
                 <div class="progress-bar">
                     <div class="progress" id="progress"></div>
@@ -125,22 +147,33 @@ HTML_CONTENT = """
             </div>
             <div class="loading-spinner" id="loadingSpinner"></div>
         </form>
-        <a href="#" class="result-link" id="resultLink" target="_blank">View Uploaded File</a>
     </div>
     <script>
         const fileInput = document.getElementById('file');
         const fileName = document.getElementById('fileName');
-        const uploadForm = document.getElementById('uploadForm');
         const progressContainer = document.getElementById('progressContainer');
         const progress = document.getElementById('progress');
         const loadingSpinner = document.getElementById('loadingSpinner');
         const resultLink = document.getElementById('resultLink');
         fileInput.addEventListener('change', (e) => {
             if (e.target.files.length > 0) {
                 fileName.textContent = e.target.files[0].name;
-                uploadFile(e.target.files[0]);
             }
         });
@@ -150,6 +183,7 @@ HTML_CONTENT = """
             progressContainer.style.display = 'block';
             loadingSpinner.style.display = 'block';
             fetch('/upload', {
                 method: 'POST',
@@ -158,17 +192,18 @@ HTML_CONTENT = """
             .then(response => response.json())
             .then(data => {
                 loadingSpinner.style.display = 'none';
                 if (data.url) {
                     resultLink.href = data.url;
                     resultLink.textContent = 'View Uploaded File';
-                    resultLink.style.display = 'inline-block';
                 } else {
-                    resultLink.style.display = 'none';
                     alert('Upload failed: ' + data.error);
                 }
             })
             .catch(error => {
                 loadingSpinner.style.display = 'none';
                 alert('Upload failed: ' + error);
             });
@@ -186,6 +221,12 @@ HTML_CONTENT = """
                 }
             }, 50);
         }
     </script>
 </body>
 </html>

         }
         .container {
             background: rgba(255, 255, 255, 0.95);
+            padding: 2.5rem;
             border-radius: 20px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
             text-align: center;
+            max-width: 450px;
             width: 100%;
             transition: all 0.3s ease;
         }
         .file-input {
             display: none;
         }
+        .btn {
             background-color: #20B2AA;
             color: white;
             padding: 12px 24px;
             transition: all 0.3s ease;
             display: inline-block;
             font-weight: 600;
+            border: none;
+            font-size: 1rem;
         }
+        .btn:hover {
             background-color: #48D1CC;
             transform: scale(1.05);
         }
+        .btn:disabled {
+            background-color: #ccc;
+            cursor: not-allowed;
+        }
         .file-name {
             margin-top: 1rem;
             font-size: 0.9rem;
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
+        .result-container {
             display: none;
+            margin-top: 1.5rem;
+        }
+        .result-link {
             color: #20B2AA;
             text-decoration: none;
             font-weight: 600;
             transition: all 0.3s ease;
+            margin-right: 10px;
         }
         .result-link:hover {
             color: #48D1CC;
             text-decoration: underline;
         }
+        .copy-btn {
+            background-color: #f0f0f0;
+            color: #333;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .copy-btn:hover {
+            background-color: #e0e0e0;
+        }
     </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 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]);
             }
         });
             progressContainer.style.display = 'block';
             loadingSpinner.style.display = 'block';
+            uploadBtn.disabled = true;
             fetch('/upload', {
                 method: 'POST',
             .then(response => response.json())
             .then(data => {
                 loadingSpinner.style.display = 'none';
+                uploadBtn.disabled = false;
                 if (data.url) {
                     resultLink.href = data.url;
                     resultLink.textContent = 'View Uploaded File';
+                    resultContainer.style.display = 'block';
                 } else {
                     alert('Upload failed: ' + data.error);
                 }
             })
             .catch(error => {
                 loadingSpinner.style.display = 'none';
+                uploadBtn.disabled = false;
                 alert('Upload failed: ' + error);
             });
                 }
             }, 50);
         }
+        copyBtn.addEventListener('click', () => {
+            navigator.clipboard.writeText(resultLink.href).then(() => {
+                alert('Link copied to clipboard!');
+            });
+        });
     </script>
 </body>
 </html>