| | <!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> |
