Hugging Face's logo

Spaces:
coollsd
/
fileuploader
Running

App Files Community
1
coollsd commited on
Commit
b61b351
·
verified ·
1 Parent(s): 586f783

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +110 -6
app.py CHANGED
@@ -13,14 +13,118 @@ HTML_CONTENT = """
13
  <head>
14
  <meta charset="UTF-8">
15
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
16
- <title>File Upload</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  </head>
18
  <body>
19
- <h1>Upload File</h1>
20
- <form action="/upload" method="post" enctype="multipart/form-data">
21
- <input type="file" name="file" accept="*/*" required>
22
- <button type="submit">Upload</button>
23
- </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  </body>
25
  </html>
26
  """
 
13
  <head>
14
  <meta charset="UTF-8">
15
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
16
+ <title>Pro File Uploader</title>
17
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
18
+ <style>
19
+ body {
20
+ font-family: 'Roboto', sans-serif;
21
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
22
+ height: 100vh;
23
+ margin: 0;
24
+ display: flex;
25
+ justify-content: center;
26
+ align-items: center;
27
+ }
28
+ .container {
29
+ background: rgba(255, 255, 255, 0.9);
30
+ padding: 2rem;
31
+ border-radius: 10px;
32
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
33
+ text-align: center;
34
+ max-width: 400px;
35
+ width: 100%;
36
+ }
37
+ h1 {
38
+ color: #4a4a4a;
39
+ margin-bottom: 1.5rem;
40
+ }
41
+ .file-input {
42
+ display: none;
43
+ }
44
+ .file-label {
45
+ background-color: #3498db;
46
+ color: white;
47
+ padding: 10px 20px;
48
+ border-radius: 5px;
49
+ cursor: pointer;
50
+ transition: background-color 0.3s ease;
51
+ }
52
+ .file-label:hover {
53
+ background-color: #2980b9;
54
+ }
55
+ .file-name {
56
+ margin-top: 1rem;
57
+ font-size: 0.9rem;
58
+ color: #666;
59
+ }
60
+ .progress-bar {
61
+ width: 100%;
62
+ height: 10px;
63
+ background-color: #e0e0e0;
64
+ border-radius: 5px;
65
+ margin-top: 1rem;
66
+ overflow: hidden;
67
+ display: none;
68
+ }
69
+ .progress {
70
+ width: 0%;
71
+ height: 100%;
72
+ background-color: #2ecc71;
73
+ transition: width 0.5s ease;
74
+ }
75
+ @keyframes pulse {
76
+ 0% { transform: scale(1); }
77
+ 50% { transform: scale(1.05); }
78
+ 100% { transform: scale(1); }
79
+ }
80
+ .pulse {
81
+ animation: pulse 2s infinite;
82
+ }
83
+ </style>
84
  </head>
85
  <body>
86
+ <div class="container">
87
+ <h1>Pro File Uploader</h1>
88
+ <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
89
+ <input type="file" name="file" id="file" class="file-input" accept="*/*" required>
90
+ <label for="file" class="file-label">Choose File</label>
91
+ <div class="file-name" id="fileName"></div>
92
+ <div class="progress-bar" id="progressBar">
93
+ <div class="progress" id="progress"></div>
94
+ </div>
95
+ </form>
96
+ </div>
97
+
98
+ <script>
99
+ const fileInput = document.getElementById('file');
100
+ const fileName = document.getElementById('fileName');
101
+ const uploadForm = document.getElementById('uploadForm');
102
+ const progressBar = document.getElementById('progressBar');
103
+ const progress = document.getElementById('progress');
104
+
105
+ fileInput.addEventListener('change', (e) => {
106
+ if (e.target.files.length > 0) {
107
+ fileName.textContent = e.target.files[0].name;
108
+ uploadForm.submit();
109
+ showProgress();
110
+ }
111
+ });
112
+
113
+ function showProgress() {
114
+ progressBar.style.display = 'block';
115
+ let width = 0;
116
+ const interval = setInterval(() => {
117
+ if (width >= 100) {
118
+ clearInterval(interval);
119
+ } else {
120
+ width++;
121
+ progress.style.width = width + '%';
122
+ }
123
+ }, 20);
124
+ }
125
+
126
+ document.querySelector('.file-label').classList.add('pulse');
127
+ </script>
128
  </body>
129
  </html>
130
  """