Cómo subir y eliminar imágenes en AWS S3 NODEJS y React

En la construcción de nuestra aplicación web, el gestor de archivos es tal vez uno de los pasos más importantes y para esto, hoy hablaremos de ASW S3 Nodejs. Aunque no entraré en materia sobre las ventajas (las cuales son bastantes), hoy te contaré cómo usar correctamente AWS S3 configurando la subida de archivos desde Node js y react.

Lo que vas a necesitar

Aquí te dejo los enlaces más importantes de este post:

• Repositorio: haz click aquí para ver el repositorio del video y de este post.
• Paquetes que usaremos en esta app: sharp, aws-sdk, multer.

Crear y configurar Bucket

El primer paso es crear un bucket dentro de S3. Es importante ya tener nuestra cuenta de amazon aws funcionando, con una tarjeta de crédito conectada. Ahora dentro de S3, buscamos buckets y creamos uno nuevo. Podemos ingresar el nombre que deseemos y separar el nombre por guiones como:

bucket-avatar

Configuración de permisos

Este paso es demasiado importante porque si no configuramos bien los permisos, pues no podrán verlo. Aunque desde aquí radica el cómo necesita tu app los permisos, por ejemplo una foto de avatar: si pensamos como la foto de facebook de avatar, esta sale en todos lados, inclusive en las búsquedas de google entonces, cualquier persona puede verlo.

Si deseas configurar estos permisos para este bucket para que todos con el enlace puedan verlo entonces debes hacer lo siguiente. Ve a la sección «permisos» y luego en «bloquear todo el acceso publico»: desactiva todas las opciones. A continuación, en políticas de bucket añade el siguiente fragmento:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucket-avatar/*"
        }
    ]
}

Con estos dos pasos ya podemos iniciar a subir imágenes al bucket. Ahora pasaremos a los permisos de usuario.

Crear usuario de AWS

Ahora en este paso, debemos crear un usuario que nos permita otorgar claves de acceso para poder añadir al código. Ve a la sección de «usuarios» de aws y dentro, haz click en crear usuario. En la zona «políticas de permisos» debes agregar 2:

• AmazonS3FullAccess
• IAMUserChangePassword

estos dos serán necesarios para que nuestro código pueda subir imágenes sin problema, o archivos.

Clave de acceso

Ahora debemos crear los accesos, entonces en la parte superior derecha haz click en «crear clave de acceso» y luego, selecciona la opción «servicios de terceros». Luego continuar, y listo! ya tienes tus 2 claves:

• Access key id
• Secret Access key

listo ya podemos proceder al código.

Formulario subir imágen en react

Este es un formulario sencilo el cual, permite subir una imagen y luego cambiarla por la actual del avatar. Vamos a revisar el código paso por paso:

return(
        <div>

            <div className='container text-center my-5'>
                <h1>AWS S3</h1>
                <p>Selecciona una opción</p>
                <img className='claseAvatar my-5' src={avatar} alt="avatar" />


                <form>
                    <div className="mb-3"> <input className="form-control" accept=".jpg" type="file" id="formFile" onChange={controlCambioImagen} /> </div>
                    <button type="submit" className="btn btn-primary w-100" onClick={controlSubida} >Subir foto</button>
                    <button type="submit" className="btn btn-danger w-100 mt-3" onClick={controlEliminar} >Eliminar foto</button>
                </form>
            </div>

            

        </div>  
    )
}

En este primer fragmento vemos 2 funciones calve: controlSubida y controlEliminar. ahora, dentro del input la función la controla ControlCambioImagen. Entonces vamos a revisarlas

Antes de iniciar es importante tener en cuenta estas 2 varaibles de useState. En la primera guardaremos el archivo que el usuario suba y en la segunda, la url del avatar.

const [archivo, setArchivo] = useState(null);
const [avatar, setAvatar] = useState("/imagenes/avatar.jpg");

Función ControlCambioImagen

Esta primera función permite guardar en una variable de useState el archivo que el usuario sube solo si son archivos .jpg.

function controlCambioImagen(event){
        
        const archivoSubido = event.target.files[0]; // imagen

        if(archivoSubido){
            const fileName = archivoSubido.name.toLowerCase();
            
            // Solamente archivos jpg
            if(fileName.endsWith('.jpg') && !fileName.endsWith('.jpeg')){setArchivo(archivoSubido);} // si es jpg, entonces guardamos en archivo.
            else{ console.log("sube un archivo .jpg");}
        }
    }

Función controlSubida

En esta función hay varias cosas que realtar:

• evaluamos primero si existe un archivo par omitir errores de subida.
• Guardamos el archivo y enviamos usando formData
• Con axios, creamos la solicitud post al servidor y solo si es correcta la solicitud, entonces guardamos la url recibida en la variable de useSate.

async function controlSubida(event){
        event.preventDefault(); 

        if(!archivo){console.log("sube un archivo");}
        else{
            const formData = new FormData();
            formData.append('file', archivo);

            // Enviar la imagen al servidor
            await axios.post("/subida", formData, {
                headers: {'Content-Type': 'multipart/form-data',},
            })
            .then(async function(response){
                console.log(response);

                if(response.status===200){
                    console.log("exito"); 
                    let urlImagen = response.data.urlImagen; 
                    setAvatar(urlImagen);
                }
                else{ console.log("error");  }
            });
        }

    }

Función controlEliminar

En esta función podemos ver que cuando el usuario hace click, entonces envía la solicitud post con axios pero a «/eliminar». Si esta es exitosa, entonces cambia nuevamente la url en la variable de useState a la inicial.

async function controlEliminar(){
        await axios.post("/eliminar")
        .then(async function(response){
            console.log(response);
            if(response===200){
                console.log("imagen eliminada correctamente");
                setAvatar("/imagenes/avatar.jpg");
            }
            else{
                console.log("error");
            }
        })
    
    }

Configuración de usuario en Node js

Bueno este paso es clave porque es el que permite que conectemos correctamente el usuario a aws con las calves creadas arriba. Entonces vamos a copiar el siguiente fragmento:

const miRegion = 'us-east-2';
let s3 = new S3Client({
  region: miRegion,
  credentials: {
    accessKeyId: process.env.LLAVEACCESO,
    secretAccessKey: process.env.LLAVESECRETO,
  }
});

De este fragmento tenemos que entender varias cosas:

• la región es independiente de cada persona, esta depende de la cuenta que creamos en aws entonces debemos obligatoriamente revisarla en nuestra cuenta.
• los credenciales obtenidos al crear el usuario, vamos a ponerlos en sus respectivos valores pero en el código anterior use las variables de entorno para protegerlo. Para ver el post con video de las variables de entorno haz click aquí.

Método post Subida de Node js

Este es el primer método que usaremos para poder subir las imágenes y en este tenemos que evaluar varios puntos:

• Si queremos guardar el archivo dentro de una carpeta dentro de un bucket, creamos entonces ambas variables con los nombres exactos.
• Creamos la URL de la imagen armada, tal cual como «urlImagen»
• Configuramos Multer de forma de permita guardar el archivo antes de subirlo a S3.
• Usamos sharp para redimensionar la imagen a 600×600 px.
• Creamos parámetros de subida con los datos creados.
• Ejecutamos la función o comando de subida.
• Enviarmos respuesta del servidor a react.

app.post("/subida", function(req, res){
  let bucket = "bucket-avatar";
  let carpetaInternaBucket = "imagenes/miavatar.jpg";
  let urlImagen = "https://" + bucket + ".s3." + miRegion + ".amazonaws.com/" + carpetaInternaBucket; // ruta de imagen
  // Multer
  const storage = multer.memoryStorage(); // multer almacena el archivo de forma temporal.
  const upload = multer({storage: storage});

  //FUNCIÓN DE SUBIDA S3
  upload.single('file')(req, res, async(err) => {
    if(err) console.log("error desde upload: ", err);
    else{
      // Redimensionamos la imagen antes de subirla a s3
      const redimensionBuffer = await sharp(req.file.buffer)
      .resize({width: 600, height: 600, fit: 'cover'})
      .toBuffer();

      const params = {
        Bucket: bucket,
        Key: carpetaInternaBucket,
        Body: redimensionBuffer,
        ContentType: 'image/jpeg',
      }

      // SUBIR LA IMAGEN
      const command = new PutObjectCommand(params);
      await s3.send(command)
      .then(response => {
        return res.status(200).json({urlImagen: urlImagen, mensaje: "archivo subido correctamente"});
      })
      .catch((error) =>{
        console.log("error al ejecutar send, ", error);
        return res.status(400).json({mensaje: "error al ejecutar comando, por favor intentar nuevamente"});
      });
    }
  });
});

Método post eliminar en Node js

Este segundo método entonces permite la eliminación del archivo de aws s3. De igual forma evaluamos los puntos:

• creamos las mismas variables de ubicación del archivo.
• Creamos parámetros para eliminar.
• ejecutamos comando para eliminar.

app.post("/eliminar", function(req, res){
  let bucket = "bucket-avatar";
  let carpetaInternaBucket = "imagenes/miavatar.jpg";
  

  let paramsBorrar = {
    Bucket: bucket,
    Key: carpetaInternaBucket
  }

  const commandoBorrar = new DeleteObjectCommand(paramsBorrar);

  s3.send(commandoBorrar)
  .then(response =>{
    console.log(response);
    return res.status(200).json({mensaje: "archivo borrado correctamente"});
  })

});

Video de ayuda

Hice este video para ayudarte en el proceso. Si te gusta no olvides dar like y suscribirte para nuevos videos.

Producto sugerido

Si eres como yo que pasa bastatne tiempo frente al compu, puede que la barra de luz te sirva bastante para cuidar tu vista en esas largas jornadas. También te dejo aquí el post para que veas la reseña completa.

Conclusión

Este suele ser el proceso completo para la subida de imágenes a aws s3 con node js y react. Cabe resaltar que pueden haber métodos más cortos o directos pero este ees el que he creado y me ha funciona a la perfección en producción.