|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>File Upload and Process</title>
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
|
<style>
|
|
body {
|
|
background-color: #1d2329;
|
|
color: #e0e0e0;
|
|
font-family: 'Arial', sans-serif;
|
|
}
|
|
|
|
.container {
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.card {
|
|
background-color: #2a2f36;
|
|
border: none;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.card-header {
|
|
background-color: #3a4149;
|
|
color: white;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
|
|
.btn-primary,
|
|
.btn-success,
|
|
.btn-info {
|
|
border-radius: 50px;
|
|
padding: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #007bff;
|
|
border: none;
|
|
}
|
|
|
|
.btn-success {
|
|
background-color: #28a745;
|
|
border: none;
|
|
}
|
|
|
|
.btn-info {
|
|
background-color: #17a2b8;
|
|
border: none;
|
|
}
|
|
|
|
.uploaded-file {
|
|
margin-top: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.uploaded-file span {
|
|
font-size: 16px;
|
|
margin-left: 10px;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.remove-file {
|
|
cursor: pointer;
|
|
color: #dc3545;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.form-control-file {
|
|
border-radius: 50px;
|
|
border: 2px solid #4e5d6c;
|
|
padding: 10px;
|
|
background-color: #3a4149;
|
|
color: #e0e0e0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.form-control {
|
|
border-radius: 50px;
|
|
background-color: #3a4149;
|
|
color: #e0e0e0;
|
|
border: 2px solid #4e5d6c;
|
|
}
|
|
|
|
.mt-3 {
|
|
margin-top: 20px !important;
|
|
}
|
|
|
|
.card-footer {
|
|
text-align: center;
|
|
border-top: 1px solid #4e5d6c;
|
|
padding: 15px;
|
|
}
|
|
|
|
.custom-file-upload {
|
|
border: 1px solid #4e5d6c;
|
|
display: inline-block;
|
|
padding: 6px 12px;
|
|
cursor: pointer;
|
|
border-radius: 50px;
|
|
background-color: #3a4149;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.custom-file-upload input[type="file"] {
|
|
display: none;
|
|
}
|
|
|
|
.form-group {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#loadingSpinner {
|
|
display: none;
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header text-center">
|
|
<h2>Upload and Process Files</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="uploadForm" action="{{ url_for('upload_file') }}" method="post"
|
|
enctype="multipart/form-data">
|
|
<h4 class="text-center">Upload Images</h4>
|
|
<input type="file" name="files" multiple class="form-control-file" required>
|
|
<button type="submit" class="btn btn-primary mt-3">Upload</button>
|
|
</form>
|
|
|
|
{% if uploaded_files %}
|
|
<h4 class="mt-4">Uploaded Files:</h4>
|
|
<ul class="list-group">
|
|
{% for file in uploaded_files %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center"
|
|
style="background-color: #3a4149; color: #e0e0e0;">
|
|
{{ file }}
|
|
<a href="/remove_file" class="remove-file" title="Remove File">×</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
|
|
<form id="processForm" method="post" action="/process" class="mt-3">
|
|
<button id="processBtn" type="submit" class="btn btn-success">Process All Files</button>
|
|
</form>
|
|
|
|
<div id="loadingSpinner" class="text-center">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="sr-only">Processing...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<small>© 2024 | Webashalar Pvt. Ltd.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
|
|
<script>
|
|
document.getElementById("processForm").addEventListener("submit", function(event) {
|
|
document.getElementById("loadingSpinner").style.display = "block";
|
|
document.getElementById("processBtn").style.display = "none";
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
|
