Hoy te voy a enseñar a unir archivos usando el navegador web con JavaScript del lado del cliente para concatenar bytes de archivos y crear un archivo a partir de varias partes. Este script de JavaScript va a permitirte seleccionar varios archivos (con extensión part1, part2, etcétera) para unirlos en uno solo, sin tener que procesar algo en un servidor. Todo el proceso será realizado en el lado del cliente.
Para concatenar varios archivos vamos a usar Uint8Array
y Blob
. Básicamente vamos a leer el contenido de cada parte como bytes, y agregar ese montón de bytes a un arreglo que finalmente vamos a convertir a Blob.
Puedes acceder al unidor de archivos con JavaScript en el siguiente enlace: https://parzibyte.github.io/ejemplos-javascript/unir-archivos/
El proceso es simple:
files
, que será un arregloUint8Array
en donde alojaremos el archivo resultanteFileReader
y readAsArrayBuffer
set
en el archivo resultante para “copiar” los bytes del archivoAsí que el usuario solo debe seleccionar los archivos divididos y el navegador se encargará de unirlos y mostrar el resultado para su descarga.
Lo único que necesitamos es un input
de tipo file
en el lado de HTML:
<input type="file" id="archivos" multiple>
Escuchamos cuando el usuario seleccione uno o más archivos:
const $archivos = document.querySelector("#archivos");
$archivos.addEventListener("change", async () => {
// Agregar código aquí
}
Dentro del change
creamos el archivo resultante, calculando la longitud previamente. También tratamos de definir el nombre del archivo resultante, ya que la mayoría de archivos divididos tienen el formato nombre_archivo.extensión.partNúmero
:
const archivos = $archivos.files;
let nombreSugeridoParaArchivoUnido = "";
let longitudDeArchivoUnidoEnBytes = 0;
for (const archivo of archivos) {
if (nombreSugeridoParaArchivoUnido === "") {
nombreSugeridoParaArchivoUnido = archivo.name.substring(0, archivo.name.lastIndexOf("."));
}
longitudDeArchivoUnidoEnBytes += archivo.size;
}
const bytesDeArchivoUnido = new Uint8Array(longitudDeArchivoUnidoEnBytes);
Es momento de mostrar la función que lee el contenido del archivo como bytes y lo devuelve usando promesas:
const leerArchivoComoArrayBuffer = (archivo) => {
return new Promise((resolve, reject) => {
const lector = new FileReader();
lector.onerror = (evento) => {
reject(evento);
}
lector.onload = (evento) => {
resolve(evento.target.result);
}
lector.readAsArrayBuffer(archivo);
});
}
Ahora recorremos la lista de partes de archivos y concatenamos con set
en los bytes del archivo unido:
for (const archivo of archivos) {
const arrayBufferDeArchivoParcial = await leerArchivoComoArrayBuffer(archivo)
bytesDeArchivoUnido.set(new Uint8Array(arrayBufferDeArchivoParcial), compensacion)
compensacion += arrayBufferDeArchivoParcial.byteLength;
}
Finalmente lo descargamos:
const a = document.createElement("a");
const url = URL.createObjectURL(new Blob([bytesDeArchivoUnido], {
type: "application/octet-stream",
}));
a.href = url;
a.download = nombreSugeridoParaArchivoUnido;
a.click();
URL.revokeObjectURL(url);
El código fuente completo lo dejaré en mi GitHub. Puedes acceder a la demostración y usar el unidor de archivos con JavaScript en el siguiente enlace: https://parzibyte.github.io/ejemplos-javascript/unir-archivos/
En el ejercicio de programación de hoy vamos a trabajar con ANSI C para leer…
Hoy te quiero compartir una herramienta en línea para generar números aleatorios directamente en el…
Comprimir un PDF con Telegram es posible gracias a los Bots. Anteriormente en mi blog…
En este post te voy a enseñar a guardar solo algunos días de la semana…
En este post te enseñaré a usar tu impresora térmica comenzando en el paso de…
Hoy voy a tratar de solucionar el error ERR_SSL_CIPHER_OPERATION_FAILED que aparece al usar npm install…
Esta web usa cookies.