Implementación de subida de archivos con ReactJS y AWS S3

En el desarrollo de aplicaciones web modernas, la gestión de archivos es una funcionalidad común, ya sea para cargar imágenes, documentos u otros tipos de datos. Una de las soluciones más robustas y escalables para manejar este tipo de procesos es AWS S3, el servicio de almacenamiento en la nube de Amazon.

Integrarlo con ReactJS no solo proporciona una experiencia rápida y eficiente para los usuarios, sino que también asegura que los archivos estén almacenados de manera segura y accesible.

Este artículo te guiará paso a paso en la implementación de una funcionalidad de subida de archivos utilizando ReactJS y AWS S3, explicando el proceso con ejemplos prácticos para que cualquier ingeniero pueda aplicarlo en sus proyectos.

¿Por qué usar ReactJS y AWS S3?

ReactJS: Flexibilidad y rendimiento en el frontend

ReactJS es una biblioteca de JavaScript ampliamente adoptada para construir interfaces de usuario dinámicas y eficientes. Su enfoque basado en componentes permite crear aplicaciones web rápidas y escalables, con una estructura clara y un mantenimiento simplificado.

AWS S3: Almacenamiento seguro y escalable

Por otro lado, Amazon S3 (Simple Storage Service) es uno de los servicios de almacenamiento en la nube más confiables y utilizados a nivel global. Con AWS S3, los desarrolladores pueden almacenar grandes cantidades de datos de manera segura y con alta disponibilidad. S3 ofrece un enfoque de pago por uso, lo que significa que solo pagas por el almacenamiento que realmente utilizas, lo que lo convierte en una opción muy atractiva para startups y grandes empresas por igual.

La combinación de ReactJS para manejar la interfaz de usuario y AWS S3 para gestionar el almacenamiento de archivos es una solución eficiente y fácil de escalar.

Configuración de AWS S3

Creación de un bucket en S3

• Antes de escribir código en ReactJS, debemos preparar nuestro entorno en AWS. El primer paso es crear un "bucket" en S3, que será el lugar donde se almacenarán los archivos.
• Accede a la consola de AWS y navega a S3.
• Haz clic en Create bucket.
• Asigna un nombre único a tu bucket (el nombre debe ser globalmente único).
• Selecciona la región en la que quieres que se aloje tu bucket.
• Configura los permisos. Asegúrate de que el bucket esté configurado para ser privado, ya que querrás restringir el acceso público a los archivos.

Una vez creado el bucket, toma nota de su nombre y región, ya que los necesitarás en el código.

Configuración de políticas de acceso

1. Para que tu aplicación ReactJS pueda subir archivos, deberás crear una política de permisos y un usuario en AWS Identity and Access Management (IAM).
2. Crea un nuevo usuario en IAM con acceso programático.
3. Asigna a este usuario una política que permita las operaciones de escritura en S3. Asegúrate de que la política permita s3:PutObject en el bucket que acabas de crear.
4. Esta configuración permitirá que la aplicación cargue archivos en S3 sin exponer credenciales críticas.

Implementación en ReactJS

Ahora que el bucket de AWS S3 está listo, es hora de configurar el frontend en ReactJS.

Instalación de bibliotecas necesarias

Para interactuar con AWS S3 desde ReactJS, utilizaremos la biblioteca oficial de AWS, AWS SDK, que facilita la comunicación con los servicios de AWS.

En tu proyecto React, instala las dependencias necesarias:

npm install aws-sdk

El AWS SDK te permitirá acceder a los servicios de AWS desde tu aplicación React. También necesitarás una biblioteca como axios o el propio fetch de JavaScript para manejar las solicitudes HTTP en caso de que optes por firmar las solicitudes desde el backend.

Configuración del cliente AWS S3 en ReactJS

En el componente React que gestionará la subida de archivos, primero debes configurar las credenciales de AWS y el bucket S3. Evita exponer tus claves de acceso directamente en el frontend por razones de seguridad; en su lugar, usa un backend para obtener credenciales temporales de AWS STS (Security Token Service).

A continuación, un ejemplo de configuración básica para la subida de archivos:

import React, { useState } from 'react';
import AWS from 'aws-sdk';
const S3_BUCKET = 'tu-nombre-de-bucket';
const REGION = 'tu-region';
AWS.config.update({
 accessKeyId: 'TU_ACCESS_KEY',
 secretAccessKey: 'TU_SECRET_KEY',
 region: REGION,
});
const myBucket = new AWS.S3({
 params: { Bucket: S3_BUCKET },
 region: REGION,
});
const UploadFileToS3 = () => {
 const [selectedFile, setSelectedFile] = useState(null);
 const handleFileInput = (e) => {
   setSelectedFile(e.target.files[0]);
 };
 const uploadFile = (file) => {
   const params = {
     ACL: 'public-read',
     Body: file,
     Bucket: S3_BUCKET,
     Key: file.name,
   };
   myBucket.putObject(params)
     .on('httpUploadProgress', (evt) => {
       console.log("Cargando: ", Math.round((evt.loaded / evt.total) * 100) + '%');
     })
     .send((err) => {
       if (err) console.log(err);
       else console.log("Archivo subido con éxito");
     });
 };
 return (
   <div>
     <input type="file" onChange={handleFileInput}/>
     <button onClick={() => uploadFile(selectedFile)}>Subir Archivo</button>
   </div>
 );
};
export default UploadFileToS3;

Explicación del código

• Configuración de AWS SDK: Actualizamos la configuración de AWS con las credenciales y la región del bucket.
• Selección de archivo: El estado selectedFile gestiona el archivo que el usuario selecciona en el input.
• Subida a S3: El método putObject de S3 permite subir el archivo seleccionado al bucket S3. Mientras el archivo se carga, mostramos un progreso en consola.

Seguridad en la subida de archivos

Es importante destacar que las credenciales de acceso de AWS no deberían estar presentes en el frontend. Esto comprometería la seguridad de tu aplicación. Lo recomendable es usar credenciales temporales o implementar la firma de URLS en el backend.

Para hacerlo, puedes utilizar AWS Amplify, que gestiona de manera segura las operaciones de autenticación y subida de archivos, o configurar un backend en Node.js que se encargue de firmar las URL de carga.

La implementación de una funcionalidad de subida de archivos utilizando ReactJS y AWS S3 es un proceso relativamente sencillo, pero muy poderoso. No solo permite a las aplicaciones manejar archivos de manera eficiente, sino que también se integra con la infraestructura escalable y segura de AWS.

Si deseas implementar soluciones personalizadas de subida de archivos o mejorar tu infraestructura de almacenamiento en la nube, Rootstack puede ayudarte a diseñar e implementar la mejor solución adaptada a tus necesidades.

Te recomendamos en video