¿Cómo construir un cargador de archivos JavaScript?

La carga de archivos es una característica básica de la mayoría de los proyectos web actuales. Por ejemplo, los sitios web modernos y las aplicaciones web como Facebook, LinkedIn, Twitter, Coursera y muchos más permiten a los usuarios finales cargar archivos, como imágenes, documentos, videos, etc. Además, herramientas en línea como herramientas de edición de imágenes, detectores de plagio, y los convertidores de PDF a Word también permiten a los usuarios cargar archivos. A veces, los equipos internos necesitan una función de carga de archivos para cargar videos e imágenes de productos. Si bien crear un cargador de archivos puede ser un desafío, hoy en día hay disponibles varias herramientas y bibliotecas de terceros que ayudan a implementar una función de carga de archivos rápidamente en su proyecto. Sin embargo, si está buscando crear un cargador de archivos, más específicamente, un cargador de JavaScript, desde cero, este artículo es el lugar correcto.

En este artículo, le mostraremos cómo crear un cargador de archivos JavaScript con JavaScript estándar o JavaScript puro sin usar bibliotecas externas.

¿Cuáles son las características de un cargador de archivos?

Cuando se trata de crear un cargador de archivos, necesitamos crear un botón de carga de archivos en el front-end que permita a los usuarios cargar los archivos deseados en el sitio web o la aplicación web. También podemos permitir múltiples cargas de archivos y mostrar barras de progreso para una mejor experiencia de usuario. Además, también deberíamos mostrar vistas previas de imágenes cuando un usuario carga un archivo de imagen. Una vez que se carga el archivo, debemos leerlo, enviarlo al backend y almacenarlo en el servidor. A veces, los usuarios cargan archivos de gran tamaño, lo que provoca que los usuarios carguen lentamente. Por esta razón, es mejor cargar archivos grandes al servidor en fragmentos para evitar errores y mejorar la velocidad. Estos fragmentos de archivos son más manejables que un solo archivo grande.

Además, los desarrolladores deben crear un cargador de archivos eficiente que admita cargas rápidas. También debe asegurarse de que un cargador de archivos sea seguro para evitar que los atacantes cibernéticos implementen malware y virus en su servidor.

¿Cómo crear un cargador de archivos JavaScript?

Paso 1: Configuración del lado del servidor

Usaremos el paquete HTTP integrado para configurar el servidor Node.js. Comenzaremos creando una nueva carpeta para el proyecto:

servicio de carga de archivos mkdir

A continuación, crearemos un archivo index.js. Este será el punto de entrada de nuestro servidor.

Finalmente, crearemos el servidor HTTP que se ejecutará en el puerto 8080

Paso 2: crear el front-end del cargador de archivos JavaScript

Para crear la parte frontal de nuestro cargador de archivos JavaScript, crearemos un archivo HTML básico que mostrará un botón de carga de archivos y aceptará la entrada de archivos de los usuarios. También mostraremos el estado de la carga del archivo. Una vez que el usuario haga clic en el botón, se iniciará el proceso de carga del archivo.

Mientras creamos un botón de carga de archivos simple, también puede editar el texto del botón o cambiar el color del botón con fines de diseño.

A continuación, enviaremos este archivo desde el backend:

Paso 3: Leer el archivo cargado en el front-end

Para leer el contenido del archivo en la interfaz, usaremos el objeto 'FileReader'. Permite que las aplicaciones web lean el contenido del archivo (almacenado en el sistema del usuario) de forma asíncrona. El objeto 'FileReader' ofrece varios métodos para leer un archivo. Por ejemplo, podemos leer el archivo cargado como un búfer de matriz o en datos binarios sin procesar. Incluso podemos leer el archivo como una URL de datos. Aquí, usaremos el método de matriz para leer el archivo:

Se puede acceder a los archivos seleccionados en el campo 'archivos' para la entrada:

El objeto 'FileReader' también proporciona varios detectores de eventos, como 'onprogress' y 'onload', para rastrear la lectura del archivo cargado en el front-end. Aquí, usaremos el evento 'onload':

Paso 4: Envío del archivo cargado al backend

Antes de enviar el archivo cargado por el usuario al backend, es mejor dividirlo en pequeños fragmentos o partes y enviar los fragmentos de archivo periódicamente, especialmente si el tamaño del archivo es grande. Esto se debe a que cargar archivos muy grandes puede causar problemas relacionados con la latencia y la velocidad. Además, a veces los atacantes cibernéticos también cargan archivos que son demasiado grandes, lo que puede causar que el servidor no funcione correctamente.

Entonces, primero dividiremos el archivo en fragmentos y los enviaremos al backend uno por uno. También debemos asegurarnos de enviar los fragmentos en orden para que el archivo no se corrompa. También usaremos 'async await' para no sobrecargar el servidor con solicitudes.

Paso 5: almacenar los fragmentos de archivos en el servidor

Por último, recibiremos los fragmentos y los almacenaremos en el servidor.

Eso es. Ahora tenemos un cargador de archivos único completo para cargas de archivos Javascript. También podemos habilitar la carga de múltiples archivos usando la opción 'múltiple':

<tipo de entrada = "archivo" id = "archivos" múltiples>

Dividiremos cada archivo en fragmentos uno por uno y los enviaremos al backend.

Conclusión

La carga de archivos es una característica esencial de muchas aplicaciones web y sitios web modernos. Podemos utilizar una herramienta de carga de archivos de terceros, como una biblioteca JavaScript o una API de carga de archivos, para implementar rápidamente una carga de archivos JavaScript en nuestras aplicaciones. Sin embargo, también puede crear un cargador de archivos desde cero de la forma que desee. Por ejemplo, puede dividir archivos grandes en fragmentos y enviarlos al backend uno por uno. En este artículo, hemos creado un cargador de archivos JavaScript con Vanilla JS desde cero.