Hugging Face's logo

Spaces:
coollsd
/
fileuploader
Running

App Files Community
coollsd commited on
Commit
64af3b9
•
1 Parent(s): 8ea5abe

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +12 -47
app.py CHANGED
@@ -2,7 +2,7 @@ from fastapi import FastAPI, File, UploadFile, Request
2
  from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
3
  import requests
4
  import time
5
- from typing import Dict, List
6
 
7
  app = FastAPI()
8
 
@@ -24,28 +24,12 @@ HTML_CONTENT = """
24
  justify-content: center;
25
  align-items: center;
26
  color: #e0e0e0;
27
- overflow: hidden;
28
- }
29
- .background {
30
- position: fixed;
31
- top: 0;
32
- left: 0;
33
- right: 0;
34
- bottom: 0;
35
- z-index: -1;
36
- }
37
- .dot {
38
- position: absolute;
39
- width: 2px;
40
- height: 2px;
41
- background: rgba(255, 255, 255, 0.3);
42
- border-radius: 50%;
43
  }
44
  .container {
45
  background: rgba(255, 255, 255, 0.1);
46
  padding: 2.5rem;
47
  border-radius: 15px;
48
- box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
49
  backdrop-filter: blur(4px);
50
  border: 1px solid rgba(255, 255, 255, 0.18);
51
  text-align: center;
@@ -56,7 +40,7 @@ HTML_CONTENT = """
56
  .container:hover {
57
  background: rgba(255, 255, 255, 0.2);
58
  transform: translateY(-5px);
59
- box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
60
  }
61
  h1 {
62
  color: #ffffff;
@@ -181,14 +165,18 @@ HTML_CONTENT = """
181
  .copy-btn:hover {
182
  background-color: #444;
183
  }
 
 
 
 
 
184
  </style>
185
  </head>
186
  <body>
187
- <div class="background" id="background"></div>
188
  <div class="container">
189
  <h1>Pro File Uploader</h1>
190
  <form id="uploadForm">
191
- <input type="file" name="files" id="files" class="file-input" accept="*/*" required multiple>
192
  <label for="files" class="btn">Choose Files</label>
193
  <div class="file-name" id="fileName"></div>
194
  <button type="button" id="uploadBtn" class="btn" style="display: none; margin-top: 1rem;">Upload Files</button>
@@ -196,6 +184,9 @@ HTML_CONTENT = """
196
  <div class="loading-spinner" id="loadingSpinner"></div>
197
  </form>
198
  <div class="result-container" id="resultContainer"></div>
 
 
 
199
  </div>
200
 
201
  <script>
@@ -206,21 +197,6 @@ HTML_CONTENT = """
206
  const loadingSpinner = document.getElementById('loadingSpinner');
207
  const resultContainer = document.getElementById('resultContainer');
208
 
209
- function createBackground() {
210
- const background = document.getElementById('background');
211
- for (let i = 0; i < 50; i++) {
212
- const dot = document.createElement('div');
213
- dot.className = 'dot';
214
- dot.style.left = `${Math.random() * 100}%`;
215
- dot.style.top = `${Math.random() * 100}%`;
216
- dot.style.animationDuration = `${Math.random() * 3 + 2}s`;
217
- dot.style.animationDelay = `${Math.random() * 2}s`;
218
- background.appendChild(dot);
219
- }
220
- }
221
-
222
- createBackground();
223
-
224
  fileInput.addEventListener('change', (e) => {
225
  if (e.target.files.length > 0) {
226
  const fileNames = Array.from(e.target.files).map(file => file.name).join(', ');
@@ -336,17 +312,6 @@ HTML_CONTENT = """
336
  resultContainer.appendChild(linkContainer);
337
  resultContainer.style.display = 'block';
338
  }
339
-
340
- // Background animation
341
- const background = document.getElementById('background');
342
- function animateDots() {
343
- const dots = background.getElementsByClassName('dot');
344
- for (let dot of dots) {
345
- dot.style.transform = `translateY(-100vh)`;
346
- }
347
- }
348
- setInterval(animateDots, 5000);
349
- animateDots();
350
  </script>
351
  </body>
352
  </html>
 
2
  from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
3
  import requests
4
  import time
5
+ from typing import Dict
6
 
7
  app = FastAPI()
8
 
 
24
  justify-content: center;
25
  align-items: center;
26
  color: #e0e0e0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  }
28
  .container {
29
  background: rgba(255, 255, 255, 0.1);
30
  padding: 2.5rem;
31
  border-radius: 15px;
32
+ box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
33
  backdrop-filter: blur(4px);
34
  border: 1px solid rgba(255, 255, 255, 0.18);
35
  text-align: center;
 
40
  .container:hover {
41
  background: rgba(255, 255, 255, 0.2);
42
  transform: translateY(-5px);
43
+ box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
44
  }
45
  h1 {
46
  color: #ffffff;
 
165
  .copy-btn:hover {
166
  background-color: #444;
167
  }
168
+ .file-types {
169
+ margin-top: 2rem;
170
+ font-size: 0.8rem;
171
+ color: #aaa;
172
+ }
173
  </style>
174
  </head>
175
  <body>
 
176
  <div class="container">
177
  <h1>Pro File Uploader</h1>
178
  <form id="uploadForm">
179
+ <input type="file" name="files" id="files" class="file-input" accept=".zip,.txt,.mp4,.mp3,image/*,.pdf" required multiple>
180
  <label for="files" class="btn">Choose Files</label>
181
  <div class="file-name" id="fileName"></div>
182
  <button type="button" id="uploadBtn" class="btn" style="display: none; margin-top: 1rem;">Upload Files</button>
 
184
  <div class="loading-spinner" id="loadingSpinner"></div>
185
  </form>
186
  <div class="result-container" id="resultContainer"></div>
187
+ <div class="file-types">
188
+ Allowed file types: .zip, .mp4, .mp3, all image types, .pdf
189
+ </div>
190
  </div>
191
 
192
  <script>
 
197
  const loadingSpinner = document.getElementById('loadingSpinner');
198
  const resultContainer = document.getElementById('resultContainer');
199
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
200
  fileInput.addEventListener('change', (e) => {
201
  if (e.target.files.length > 0) {
202
  const fileNames = Array.from(e.target.files).map(file => file.name).join(', ');
 
312
  resultContainer.appendChild(linkContainer);
313
  resultContainer.style.display = 'block';
314
  }
 
 
 
 
 
 
 
 
 
 
 
315
  </script>
316
  </body>
317
  </html>