De File a Buffer

Para subir archivos desde un formulario a S3 a través de un Server Action he descubierto lo siguiente:

El Server Action, como ya sabemos, recibe los datos del formulario en un FormData. Asumiendo que el input del archivo se llame “image”, primero debemos de extraer la info:

const file = formData.get("image");
const arrayBuffer = await file.arrayBuffer();
const buffer = Buffer.from(arrayBuffer);

const file = formData.get("image");

• formData.get("image"): Aquí estamos utilizando el método .get() de FormData para extraer el archivo que se ha subido.
• Qué es FormData: FormData es una interfaz que permite construir un conjunto de pares clave-valor, donde cada clave es el nombre del campo en el formulario (en este caso, "image") y cada valor es el valor del campo. Cuando un campo es de tipo file, su valor es el archivo que el usuario ha subido.
• const file: Esta variable almacenará una referencia al archivo. Este archivo, en un entorno de navegador, se representa como un objeto File (o Blob).
• Ejemplo: Si el usuario ha subido un archivo llamado avatar.jpg en el campo image del formulario, entonces formData.get("image") devolverá un objeto File que contiene metadatos del archivo (name, size, type) y el contenido binario de avatar.jpg.

Resultado: Ahora, file contiene el archivo subido, al que podemos acceder y manipular.

2. const arrayBuffer = await file.arrayBuffer();

• file.arrayBuffer(): Este método devuelve una promesa que se resuelve con el contenido del archivo en forma de un ArrayBuffer.
• Qué es un ArrayBuffer: Un ArrayBuffer es un tipo de objeto que representa un bloque de datos binarios de tamaño fijo en la memoria. Es un tipo de datos fundamental en JavaScript para trabajar con datos binarios de bajo nivel.
• Por qué necesitamos un ArrayBuffer: Para trabajar con datos binarios, especialmente cuando necesitamos manipular o convertir datos binarios (como convertir un archivo en un Buffer de Node.js), el ArrayBuffer es muy útil, ya que permite leer el archivo completo en formato binario.
• await: La conversión de file a un ArrayBuffer es asíncrona porque el archivo puede ser grande y el navegador necesita tiempo para leer su contenido. Usamos await para esperar a que la conversión termine antes de pasar al siguiente paso.

Resultado: Ahora, arrayBuffer contiene el contenido binario completo del archivo.

3. const buffer = Buffer.from(arrayBuffer);

• Buffer.from(arrayBuffer): Este método toma el ArrayBuffer obtenido en el paso anterior y lo convierte en un Buffer.
• Qué es un Buffer: En Node.js, un Buffer es una estructura de datos especial diseñada para manejar flujos de datos binarios crudos. Los Buffers son muy utilizados cuando trabajamos con datos binarios (por ejemplo, archivos, datos en red) porque permiten leer, escribir y manipular estos datos con mucha eficiencia.
• Por qué convertimos el ArrayBuffer en un Buffer: Aunque ambos (ArrayBuffer y Buffer) representan datos binarios, en Node.js, Buffer es más eficiente y tiene métodos adicionales para manipular datos binarios. Además, muchas APIs de Node.js (como las de archivos o bases de datos) esperan Buffer en lugar de ArrayBuffer, por lo que esta conversión facilita la interoperabilidad con otros módulos.
• Ejemplo de lo que contiene buffer: Ahora buffer es una representación binaria del archivo, lista para ser utilizada en Node.js para cualquier propósito, como almacenarla en una base de datos, subirla a un servidor de archivos (como S3), o procesarla de alguna otra manera.

Resultado: buffer es ahora un Buffer de Node.js, que contiene el contenido binario del archivo subido y que está listo para ser utilizado en cualquier API de Node.js que requiera trabajar con datos binarios.