Mejorando la Experiencia de Subida de CVs: Alineando Laravel y PHP con Alpine.js

En el proyecto devlog-ist/landing, recientemente implementamos una mejora significativa en el proceso de subida de currículums (CVs) para garantizar una experiencia de usuario más fluida y evitar errores confusos.

El problema central que identificamos era una desalineación entre la configuración upload_max_filesize de PHP en producción (2MB) y las reglas de validación de Laravel (que permitían hasta 5MB). Esto provocaba que archivos entre 2MB y 5MB fueran descartados silenciosamente por PHP antes de llegar a la validación de Laravel, lo que resultaba en un mensaje de error genérico como "el archivo es requerido", generando confusión en los usuarios, especialmente aquellos que subían CVs escaneados o fotos desde dispositivos móviles, que suelen ser más grandes.

Para solucionar esto, implementamos varias mejoras clave:

1. Alineación de la Validación en Laravel: Ajustamos la regla de validación en CvUploadRequest de max:5120 a max:2048, estableciendo el límite en 2MB para que coincida con la configuración del servidor PHP.

   use Illuminate\Foundation\Http\FormRequest;
   
   class CvUploadRequest extends FormRequest
   {
       public function rules()
       {
           return [
               'cv_file' => [
                   'required',
                   'file',
                   'mimes:pdf,doc,docx',
                   'max:2048', // 2MB
               ],
           ];
       }
   
       public function messages()
       {
           return [
               'cv_file.max' => 'El CV no puede superar los 2MB de tamaño.',
               'cv_file.mimes' => 'El CV debe ser un archivo PDF, DOC o DOCX.',
           ];
       }
   }
   

2. Validación del Lado del Cliente con Alpine.js: Para proporcionar retroalimentación instantánea al usuario, añadimos validación del lado del cliente utilizando Alpine.js. Esto permite a los usuarios conocer si un archivo es demasiado grande o de un tipo incorrecto antes de intentar subirlo al servidor, mejorando drásticamente la usabilidad.

   <div x-data="{ file: null, error: '' }">
       <input type="file"
              name="cv_file"
              id="cv_file"
              accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
              x-ref="fileInput"
              @change="
                   file = $refs.fileInput.files[0];
                   error = '';
                   if (file) {
                       const maxSize = 2 * 1024 * 1024; // 2MB
                       const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
   
                       if (file.size > maxSize) {
                           error = 'El archivo es demasiado grande (máx. 2MB).';
                           $refs.fileInput.value = '';
                       } else if (!allowedTypes.includes(file.type)) {
                           error = 'Formato de archivo no válido. Solo PDF, DOC, DOCX.';
                           $refs.fileInput.value = '';
                       }
                   }
              ">
       <p x-show="file">Archivo seleccionado: <span x-text="file ? file.name : ''"></span></p>
       <p x-show="error" class="text-red-500" x-text="error"></p>
       <p class="text-sm text-gray-500">Tamaño máximo: 2MB. Formatos permitidos: PDF, DOC, DOCX.</p>
   </div>
   

3. Mejora del Atributo accept: Actualizamos el atributo accept en el campo de entrada de archivo para ser más específico (application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document). Esto ayuda a los dispositivos móviles a presentar un selector de archivos más relevante, facilitando la selección de CVs en el formato correcto.

4. Mensajes de Error e Información Actualizados: Revisamos y actualizamos los mensajes de error y las sugerencias de archivo en los cuatro idiomas soportados (inglés, español, francés, alemán) para que sean claros, concisos y directamente relacionados con los límites de tamaño y tipo de archivo.

5. Pruebas de Regresión: Añadimos una prueba automatizada para la correcta denegación de archivos que exceden el tamaño máximo permitido, asegurando que la validación funcione como se espera en futuras iteraciones.

Estas mejoras no solo resuelven un punto de frustración común para los usuarios, sino que también refuerzan la robustez de nuestra aplicación, garantizando que los archivos subidos cumplan con las expectativas tanto del servidor como de la aplicación.