Para la APP de «Compra», similar a la que hice en REACT y que llamaré «Shopping» necesitaba resolver cómo subir ficheros en Svelte5 + componentes de SVAR, y eso he hecho, hacer el ejemplo con componentes de SVAR para que en los formularios creados con EDITOR de SVAR, pueda incluir ficheros entre sus campos.
He aprovechado, y he incluido la funcionalidad de reducción de las imágenes en el navegador, de tal forma que la imagen que suba al server ya tiene todos los ajustes que necesita.

DEMO: https://fhumanes.com/svar-upload/

Si trabajáis con los componentes de SVAR (os lo recomiendo), esta solución tiene el «detalle» de la creación del componente para los UPLOAD, ya que no es un tipo estándar del CORE de SVAR, por eso la solución tiene 2 ficheros App.svelte y fileField.svelte.

Si os interesa este tema y deseáis tener los fuentes, accede a la totalidad del artículo.

Para completar un poco más este artículo, creo que es necesario la realización de la reducción y compresión , si se considera necesario, de la imagen antes de llegar al servidor.

Si comprobáis el tamaño de las fotografías que hace vuestro móvil, veréis que son enormes, más de 2MB de tamaño y de 4000 px de ancho, prácticamente, imposibles de tratar en las aplicaciones de gestión y asegurar el funcionamiento de forma rápida.

Este ejemplo lo que hace es reducir la imagen y presentarla, antes de enviar al servidor, por lo que la gestión es mucho más rápida que hacer todo esto apoyado en la gestión del server.

DEMO: https://fhumanes.com/my-resizeImage-app/

El código es JavaScript, por lo que demás de funcionar en Svelte, podría funcionar en cualquier otro entorno, incluyendo PHPRunner.

Si te interesa este tema, sigue leyendo el artículo en este enlace.

He solicitado a una IA que me describa las ventajas y los inconvenientes de desarrollar aplicaciones Multi-idiomas.

Es muy importante que tenga esta arquitectura aunque inicialmente sólo tengas un idioma.

Ventajas de desarrollar aplicaciones multi-idioma

1. Accesibilidad global

• Permite que usuarios de distintas regiones accedan y comprendan la aplicación sin barreras lingüísticas.
• Aumenta el alcance potencial del producto sin necesidad de rehacer la interfaz.

2. Mejora de la experiencia de usuario

• El usuario se siente más cómodo y valorado al interactuar en su idioma nativo.
• Reduce la fricción y mejora la retención.

3. Escalabilidad sin dolor

• Si se diseña con un sistema de internacionalización (i18n) desde el principio, añadir nuevos idiomas es cuestión de incorporar archivos de traducción, sin tocar el código base.
• Svelte5, con su enfoque modular, permite que los textos estén desacoplados del componente, facilitando el cambio de idioma sin alterar la lógica.

4. Ventaja competitiva

• En mercados saturados, ofrecer soporte multilingüe puede ser el factor diferenciador.
• Mejora la percepción de marca como inclusiva y profesional.

5. Cumplimiento normativo

• En algunos países, ofrecer contenido en el idioma oficial es obligatorio para ciertos sectores (educación, salud, administración pública).

Inconvenientes (¡pero todos tienen solución!)

1. Mayor esfuerzo inicial

• Requiere planificación: definir estructura de archivos, claves de traducción, y lógica para cambiar idioma.
• Pero si se hace bien desde el principio, el esfuerzo se amortiza rápidamente.

2. Gestión de traducciones

• Necesitas mantener consistencia entre idiomas, revisar calidad lingüística y actualizar textos en paralelo.
• Solución: usar herramientas como i18next, locize, o incluso sistemas propios con JSONs bien estructurados.

3. Contenido dinámico

• Los textos generados por usuarios o APIs externas pueden no estar traducidos.
• Solución: marcar claramente qué contenido es traducible y cuál no, o usar traducción automática como apoyo.

4. SEO multilingüe

• Si la app es pública, hay que cuidar que los motores de búsqueda indexen correctamente cada idioma.
• Solución: usar rutas específicas por idioma (/es, /en, etc.) y etiquetas hreflang.

Buen diseño = cambios sin dolor

Si desde el inicio se estructura la app con un sistema de claves de traducción (por ejemplo: t(‘welcome_message’)), cambiar el idioma es tan simple como cargar otro archivo de traducción. No se toca el HTML, ni los componentes, ni la lógica. Solo se cambia el contexto lingüístico.

En Svelte5, esto se puede lograr con:

• Stores reactivos para el idioma actual.
• Archivos .json por idioma.
• Componentes que consumen las traducciones sin acoplarse al idioma específico.

Objetivo

Disponer de una solución ara desarrollos multilingües, con costes muy reducidos y fáciles de entender y de aplicar. Debe contemplar los temas de fechas y edición de números.

DEMO: https://fhumanes.com/svelte-i18n/

Si estás interesado en este tema, sigue leyendo el artículo en este enlace.

En la revisión de temas necesarios para hacer una aplicación siempre existe la necesidad de cargar (upload) ficheros desde el Navegador.

Existen varias estrategias para enviar archivos desde el navegador al servidor, cada una con sus ventajas y desafíos. Las más comunes son:

1. Envío tradicional con formularios HTML (multipart/form-data)

• El navegador gestiona automáticamente la codificación del archivo.
• El servidor (como PHP) recibe los datos en $_FILES, lo que facilita la validación y almacenamiento.
• Sin embargo, este método puede ser menos flexible en aplicaciones SPA (Single Page Application) como las que se construyen con Svelte.

2. Envío mediante JavaScript usando FormData

• Permite una integración más dinámica con el frontend.
• Se puede combinar con fetch o XMLHttpRequest para enviar los datos sin recargar la página.
• Ideal para validar y preprocesar los archivos en el cliente antes de enviarlos.

3. Codificación en base64 y envío como JSON

• El archivo se convierte en una cadena base64 y se envía como parte de un objeto JSON.
• Útil cuando se quiere incrustar la imagen directamente en el HTML o en una base de datos.
• Aunque aumenta el tamaño del archivo (~33%), permite una visualización inmediata sin necesidad de rutas físicas

Objetivo

Codificar un ejemplo simple, donde se pueda revisar el funcionamiento de los campos de tipo «file» y cómo se accede a la estructura de datos del fichero/s y cómo se accede al contenido del mismo.

También, cómo se pueden tratar esos ficheros en el server (PHP SLIM 4.0)

DEMO: https://fhumanes.com/my-upload-app/

Si estás interesado en este tema, sigue leyendo el artículo en este enlace