Tutorial 5: Creando la Función JavaScript para Subir Archivos

¡Hola de nuevo!

En esta lección vamos a crear una función JavaScript que maneje la subida de archivos. Cuando seleccionemos un archivo, la página se enviará automáticamente y mostraremos un indicador de carga. Vamos a hacerlo paso a paso.

📋 Contenido del Tutorial

Entendiendo el problema
Preparando el código JavaScript
Detectando la selección del archivo
Enviando el formulario automáticamente
Mostrando el loader
Código completo
Explicación detallada
Próximos pasos

🤔 1. Entendiendo el problema

¿Qué está pasando actualmente?

Cuando abrimos nuestra aplicación y seleccionamos un archivo:

❌ No pasa nada - El formulario no se envía
❌ No hay feedback - El usuario no sabe si está procesando
❌ Experiencia pobre - El usuario tiene que hacer clic en un botón de enviar

¿Qué queremos lograr?

✅ Envío automático - Cuando se selecciona un archivo, se envía el formulario
✅ Feedback visual - Mostrar un loader mientras se procesa
✅ Mejor experiencia - El usuario solo selecciona el archivo y todo ocurre automáticamente

📝 2. Preparando el código JavaScript

Ubicación del código

Vamos a añadir nuestro código JavaScript al final del archivo index.php, justo antes de cerrar la etiqueta </body>.

Estructura básica

<script>
    // Todo nuestro código JavaScript irá aquí
    $(document).ready(function() {
        // Código que se ejecuta cuando la página está lista
    });
</script>

🎯 3. Detectando la selección del archivo

Seleccionando el input de archivo

Primero, necesitamos seleccionar nuestro input de archivo. En el HTML tenemos:

<input id="file-upload" class="hidden" type="file" name="file">

Usamos jQuery para seleccionarlo por su ID:

$('#file-upload')

El evento 'change'

Cuando el usuario selecciona un archivo, se dispara el evento change. Vamos a escucharlo:

$('#file-upload').change(function() {
    // Este código se ejecuta cuando el usuario selecciona un archivo
});

Verificando que se haya seleccionado un archivo

Dentro del evento, verificamos que el usuario haya seleccionado al menos un archivo:

if (this.files.length > 0) {
    // El usuario seleccionó un archivo
    // Aquí va el código para enviar el formulario
}

Explicación:

this se refiere al elemento input de archivo
this.files es un array con los archivos seleccionados
this.files.length nos dice cuántos archivos hay
Si es mayor que 0, significa que hay un archivo seleccionado

📤 4. Enviando el formulario automáticamente

Seleccionando el formulario

Tenemos un formulario con el ID form:

<form id="form" method="post" enctype="multipart/form-data">
    <input id="file-upload" class="hidden" type="file" name="file">
</form>

Enviando el formulario con jQuery

Para enviar el formulario automáticamente, usamos:

$('#form').submit();

Código completo para el envío

$(document).ready(function() {
    // Cuando el input de archivo cambia (usuario selecciona un archivo)
    $('#file-upload').change(function() {
        // Verificar si hay un archivo seleccionado
        if (this.files.length > 0) {
            // Enviar el formulario automáticamente
            $('#form').submit();
        }
    });
});

🔄 5. Mostrando el loader

Elementos que vamos a manipular

Tenemos dos elementos importantes:

1. El loader (oculto por defecto):

<div id="loader" class="hidden flex flex-col text-center flex-1">
    <img src="frontend/images/loader.gif"/>
    <span>Uploading....</span>
</div>

2. El contenido principal (visible por defecto):

<div id="upload" class="flex flex-col text-center mt-40">
    <img src="frontend/images/banner-img.png"/>
    <h1>Welcome to My Whisper</h1>
    <!-- ... más contenido ... -->
</div>

Funciones de jQuery para manejar clases

`removeClass()` - Quitar una clase

$('#loader').removeClass('hidden'); // Muestra el loader

`addClass()` - Añadir una clase

$('#upload').addClass('hidden'); // Oculta el contenido

Código completo con el loader

$(document).ready(function() {
    $('#file-upload').change(function() {
        if (this.files.length > 0) {
            // Mostrar loader
            $('#loader').removeClass('hidden');
            
            // Ocultar contenido principal
            $('#upload').addClass('hidden');
            
            // Enviar formulario
            $('#form').submit();
        }
    });
});

¿Por qué usar removeClass y addClass?

Función	Efecto	Uso
`removeClass('hidden')`	Quita la clase `hidden`	Muestra el elemento
`addClass('hidden')`	Añade la clase `hidden`	Oculta el elemento

En Tailwind CSS, la clase hidden hace que el elemento no se muestre (display: none).

💻 6. Código completo

Archivo: `index.php` (sección final)

<!-- ... todo el HTML anterior ... -->

<!-- JS CODE -->
<script>
    $(document).ready(function() {
        // Evento change del input de archivo
        $('#file-upload').change(function() {
            // Verificar si el usuario seleccionó un archivo
            if (this.files.length > 0) {
                // Mostrar el loader (quitar clase hidden)
                $('#loader').removeClass('hidden');
                
                // Ocultar el contenido principal (añadir clase hidden)
                $('#upload').addClass('hidden');
                
                // Enviar el formulario automáticamente
                $('#form').submit();
            }
        });
    });
</script>

</body>
</html>

Código con comentarios adicionales (más detallado)

<script>
    // Esperar a que la página esté completamente cargada
    $(document).ready(function() {
        // Seleccionar el input de archivo y escuchar el evento 'change'
        $('#file-upload').change(function() {
            // Verificar si hay un archivo seleccionado
            if (this.files.length > 0) {
                // 1. Mostrar el loader
                // Quitamos la clase 'hidden' que oculta el loader
                $('#loader').removeClass('hidden');
                
                // 2. Ocultar el contenido principal
                // Añadimos la clase 'hidden' para ocultar la sección de upload
                $('#upload').addClass('hidden');
                
                // 3. Enviar el formulario
                // Esto activa el action del formulario (que es la misma página)
                $('#form').submit();
            }
        });
    });
</script>

📖 7. Explicación detallada

¿Cómo funciona jQuery?

jQuery es una biblioteca de JavaScript que simplifica la manipulación del DOM.

Sintaxis básica:

$('selector').acción();

En nuestro código:

Código	Explicación
`$(document).ready()`	Ejecuta el código cuando el DOM está listo
`$('#file-upload')`	Selecciona el elemento con ID `file-upload`
`.change()`	Escucha el evento change (cuando cambia el valor)
`this.files.length`	Verifica cuántos archivos hay seleccionados
`$('#loader')`	Selecciona el elemento con ID `loader`
`.removeClass('hidden')`	Quita la clase `hidden` (muestra el elemento)
`.addClass('hidden')`	Añade la clase `hidden` (oculta el elemento)
`$('#form')`	Selecciona el formulario con ID `form`
`.submit()`	Envía el formulario

Flujo de la aplicación

1. Usuario abre la página
   ↓
2. Ve el contenido principal (upload visible, loader oculto)
   ↓
3. Usuario hace clic en "Upload File"
   ↓
4. Se abre el selector de archivos
   ↓
5. Usuario selecciona un archivo
   ↓
6. Evento 'change' se dispara
   ↓
7. JavaScript verifica que hay un archivo
   ↓
8. Muestra el loader (removeClass hidden)
   ↓
9. Oculta el contenido (addClass hidden)
   ↓
10. Envía el formulario automáticamente (submit)
   ↓
11. PHP procesa el archivo en el servidor

¿Por qué usamos `this.files.length > 0`?

Cuando el usuario selecciona un archivo:

this.files contiene un objeto FileList
Si hay un archivo, this.files.length es 1 o más
Si no hay archivo, this.files.length es 0

Ejemplo de FileList:

// Si el usuario selecciona "video.mp4"
this.files = {
    0: File { name: "video.mp4", size: 1234567, type: "video/mp4" },
    length: 1
}

// Si no hay archivo seleccionado
this.files = {
    length: 0
}

🧪 8. Probando la funcionalidad

Pasos para probar:

Abrir la aplicación:
text
```
http://localhost/whisper/
```
Hacer clic en "Upload File"
Seleccionar un archivo (video o audio)
Observar el comportamiento:
- ✅ El loader aparece inmediatamente
- ✅ El contenido principal se oculta
- ✅ El formulario se envía automáticamente

Posibles problemas y soluciones

❌ El loader no aparece

Problema: La clase 'hidden' no se quita correctamente
Solución: Verifica que el ID del loader sea exactamente 'loader'

<div id="loader" class="hidden ..."> <!-- Correcto -->
<div id="loader " class="hidden ..."> <!-- Incorrecto (espacio) -->

❌ El formulario no se envía

Problema: El ID del formulario no coincide
Solución: Verifica que el ID sea 'form'

<form id="form" method="post" ...> <!-- Correcto -->
<form id="myForm" method="post" ...> <!-- Incorrecto -->

❌ Error en la consola

Problema: jQuery no está cargado
Solución: Verifica que la etiqueta de jQuery esté antes de tu código

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // Tu código jQuery aquí
</script>

📊 8. Resumen del código

Versión minificada (para producción)

$(document).ready(function(){$('#file-upload').change(function(){if(this.files.length>0){$('#loader').removeClass('hidden');$('#upload').addClass('hidden');$('#form').submit();}})});

Versión con comentarios (para desarrollo)

$(document).ready(function() {
    // Cuando el usuario selecciona un archivo
    $('#file-upload').change(function() {
        // Si hay un archivo seleccionado
        if (this.files.length > 0) {
            // Mostrar el indicador de carga
            $('#loader').removeClass('hidden');
            // Ocultar el contenido principal
            $('#upload').addClass('hidden');
            // Enviar el formulario automáticamente
            $('#form').submit();
        }
    });
});

🎯 9. Próximos pasos

Lo que hemos logrado

✅ El formulario se envía automáticamente al seleccionar un archivo
✅ El loader se muestra durante el procesamiento
✅ Mejor experiencia de usuario

Lo que viene en la próxima lección

En la siguiente lección vamos a:

Procesar el archivo en PHP
Validar el archivo (tamaño, tipo, etc.)
Ejecutar Whisper para transcribir el audio/video
Guardar la transcripción en la base de datos
Mostrar el resultado al usuario

Avance del código PHP que añadiremos

<?php
// En el archivo index.php (parte superior)
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
    // Validar archivo
    $file = $_FILES['file'];
    $extension = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
    
    // Verificar extensión permitida
    $allowed = ['mp4', 'mkv', 'avi', 'mov', 'mp3', 'wav'];
    
    if (in_array($extension, $allowed)) {
        // Procesar con Whisper
        // ... (lo veremos en la próxima lección)
    }
}
?>

❓ Preguntas frecuentes

¿Por qué usar jQuery y no JavaScript puro?

jQuery simplifica la selección de elementos y el manejo de eventos
Es más conciso y fácil de leer
Maneja las diferencias entre navegadores automáticamente

¿Qué pasa si el usuario selecciona un archivo y luego lo cambia?

El evento change se dispara cada vez que se selecciona un archivo
El formulario se enviará con el nuevo archivo

¿El loader se muestra siempre?

Sí, pero solo por un momento hasta que el servidor procese el archivo
En la próxima lección haremos que el loader se mantenga mientras se procesa

¿Puedo usar JavaScript puro en lugar de jQuery?

Sí, pero el código sería más largo
jQuery hace que el código sea más legible y mantenible

¡Excelente trabajo! Ahora tienes una funcionalidad completa de subida automática con feedback visual. En la próxima lección, conectaremos esto con PHP para procesar realmente los archivos con Whisper.