File size: 1,617 Bytes
6992e29 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!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>
/* Estilo personalizado si es necesario */
.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> |