|
<!DOCTYPE html> |
|
<html lang="es"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>File Uploader</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<style> |
|
|
|
.custom-file-input { |
|
color: transparent; |
|
} |
|
.custom-file-input::-webkit-file-upload-button { |
|
visibility: hidden; |
|
} |
|
.custom-file-input::before { |
|
content: 'Select file'; |
|
color: white; |
|
display: inline-block; |
|
background: #1f2937; |
|
border: 1px solid #4b5563; |
|
padding: 0.5rem 1rem; |
|
outline: none; |
|
white-space: nowrap; |
|
cursor: pointer; |
|
font-weight: 700; |
|
font-size: 1rem; |
|
} |
|
.custom-file-input:hover::before { |
|
border-color: #9ca3af; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-900 text-white flex items-center justify-center min-h-screen"> |
|
<div class="bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col justify-center"> |
|
<h1 class="text-2xl text-center font-bold mb-4">Upload File</h1> |
|
<input type="file" class="block custom-file-input" id="fileInput"> |
|
<p id="fileName" class="mt-3"></p> |
|
</div> |
|
|
|
<script> |
|
const fileInput = document.getElementById('fileInput'); |
|
const fileName = document.getElementById('fileName'); |
|
|
|
fileInput.addEventListener('change', (event) => { |
|
const files = event.target.files; |
|
if (files.length > 0) { |
|
fileName.textContent = `Selected file: ${files[0].name}`; |
|
} else { |
|
fileName.textContent = ''; |
|
} |
|
}); |
|
</script> |
|
</body> |
|
</html> |
