Spaces:
Running
Running
Update app.py
Browse files
app.py
CHANGED
@@ -27,11 +27,11 @@ HTML_CONTENT = """
|
|
27 |
}
|
28 |
.container {
|
29 |
background: rgba(255, 255, 255, 0.95);
|
30 |
-
padding:
|
31 |
border-radius: 20px;
|
32 |
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
33 |
text-align: center;
|
34 |
-
max-width:
|
35 |
width: 100%;
|
36 |
transition: all 0.3s ease;
|
37 |
}
|
@@ -47,7 +47,7 @@ HTML_CONTENT = """
|
|
47 |
.file-input {
|
48 |
display: none;
|
49 |
}
|
50 |
-
.
|
51 |
background-color: #20B2AA;
|
52 |
color: white;
|
53 |
padding: 12px 24px;
|
@@ -56,11 +56,17 @@ HTML_CONTENT = """
|
|
56 |
transition: all 0.3s ease;
|
57 |
display: inline-block;
|
58 |
font-weight: 600;
|
|
|
|
|
59 |
}
|
60 |
-
.
|
61 |
background-color: #48D1CC;
|
62 |
transform: scale(1.05);
|
63 |
}
|
|
|
|
|
|
|
|
|
64 |
.file-name {
|
65 |
margin-top: 1rem;
|
66 |
font-size: 0.9rem;
|
@@ -97,27 +103,43 @@ HTML_CONTENT = """
|
|
97 |
0% { transform: rotate(0deg); }
|
98 |
100% { transform: rotate(360deg); }
|
99 |
}
|
100 |
-
.result-
|
101 |
display: none;
|
102 |
-
margin-top:
|
|
|
|
|
103 |
color: #20B2AA;
|
104 |
text-decoration: none;
|
105 |
font-weight: 600;
|
106 |
transition: all 0.3s ease;
|
|
|
107 |
}
|
108 |
.result-link:hover {
|
109 |
color: #48D1CC;
|
110 |
text-decoration: underline;
|
111 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
112 |
</style>
|
113 |
</head>
|
114 |
<body>
|
115 |
<div class="container">
|
116 |
<h1>Pro File Uploader</h1>
|
117 |
-
<form id="uploadForm"
|
118 |
<input type="file" name="file" id="file" class="file-input" accept="*/*" required>
|
119 |
-
<label for="file" class="
|
120 |
<div class="file-name" id="fileName"></div>
|
|
|
121 |
<div class="progress-container" id="progressContainer">
|
122 |
<div class="progress-bar">
|
123 |
<div class="progress" id="progress"></div>
|
@@ -125,22 +147,33 @@ HTML_CONTENT = """
|
|
125 |
</div>
|
126 |
<div class="loading-spinner" id="loadingSpinner"></div>
|
127 |
</form>
|
128 |
-
<
|
|
|
|
|
|
|
129 |
</div>
|
130 |
|
131 |
<script>
|
132 |
const fileInput = document.getElementById('file');
|
133 |
const fileName = document.getElementById('fileName');
|
134 |
-
const
|
135 |
const progressContainer = document.getElementById('progressContainer');
|
136 |
const progress = document.getElementById('progress');
|
137 |
const loadingSpinner = document.getElementById('loadingSpinner');
|
|
|
138 |
const resultLink = document.getElementById('resultLink');
|
|
|
139 |
|
140 |
fileInput.addEventListener('change', (e) => {
|
141 |
if (e.target.files.length > 0) {
|
142 |
fileName.textContent = e.target.files[0].name;
|
143 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
144 |
}
|
145 |
});
|
146 |
|
@@ -150,6 +183,7 @@ HTML_CONTENT = """
|
|
150 |
|
151 |
progressContainer.style.display = 'block';
|
152 |
loadingSpinner.style.display = 'block';
|
|
|
153 |
|
154 |
fetch('/upload', {
|
155 |
method: 'POST',
|
@@ -158,17 +192,18 @@ HTML_CONTENT = """
|
|
158 |
.then(response => response.json())
|
159 |
.then(data => {
|
160 |
loadingSpinner.style.display = 'none';
|
|
|
161 |
if (data.url) {
|
162 |
resultLink.href = data.url;
|
163 |
resultLink.textContent = 'View Uploaded File';
|
164 |
-
|
165 |
} else {
|
166 |
-
resultLink.style.display = 'none';
|
167 |
alert('Upload failed: ' + data.error);
|
168 |
}
|
169 |
})
|
170 |
.catch(error => {
|
171 |
loadingSpinner.style.display = 'none';
|
|
|
172 |
alert('Upload failed: ' + error);
|
173 |
});
|
174 |
|
@@ -186,6 +221,12 @@ HTML_CONTENT = """
|
|
186 |
}
|
187 |
}, 50);
|
188 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
189 |
</script>
|
190 |
</body>
|
191 |
</html>
|
|
|
27 |
}
|
28 |
.container {
|
29 |
background: rgba(255, 255, 255, 0.95);
|
30 |
+
padding: 2.5rem;
|
31 |
border-radius: 20px;
|
32 |
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
33 |
text-align: center;
|
34 |
+
max-width: 450px;
|
35 |
width: 100%;
|
36 |
transition: all 0.3s ease;
|
37 |
}
|
|
|
47 |
.file-input {
|
48 |
display: none;
|
49 |
}
|
50 |
+
.btn {
|
51 |
background-color: #20B2AA;
|
52 |
color: white;
|
53 |
padding: 12px 24px;
|
|
|
56 |
transition: all 0.3s ease;
|
57 |
display: inline-block;
|
58 |
font-weight: 600;
|
59 |
+
border: none;
|
60 |
+
font-size: 1rem;
|
61 |
}
|
62 |
+
.btn:hover {
|
63 |
background-color: #48D1CC;
|
64 |
transform: scale(1.05);
|
65 |
}
|
66 |
+
.btn:disabled {
|
67 |
+
background-color: #ccc;
|
68 |
+
cursor: not-allowed;
|
69 |
+
}
|
70 |
.file-name {
|
71 |
margin-top: 1rem;
|
72 |
font-size: 0.9rem;
|
|
|
103 |
0% { transform: rotate(0deg); }
|
104 |
100% { transform: rotate(360deg); }
|
105 |
}
|
106 |
+
.result-container {
|
107 |
display: none;
|
108 |
+
margin-top: 1.5rem;
|
109 |
+
}
|
110 |
+
.result-link {
|
111 |
color: #20B2AA;
|
112 |
text-decoration: none;
|
113 |
font-weight: 600;
|
114 |
transition: all 0.3s ease;
|
115 |
+
margin-right: 10px;
|
116 |
}
|
117 |
.result-link:hover {
|
118 |
color: #48D1CC;
|
119 |
text-decoration: underline;
|
120 |
}
|
121 |
+
.copy-btn {
|
122 |
+
background-color: #f0f0f0;
|
123 |
+
color: #333;
|
124 |
+
border: none;
|
125 |
+
padding: 5px 10px;
|
126 |
+
border-radius: 5px;
|
127 |
+
cursor: pointer;
|
128 |
+
transition: all 0.3s ease;
|
129 |
+
}
|
130 |
+
.copy-btn:hover {
|
131 |
+
background-color: #e0e0e0;
|
132 |
+
}
|
133 |
</style>
|
134 |
</head>
|
135 |
<body>
|
136 |
<div class="container">
|
137 |
<h1>Pro File Uploader</h1>
|
138 |
+
<form id="uploadForm">
|
139 |
<input type="file" name="file" id="file" class="file-input" accept="*/*" required>
|
140 |
+
<label for="file" class="btn">Choose File</label>
|
141 |
<div class="file-name" id="fileName"></div>
|
142 |
+
<button type="button" id="uploadBtn" class="btn" style="display: none; margin-top: 1rem;">Upload File</button>
|
143 |
<div class="progress-container" id="progressContainer">
|
144 |
<div class="progress-bar">
|
145 |
<div class="progress" id="progress"></div>
|
|
|
147 |
</div>
|
148 |
<div class="loading-spinner" id="loadingSpinner"></div>
|
149 |
</form>
|
150 |
+
<div class="result-container" id="resultContainer">
|
151 |
+
<a href="#" class="result-link" id="resultLink" target="_blank">View Uploaded File</a>
|
152 |
+
<button class="copy-btn" id="copyBtn">Copy Link</button>
|
153 |
+
</div>
|
154 |
</div>
|
155 |
|
156 |
<script>
|
157 |
const fileInput = document.getElementById('file');
|
158 |
const fileName = document.getElementById('fileName');
|
159 |
+
const uploadBtn = document.getElementById('uploadBtn');
|
160 |
const progressContainer = document.getElementById('progressContainer');
|
161 |
const progress = document.getElementById('progress');
|
162 |
const loadingSpinner = document.getElementById('loadingSpinner');
|
163 |
+
const resultContainer = document.getElementById('resultContainer');
|
164 |
const resultLink = document.getElementById('resultLink');
|
165 |
+
const copyBtn = document.getElementById('copyBtn');
|
166 |
|
167 |
fileInput.addEventListener('change', (e) => {
|
168 |
if (e.target.files.length > 0) {
|
169 |
fileName.textContent = e.target.files[0].name;
|
170 |
+
uploadBtn.style.display = 'inline-block';
|
171 |
+
}
|
172 |
+
});
|
173 |
+
|
174 |
+
uploadBtn.addEventListener('click', () => {
|
175 |
+
if (fileInput.files.length > 0) {
|
176 |
+
uploadFile(fileInput.files[0]);
|
177 |
}
|
178 |
});
|
179 |
|
|
|
183 |
|
184 |
progressContainer.style.display = 'block';
|
185 |
loadingSpinner.style.display = 'block';
|
186 |
+
uploadBtn.disabled = true;
|
187 |
|
188 |
fetch('/upload', {
|
189 |
method: 'POST',
|
|
|
192 |
.then(response => response.json())
|
193 |
.then(data => {
|
194 |
loadingSpinner.style.display = 'none';
|
195 |
+
uploadBtn.disabled = false;
|
196 |
if (data.url) {
|
197 |
resultLink.href = data.url;
|
198 |
resultLink.textContent = 'View Uploaded File';
|
199 |
+
resultContainer.style.display = 'block';
|
200 |
} else {
|
|
|
201 |
alert('Upload failed: ' + data.error);
|
202 |
}
|
203 |
})
|
204 |
.catch(error => {
|
205 |
loadingSpinner.style.display = 'none';
|
206 |
+
uploadBtn.disabled = false;
|
207 |
alert('Upload failed: ' + error);
|
208 |
});
|
209 |
|
|
|
221 |
}
|
222 |
}, 50);
|
223 |
}
|
224 |
+
|
225 |
+
copyBtn.addEventListener('click', () => {
|
226 |
+
navigator.clipboard.writeText(resultLink.href).then(() => {
|
227 |
+
alert('Link copied to clipboard!');
|
228 |
+
});
|
229 |
+
});
|
230 |
</script>
|
231 |
</body>
|
232 |
</html>
|