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