|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
<title>File Uploader</title> |
|
<link |
|
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" |
|
rel="stylesheet" |
|
/> |
|
<style> |
|
body { |
|
background-color: #1c1c1e; |
|
font-family: "Poppins", sans-serif; |
|
color: #f5f5f7; |
|
} |
|
h1 { |
|
color: #e5e5e7; |
|
text-align: center; |
|
margin-bottom: 20px; |
|
} |
|
.container { |
|
margin-top: 50px; |
|
} |
|
.file-upload-section { |
|
background-color: #2c2c2e; |
|
padding: 30px; |
|
border-radius: 15px; |
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); |
|
text-align: center; |
|
} |
|
.file-upload-section input[type="file"] { |
|
margin: 20px 0; |
|
} |
|
.file-upload-section input[type="submit"] { |
|
background-color: #ff9f0a; |
|
color: white; |
|
border: none; |
|
padding: 10px 20px; |
|
border-radius: 5px; |
|
transition: background-color 0.3s ease; |
|
} |
|
.file-upload-section input[type="submit"]:hover { |
|
background-color: #e68a00; |
|
} |
|
.file-actions a { |
|
margin: 0 10px; |
|
text-decoration: none; |
|
color: #ff9f0a; |
|
} |
|
.file-actions a:hover { |
|
color: #e68a00; |
|
} |
|
.flash-message { |
|
margin-bottom: 20px; |
|
padding: 15px; |
|
border-radius: 5px; |
|
color: #333; |
|
} |
|
.alert { |
|
text-align: center; |
|
position: absolute; |
|
top: 0; |
|
right: 15%; |
|
} |
|
|
|
.loader { |
|
border: 8px solid #f3f3f3; |
|
border-top: 8px solid #ff9f0a; |
|
border-radius: 50%; |
|
width: 60px; |
|
height: 60px; |
|
animation: spin 2s linear infinite; |
|
margin: 20px auto; |
|
display: none; |
|
} |
|
@keyframes spin { |
|
0% { transform: rotate(0deg); } |
|
100% { transform: rotate(360deg); } |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<h1>Upload File</h1> |
|
|
|
<div class="file-upload-section"> |
|
|
|
|
|
<form |
|
id="fileUploadForm" |
|
action="{{ url_for('upload_and_process') }}" |
|
method="POST" |
|
enctype="multipart/form-data" |
|
> |
|
<input type="file" name="file" class="form-control" required /> |
|
<input type="submit" value="Upload" class="btn btn-outline-primary" /> |
|
</form> |
|
|
|
{% if session.get('uploaded_file') %} |
|
<p class="mt-4"> |
|
Uploaded: |
|
<span class="text-danger">{{ session.get('uploaded_file') }}</span> |
|
</p> |
|
<div class="file-actions"> |
|
<form action="{{ url_for('remove_file') }}" method="post"> |
|
<button type="submit" class="btn btn-outline-danger"> |
|
<i class="bi bi-trash"></i> Remove Uploaded File |
|
</button> |
|
</form> |
|
</div> |
|
{% endif %} |
|
</div> |
|
|
|
<div class="container"> |
|
|
|
<div class="loader" id="loader"></div> |
|
</div> |
|
|
|
{% with messages = get_flashed_messages() %} {% if messages %} |
|
<div class="alert alert-success mt-4" id="flash-message"> |
|
{{ messages[0] }} |
|
</div> |
|
{% endif %} {% endwith %} |
|
</div> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> |
|
<script> |
|
|
|
document.getElementById('fileUploadForm').onsubmit = function() { |
|
document.getElementById('loader').style.display = 'block'; |
|
}; |
|
|
|
|
|
setTimeout(function () { |
|
let flashMessage = document.getElementById("flash-message"); |
|
if (flashMessage) { |
|
flashMessage.style.transition = "opacity 1s ease"; |
|
flashMessage.style.opacity = 0; |
|
setTimeout(() => flashMessage.remove(), 1000); |
|
} |
|
}, 3000); |
|
</script> |
|
</body> |
|
</html> |
|
|
