Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>IseaUploads</title> | |
| <link rel="stylesheet" href="/styles.css"> | |
| </head> | |
| <body> | |
| <h1>IseaUploads</h1> | |
| <p>Sin límites, veloz y eficaz.</p> | |
| <!-- Formulario para subir archivos --> | |
| <form id="uploadForm" enctype="multipart/form-data"> | |
| <!-- Nueva etiqueta label que actúa como botón --> | |
| <label for="fileInput" class="custom-file-upload"> | |
| Seleccionar archivo | |
| </label> | |
| <!-- Input file escondido --> | |
| <input type="file" id="fileInput" name="file"> | |
| <button type="submit">Subir archivo</button> | |
| </form> | |
| <!-- Barra de progreso --> | |
| <div id="progressContainer" style="display: none;"> | |
| <progress id="progressBar" value="0" max="100"></progress> | |
| <span id="progressText">0%</span> | |
| </div> | |
| <!-- Mensaje de éxito y enlace de descarga --> | |
| <div id="successMessage" style="display: none;"> | |
| <p>Archivo subido con éxito. Puedes descargarlo <a id="downloadLink" href="#">aquí</a>.</p> | |
| </div> | |
| <script> | |
| const uploadForm = document.getElementById('uploadForm'); | |
| const progressContainer = document.getElementById('progressContainer'); | |
| const progressBar = document.getElementById('progressBar'); | |
| const progressText = document.getElementById('progressText'); | |
| const successMessage = document.getElementById('successMessage'); | |
| const downloadLink = document.getElementById('downloadLink'); | |
| uploadForm.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const formData = new FormData(uploadForm); | |
| const file = document.getElementById('fileInput').files[0]; | |
| if (!file) { | |
| alert("Por favor, seleccione un archivo para subir."); | |
| return; | |
| } | |
| progressContainer.style.display = 'block'; | |
| successMessage.style.display = 'none'; | |
| const xhr = new XMLHttpRequest(); | |
| xhr.open('POST', '/upload', true); | |
| xhr.upload.onprogress = (event) => { | |
| if (event.lengthComputable) { | |
| const percentComplete = Math.round((event.loaded / event.total) * 100); | |
| progressBar.value = percentComplete; | |
| progressText.textContent = `${percentComplete}% (${(event.loaded / 1024 / 1024).toFixed(2)} MB / ${(event.total / 1024 / 1024).toFixed(2)} MB)`; | |
| } | |
| }; | |
| xhr.onload = () => { | |
| if (xhr.status === 200) { | |
| const response = JSON.parse(xhr.responseText); | |
| successMessage.style.display = 'block'; | |
| downloadLink.href = response.url; | |
| downloadLink.textContent = response.filename; | |
| } else { | |
| alert("Hubo un error al subir el archivo. Inténtalo de nuevo."); | |
| } | |
| progressContainer.style.display = 'none'; | |
| }; | |
| xhr.onerror = () => { | |
| alert("Hubo un error con la petición de subida."); | |
| progressContainer.style.display = 'none'; | |
| }; | |
| xhr.send(formData); | |
| }); | |
| </script> | |
| </body> | |
| </html> |